CSS-カスケーディングの意味-

写真:http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:SumaRikyu_Cascade.jpg

普段CSSって言葉をWEBデザイナーの方や制作者の方々は使うと思います。カスケーディング(カスケード)・スタイルシート(CSS)を略したいいかたです。
一般的にはスタイルシートとかCSSっていいますが、その意味についての事です。

スタイルシートって聞いてイメージすること

スタイルシートと聞けば、スタイル(装飾)をするシート(ファイル)などと頭の中でイメージが湧くと思います。ではカスケーディングってなんでしょう?

カスケーディングって何?

CSSを使う上ではこの言葉は重要です。知らないで使っている人もいると思います。実際にどんな説明が多いか見てみましょう

CSS では一つの HTMLに対して複数のスタイルシートを使えます。そして、複数のスタイルシートを結合するプロセスのことを「カスケーディング」と呼びます。

引用元:http://d.hatena.ne.jp/amachang/20080407/1207594307

ユーザーエージェント(多くの場合ウェブブラウザ)、ウェブサイト制作者、ユーザがそれぞれ定義した CSS のもたらす効果を重ね合わせる(カスケードする)ことができる

引用元:http://ja.wikipedia.org/wiki/Cascading_Style_Sheets

なんかしっくりこないというかわかりづらいです。
僕自身調べていて上記の説明を見ても言っていることはわかるけども納得できるものではなかったです。ある書籍を読んでいたらこんな事が書いてありました。

カスケーディングとは、要素に対する複数のスタイルの指定から選択する仕組みのことをいう。

なるほど。って思いました。CSSを書いたことある人はこの文をみればあーなるほどねって思うかとおもいます。

p{
color:red;
}

p{
color:bule;
}

<p>に対する『赤』と『青』という二つのスタイルの指定から、『青』の指定が選択され、文字色は『青』になります。カスケーティングでは次の3つのルールによって選択するスタイルが導き出されます。

ルール1・スタイルシートの優先度

CSSには優先度があり、優先度の高いスタイルの内容がカスケーディングにより選択されます。優先度は以下のようになります。(上から順に優先度が高い)

  1. !important 宣言がされたユーザースタイルシート
  2. !important 宣言がされた制作者スタイルシート
  3. 制作者スタイルシート
  4. ユーザースタイルシート
  5. ブラウザのデフォルトスタイルシート

p{
color:red!important;
}

!important 宣言による優先度の底上げ

!important 宣言は詳細度や並び順などのカスケーティングのルールを無視して、強制的に選択させることができる。
便利に思えるでしょうがこの方法を使うと他のカスケーティングのルールを使用してスタイルの上書きすることができないというデメリットがります。

ルール2・セレクタによる詳細度

スタイルシートの優先度が同じ場合、詳細度の高いスタイルが選択される。詳細度が最も高いCSSはstyle属性に記述されたスタイルになります。

style属性以外に記述されているスタイルでは、セレクタに含まれる特定セレクタ数により詳細度が決まる。セレクタで詳細度が最も高いのはIDセレクタの数が多いセレクタになります。

IDセレクタの数が多いセレクタでの指定が採用される
#bar p#foo{
color:red;
}

p#foo{
color:bule;
}

セレクタに含まれるIDの数が同じ場合は、クラスセレクタ、属性セレクタ、疑似クラスセレクタの数により詳細度がきまる↓

IDセレクタの数が同じ場合は、クラスセレクタの数が多い方が採用される。
.bar p#foo{
color:red;
}

p#foo{
color:bule;
}

IDセレクタ、クラスセレクタ、属性セレクタ、疑似クラスセレクタの数が同じ場合は、要素セレクタの数が多いセレクタが優先される↓

p#foo{
color:red;
}

#foo{
color:bule;
}

ルール3・プロパティの並び順

スタイルシートの優先度とセレクタの詳細度が等しい場合、後に書いた記述が採用されます↓

p{
color:red;
}

p{
color:bule;
}
後に書いた記述が採用される

まとめ

カスケーティングでは、優先度、詳細度、並び順の3つのルールから要素に適用するスタイルが算出されます。実際にコーディングしているとこれらを意識しなくてはいけない局面がでることが全くないとは言えないと思います。

コーディングルールやコーディング規約を作成して、カスケーティングを意識せずにCSS設計できると望ましいですよね。頑張っていきたいですね。経験しかこういうのはないと思います。

個人支援・寄付について

サイトラボでは個人支援・寄付を受けております。ご協力いただける方はお願いいたします。当サイトではビットコインで受け付けております。

  • ビットコイン:3LHnADwZwUbic2L45EnVJEykiG6KfbqrwS