CSS実践編：CSSの基本step.5
前回は、HTMLにCSSを適用する3種類の方法をご説明いたしました。
私が思うに、外部化したスタイルシートを一枚でコメントアウトを上手く使い、
どこの部分がどこに適用されているか？
ひと目で分かるようにしてあると、後々、クリティカルCSSの記載や、
ピンポイントでの手直しなども、行いやすいかと思います。
それでは今回はッ、
・セレクタの詳細度
・CSSの読み込み順序
上記について、記載していきます…。
セレクタはさまざまな組み合わせが可能で、1つの適用先に対して
異なる書き方が可能です。
同じ要素に対して複数のスタイルが指定されている場合、
セレクタの書き方やスタイルの記述順によって、
どの指定が適用されるかが決まります。
Web作成の現場では「指定しているのに反映されない！」と
いったトラブルが少なからず発生しますが、
そのようなときにも対応できるよう、スタイルの優先度を
決定するルールを記載していきます。
セレクタの詳細度
適用対象の要素が、より詳しく細かく指定されているスタイルのほうが優先される！
というルールがあります。
すべての要素に対応するユニバーサルセレクタと、
ページ内にひとつしかない名前で要素を指定できるidセレクタを
比較すると、idセレクタのほうが圧倒的に詳しく指定されていることになります。
そのため、ユニバーサルセレクタで指定されたスタイルとidセレクタで
指定されたスタイルが並んでいる場合、idセレクタで指定したスタイルが優先されます。
また、他の要素も含めおおまかに説明すると、
セレクタを使用せずHTMLのタグに直接埋め込むstyle属性が最も優先度が高く、
次はidセレクタの個数が多いもの、属性関連セレクタの個数が多いもの、
要素名の個数が多いものといった順になります。
＜セレクタの優先順位＞
| セレクタ | 優先度の数値（大きい方が優先度が高） |
|---|---|
| なし（style=”～”） | 1000 |
| #content #main | 0200 |
| div#header | 0101 |
| #header | 0100 |
| div.header | 0011 |
| a:link | 0011 |
| .header | 0010 |
| p a | 0002 |
| a | 0001 |
| h1 | 0001 |
| * | 0000 |
CSSの読み込み順序
もう一つのルールは、後から読み込まれたスタイルのほうが優先されます。
CSSファイルは上から下に向かって読み込まれるため、
ファイルの下のほうに記述されているほど優先されます。
セレクタの詳細度に差がない場合は、スタイルの読み込まれる
順序によってどの指定が適用されるかが決まります。
＜適用例＞
<!DOCTYPE html>
<html>
<head>
<style>
p {color: blue;}
p {color: green;}
p {color: red;}
</style>
<meta charset="utf-8">
<title>スタイルの読み込み順</title>
</head>
<body>
<p>このテキストのスタイルは「赤」が適用されます。</p>
</body>
</html>
今回は、CSS適用の優先ルールを大まかにご説明いたしましたが、
実際のお仕事の現場でのCSSを記載するコツは、
リセットCSS、html要素body要素などのCSSを記載後、
sectionごとに大きなブロックに分け、そこで共通のCSSを記載後、
後はhtmlの上から順に、出来るだけシンプルなセレクタでスタイルをおこなっていきます。
初めから、セレクタの優先度が高いものは使わず、
重複箇所が出てきたら、ひとつづつ優先度を上げていくように記載すると、
比較的シンプルで、分かり易いスタイルシートが記載できるかと思います。
ただでさえ複雑なスタイルシート、
出来る限りシンプルで短いソースコードで記載することが、
ページの表示速度や、メンテナンス性に優れたCSSになる事と思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
