SITEMAP [初めてのホームページ講座] [CSS] [CSS1] [カスケード処理]

CSS1 Reference

カスケード処理

1. カスケードとは？

CSSは複数のスタイルを指定可能で、これにより以下のことが特徴として挙げられます。

しかし、複数のスタイルを指定するとどうしても競合が発生します。 この時にその競合を回避するためのルールが必要で、そのルールをカスケード処理といいます。 このカスケード処理では、HTML文書作成者とユーザー、ブラウザ間の優先度の付け方、またそれぞれの処理の仕方などを取り決めています。

カスケード処理の順序

ちなみに、将来的にはブラウザの整形やユーザーによるスタイル指定などが可能になるでしょう。 これにより、ユーザーは自分の好みのスタイルを他人のWebに適用可能で、例えば文字が小さく感じれば大きく指定したり、 行間が狭ければ広くしたりということが可能になります。 尤も、ブラウザの早急なCSSへの対応とその機能の拡張が無ければ意味がありませんが。

[Go To Top]

2. 最重要指定

HTML文書作成者やユーザーは、指定したスタイルに対して重要度を指定できます。 その記述は下記のように指定し、それぞれの優先度は次のようになります。

  1. HTML文書作成者の最重要指定
  2. ユーザーの最重要指定
  3. HTML文書作成者の通常指定（インポートしたスタイルも含むが優先する）
  4. ユーザーの通常指定
  5. ブラウザの指定 
H1 { color : blue ! important }   /*H1要素のフォントカラー青を最重要指定*/
H2 { color : black }              /*H2要素のフォントカラー黒を通常指定*/
[Go To Top]

3. カスケード処理の順序

スタイル同士が競合する場合、その処理の優先度などの問題もありますが、それだけでは回避できない場合もあります。 例えば、グループ化やクラスセレクタなどが緻密に設定されている場合などがそうです。 この状態に対処するために、ブラウザは次のようなアルゴリズムで処理しなければならないとされています。

実際にCSSを設計するに当たって、優先度や継承性、詳細度などを考慮に入れるべきと考えます。 つまり、あるスタイルはどの程度優先させたいのか、重要なのか、或いはユーザー任せでも良いのかなどを予め考慮する必要があります。

  1. セレクタ(H1 EM 等)に該当する要素(EM 等)とプロパティ(color 等)に適用される宣言(color:blue 等)を全て検索
  2. 適用される宣言が存在しない場合は継承値を適用
  3. 継承値も存在しない場合は初期値を適用
  4. 明らかな優先度に基づいて優先度の高い順に宣言をソート（最重要指定など）
  5. 出所に基づいてソート（HTML文書作成者、ユーザー、ブラウザの順）
  6. セレクタの詳細度に基づいて詳細度の高い順にソート
  7. 指定順序に基づいてソート（同一の優先度であれば、後の指定の方が優先：継承性）

ここで詳細度とは、IDセレクタの数（これをA）、 クラスセレクタの数（これをB）、要素名の数（これをC）をそれぞれカウントし、その全てを十分大きな基数による記進法で数え、最も大きなものから詳細度が高いものとするものです。 言葉では分かりにくいでしょうが、下記の例を直感的に理解できれば問題ありません。 

LI             {}/* A=0 B=0 C=1 : 詳細度 =   1 */
UL LI          {}/* A=0 B=0 C=2 : 詳細度 =   2 */
UL UL LI       {}/* A=0 B=0 C=3 : 詳細度 =   3 */
LI.class       {}/* A=0 B=1 C=1 : 詳細度 =  11 */
UL LI.class    {}/* A=0 B=1 C=2 : 詳細度 =  12 */
#id            {}/* A=1 B=0 C=0 : 詳細度 = 100 */
UL LI#id       {}/* A=1 B=0 C=2 : 詳細度 = 102 */
[Go To Top]
Copyright(C)1999 Miyazaki , All Rights Reserved.