昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。
本日からは正しいCSSについてみていこうと。
CSSとは？
CSSはWebページのレイアウトや装飾のために使用されている言語です。当初は簡単なレイアウトと装飾のみでしたが、現在では複雑で柔軟なレイアウトやシャドウ、グラデーションやアニメーションなども表現可能です。
CSSの書き方
基本的にはスタイルと適用する対象のXMLやHTMLノードをセレクタで指定し、プロパティ宣言を記述します。
例
|
1 2 3 |
.text{ color:#444; } |
CSSの挙動
CSSはある要素に指定されているプロパティ宣言が複数存在するとき、宣言の強さの関係から1つの宣言のみが有効になります。CSS書いたのに有効にならない・・・というのはこのルールを正確に理解していないからです。
挙動のルールに関しては後程。
プロパティの詳細
CSSのプロパティはそのスタイルが適用された要素の子要素にもスタイルを引き継ぐプロパティがあります。
HTML
|
1 2 3 4 |
<section> <h1>ここはh1です。</h1> <p>本日は晴天なり</p> </section> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
section{ color:#444; } h1{ font-size:20px; font-weight:bold; margin-bottom:1em; } p{ font-size:14px; } |
上記のようなHTMLとCSSを記述した場合、sectionのcolorプロパティはh1,pにも引き継がれることになります。
また親のプロパティを引き継ぎたい場合は、inheritという書き方自体が存在します。
セレクタ詳細度
次に大事になってくるのがセレクタ詳細度です。これはどのCSSが適用されるかを決めるうえでしっかり理解しておかないといけません。
|
1 2 3 4 5 6 7 8 9 |
section h1{ font-size:24px;; } h1{ font-size:20px; font-weight:bold; margin-bottom:1em; } |
この場合、h1に適用されるのは20pxではなく24pxになります。各セレクタには詳細度という概念が存在し、より詳細度の高いセレクタ内のプロパティが生き残ります。
セレクタの種類
セレクタの種類は下記のようなものがあります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** id="header"を持つ要素に適用される idセレクタ **/ #header{ ・・・・ } /** class="text"を持つ要素に適用される classセレクタ **/ .text{ ・・・・ } /** href属性を持つ要素に適用される 属性セレクタ **/ [href]{ ・・・・・ } /** 特定要素全体に適用されるセレクタ **/ p{ ・・・・ } |
それ以外にもマウスカーソルがその要素の上に乗った時に適用される:hoverなどの疑似クラスセレクタ、子要素や孫要素などを指定する子孫セレクタなども存在します。
セレクタの詳細な種類は下記リンクを参考に。
★スタイルシートリファレンス 要素型セレクタ（タイプセレクタ）
セレクタの優先度
CSSのセレクタには下記のように詳細度を決定します。
- A idセレクタの数
- B classセレクタ、属性セレクタ、疑似クラスセレクタの合計数
- C 要素セレクタ、疑似要素セレクタの合計数
この3つの数字をもとに次の条件で詳細度を計算し、該当するプロパティが適用されます。
- Aの値が大きいほう
- Aが同じ場合は、Bの値が大きいほう
- Bの値が同じときはCの値が大きいほう
- Cの値も同じときはより下に記述されているほう
|
1 2 3 4 5 |
p{} A=0 ,B=0 ,C=1 section h1{} A=0 ,B=0 ,C=2 .button {} A=0 , B=1 ,C=0 button.button {} A=0 , B=1 ,C=1 #header:after{} A=1 , B=0 ,C=1 |
また例外系のルールとして下記のようなものも覚えておきましょう。
- HTMLのタグに書かれた場合は、上記の詳細度を無視して適用される
- !importantを使った上書きはすべてのCSSの中で最優先になる
このような基本を踏まえたうえで次回以降正しいCSSの書き方を学んでいきたいと思います。
参考文献
WEb+DB vol93
