前回は、HTMLにCSSを適用する3種類の方法をご説明いたしました。
私が思うに、外部化したスタイルシートを一枚でコメントアウトを上手く使い、どこの部分がどこに適用されているか？
ひと目で分かるようにしてあると、後々、クリティカル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ファイルは上から下に向かって読み込まれるため、ファイルの下のほうに記述されているほど優先されます。
セレクタの詳細度に差がない場合は、スタイルの読み込まれる順序によってどの指定が適用されるかが決まります。
<!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になる事と思います。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
