今回のポイント
三つのCSS記法の使いどころ
class指定時のCSSの書き方をマスターする

　最初に，前回までに紹介したCSSを記述する三つの方法をまとめておきます。

1.ページ全体に適用するなら<style>
　<style>への記述はそのページ全体に簡単にデザインを適用できます。CSSの使い方としては一番基本的な使い方で可もなく不可もなくという感じです。

2.部分的に適用するならタグに直指定
　<p>タグなどに直接style="～"で書く方法はページ内で特定個所にのみデザインを適用する場合に有効です。またHTMLタグには意味的規定のない「補足」「コラム」「注釈」などの意味合いを擬似的にデザインとして実装しやすくなります。出版物ベースでコンテンツを考えるときに有用でしょう。

3.サイト単位で考えるなら外部CSS
　数ページ～数百ページというボリュームになるサイト全体でデザイン統一を考えるならば外部CSSを<link>で横込む方法が一番楽です。デザインの改変はCSSファイルの修正だけで完了します。

　こうして見ると1と3はコンセプト的には似ています。1はページ全体，3はサイト全体という違いこそあれターゲットが“全体”です。1でも3でも<p>に対してCSSで書式指定を行えば，対象範囲内──プログラムでいうところのフォーカス──のすべての<p>が変化します。

　しかしこの方法では「注釈や囲みにしたいなあ」という部分に対して，上手にデザインを適用できません。2は部分的な指定でしかありませんが，「<p>が段落だというのはわかるんだけど，段落にもいろいろあるじゃないですか。全部同じ書式ってどうなんですか」という要望に応えるには唯一の方法になっています。

　だから1と2を併用しよう，全体としての<p>に対する指定は<style>でやって，注釈にしたいところは<p>に直接style="～"を書こう！というのも一つの解決策でしょう。この考え方をソースにすると次のようになります（リスト1）。

リスト1●<style>と<p style="～">を併用したHTML 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>ページタイトル</title>
<!--まずは全体指定-->
<style type="text/css">
/*<p>に対して書式設定*/
p{
  color:#ff0000;  /*赤い文字*/
}

</style>
  </head>
  <body>
<p><!--ここは指定がないので<style>の指定が生きます-->
　説明が少し遅れてしまいましたが，学習環境について書いておくことにします。
本稿でHTML/CSSを学習する場合，必要になるのはテキスト・エディタとブラウザ
だけです。
</p>

<p style="color:#0000ff;/*青い文字*/"><!--ここは個別に指定します-->
　ブラウザもエディタと同様に使い慣れたものでかまいません。OSのシェアから
考えて，Internet Explorer（以後IE）が標準的なブラウザでしょう。エンジニア
の場合はFirefox（FX）の利用者も多いと思います。
</p>

<p><!--三つ目の段落も無指定にすると？-->
先ほどのXHTMLのサンプルをデスクトップに保存してIEで開いた場合，エンコード
を「日本語自動選択」にしていても図2のように文字化けが発生することがあり
ます。
</p>
</body>
</html>

　最初の段落は<p>がそのままでstyle="～"がないので<style>指定が有効になり赤い文字になります。二つ目の段落では<p style="color:#0000ff;/*青い文字*/">が設定されているので<style>での指定を上書きします。青い文字になります。

　三つ目の段落は再び無指定でただの<p>です。二つ目の段落で<p>に対する書式設定が青に上書きされているのでは？と思われるかもしれませんが，無指定の部分は<style>の<p>に対する設定が有効になります。したがってフォントの色は赤です（図1）。

図1●リスト1のコードをブラウザで表示したところ
図1●リスト1のコードをブラウザで表示したところ

　プロパティの設定は常に後からのもので上書きです，と前に説明しました。ところがこのサンプルでは二つ目の段落で一度文字色を青に設定したにもかかわらず，三つ目の段落の文字色は<style>の指定である赤です。これはプログラム的には「フォーカス」の考え方で理解できます（エンジニアでない方にはごめんなさい）。

　すなわち，<style>の指定はページに対してグローバルです。一方<p style="～">という指定は指定された<p>に対してのローカル設定になります。ローカル設定のない部分ではグローバル設定がデフォルトになるわけです。したがってこのケースでは一つ目と三つ目がグローバル設定で赤い文字，二つ目だけが青い文字になります。

　この複合技は一見使える技に思えます。しかしよくよく考えてください。サンプルのように<style>ではなく外部CSSを使っていたとしましょう。もし複数のページがサイト内にあって，注釈としたい部分だけ<p style="～">とあちこちに書いてあったとすると，サイト全体のデザインを変えたい場合には全部のページを一つずつ改変しなくてはならなくなります。これは非常に効率が悪いことになります。何か方法がないでしょうか。