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 つのスタイルシート”について触れておこう。
スタイルシートは,その文書の筆者のみが提供するものではない。文書の読者も,“自分用”のスタイルシートを用意し,文書に作用させることができる(Internet Explorer 4.0/5.x/6 のユーザにおかれては,オプションの“ユーザー補助”の項から“ユーザースタイルシート”の指定ができることが確認できよう)。読者は,これにより自分の出力させる文書に任意のデザインを施すことが可能である。
もうひとつは,“ブラウザのスタイルシート”である。これは実際にルールセットの集合として存在するとは限らないが,カスケーディングなどを考えるときにひじょうに都合がよい。考えてもみれば,これがどんな形であれ,存在しなかったら,筆者または読者がスタイルシートを適用させない限り,すべてのプロパティは初期値か,それが継承されたものかになってしまう。極端な話,HTML は単にタグが取り除かれて出力されるだけである。したがって,“P
要素は前後に空行を伴ったブロックとして出力される”,“BLOCKQUOTE
要素は両インデントで出力される”などは,ブラウザのスタイルシートが適用された結果と考えられる。これによって,“ブラウザのデフォルトスタイル”はスタイルシートと同列に扱うことができる。
ここで,“ブラウザのスタイルシート”には,“こうでなければならない”というものはない。HTML に関して,“P
要素は前後に空行を伴ったブロックとして出力される”という主張は,そのように出力されるブラウザが何であるかを言わない限り,意味を持たないのである。
カスケーディングは,“要素に適用された宣言の強さを決めるしくみ”であると述べた。では,この“強さ”はどのように決められるのであろうか。
この決め方は,子細にわたって定められているが,細かい論議はあとでじっくりするとして,ここではそのアウトラインを知っていただこう。
カスケーディングの大原則は,つぎの 3 つであると言える。ある要素に対して一致したセレクタを持つルールセット中のすべての宣言について,
ということができる。
ここで,セレクタによる“絞り込み”の強さは,およそ次の順序である。
ちなみに,セレクタを伴わない,STYLE
属性を用いる方法は,ID セレクタ程度の“絞り込み”をされているとみなす。
これらから,応用上,すぐにわかることは,
の 2 点である。たとえば,それぞれ P
,P.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
といったセレクタのルールセットも考えられよう)を用意して,階層的に設計し段階的な適用ができるということが考えられ,そのときに,“付加的なスタイル”は“基本となるスタイル”を,カスケーディングによっていつでも上書きできる。
カスケーディングについては,ここではこれ以上のことに触れるのは避ける。詳細はのちほど解説する。■