Part 1. Let's begin CSS : Chapter 2. “CSS の基礎概念”

2.5 カスケーディングの基礎

 CSS という名称の一部になっているカスケーディングは,CSS にとってひじょうに大切な考え方である。ここでは,その基礎を解説する。

カスケーディングとは

 カスケーディングとは,ある要素のあるプロパティに対する宣言が複数あるとき,宣言の“強さ”の関係を定めて,うち 1 つの宣言だけが有効になるようにするしくみである。

 たとえば,次のスタイルシートをご覧いただこう。

DFN { color: navy; font-style: normal; }
P DFN { color: green; }

この状態で,次の HTML 中の DFN 要素はどのように出力されるだろうか。

<P> ある微分演算子に対する自由空間でのグリーン関数を,その演算子の<DFN>基本解</DFN>という。</P>

上の DFN 要素には,2 つのルールセットのいずれも適用されうる。しかし,color プロパティへの宣言が衝突してしまっている。この場合,宣言の“強さ”を決めて,その高い方の値を採用することになる。実際,この出力は,

 ある微分演算子に対する自由空間でのグリーン関数を,その演算子の基本解という。

かくして,後者のルールセットの宣言 color: green; のほうが強い宣言であり,結果として緑色で出力がされている。

 このように,カスケーディングという考え方を導入することで,複雑に絡み合った宣言から“何が適用されるのか”を間違いなく見つけることができるようになる。これを利用することが,CSS によるスタイルシートを作るうえで重要になってくる。

3 つのスタイルシート

 実際のカスケーディングについてお話しする前に,ひとつの文書に作用しうる“3 つのスタイルシート”について触れておこう。

 スタイルシートは,その文書の筆者のみが提供するものではない。文書の読者も,“自分用”のスタイルシートを用意し,文書に作用させることができる(Internet Explorer 4.0/5.x/6 のユーザにおかれては,オプションの“ユーザー補助”の項から“ユーザースタイルシート”の指定ができることが確認できよう)。読者は,これにより自分の出力させる文書に任意のデザインを施すことが可能である。

 もうひとつは,“ブラウザのスタイルシート”である。これは実際にルールセットの集合として存在するとは限らないが,カスケーディングなどを考えるときにひじょうに都合がよい。考えてもみれば,これがどんな形であれ,存在しなかったら,筆者または読者がスタイルシートを適用させない限り,すべてのプロパティは初期値か,それが継承されたものかになってしまう。極端な話,HTML は単にタグが取り除かれて出力されるだけである。したがって,“P 要素は前後に空行を伴ったブロックとして出力される”,“BLOCKQUOTE 要素は両インデントで出力される”などは,ブラウザのスタイルシートが適用された結果と考えられる。これによって,“ブラウザのデフォルトスタイル”はスタイルシートと同列に扱うことができる。

 ここで,“ブラウザのスタイルシート”には,“こうでなければならない”というものはない。HTML に関して,“P 要素は前後に空行を伴ったブロックとして出力される”という主張は,そのように出力されるブラウザが何であるかを言わない限り,意味を持たないのである。

カスケーディングの原則

 カスケーディングは,“要素に適用された宣言の強さを決めるしくみ”であると述べた。では,この“強さ”はどのように決められるのであろうか。

 この決め方は,子細にわたって定められているが,細かい論議はあとでじっくりするとして,ここではそのアウトラインを知っていただこう。

 カスケーディングの大原則は,つぎの 3 つであると言える。ある要素に対して一致したセレクタを持つルールセット中のすべての宣言について,

  • ブラウザのスタイルシートのものよりも読者のスタイルシートのもののほうが強く,筆者のスタイルシートのものはそれよりも強い。
  • 宣言に対応するセレクタによる“絞り込み”が強いほど,すなわち,特殊性の高いセレクタをもつルールセット中の宣言ほど強い。
  • 最後まで強さがつけられないときは,後に書かれた宣言ほど強い。

ということができる。

 ここで,セレクタによる“絞り込み”の強さは,およそ次の順序である。

  1. ID セレクタ
  2. クラスセレクタ
  3. 下位要素セレクタ子要素セレクタなど

ちなみに,セレクタを伴わない,STYLE 属性を用いる方法は,ID セレクタ程度の“絞り込み”をされているとみなす。

 これらから,応用上,すぐにわかることは,

  • 下位要素セレクタは,要素名がたくさん並んでいるものほど強い。
  • クラスセレクタを伴うものは,そうでないものより強い。

の 2 点である。たとえば,それぞれ PP.heavy というセレクタをもつ 2 つのルールセットを考えたとき,CLASS 属性に heavy を含む P 要素にはいずれのルールセットも適用されうる。だが,2 つのルールセットに同じプロパティに対する宣言が現れたら,P.heavy のルールセット中のものが使われる。例を挙げると,

P { font-style: iltaic; line-height: 1.5; }
P.heavy { font-style: normal; font-weight: bold; }

とあったとき,重複している font-style プロパティへの宣言は,後者のルールセットのものが“強い”ので,実際に適用される宣言は,

font-style: normal; font-weight: bold; line-height: 1.5;

スタイルシートの段階的適用。

となる。このことから,基本となるスタイルを宣言するルールセット(ここでは P)を 1 つ用意し,付加的なスタイルを宣言するルールセット(ここでは P.heavy;このほかに P.light といったセレクタのルールセットも考えられよう)を用意して,階層的に設計し段階的な適用ができるということが考えられ,そのときに,“付加的なスタイル”は“基本となるスタイル”を,カスケーディングによっていつでも上書きできる。

 カスケーディングについては,ここではこれ以上のことに触れるのは避ける。詳細はのちほど解説する。■