今更聞けないCSSの基本【継承編】

Pocket
[`evernote` not found]

ちょっと思うことがあって、基礎に立ち返ってCSSの基本的なことをまとめたいと思います。
できるだけ、普段使っているCSSの知識を自分の言葉で書きますが、これまで勉強してきたなかで読んだ参考本とかwebサイトの情報に類似している場合があるかもしれません。ご指摘いただければ修正しますので、よろしくお願いします。

はじめに

そもそもなんでこんな事を書こうと思ったかというと
ネタがないから
ではなくて、web制作をしている上で、CSSは必須な項目ですが、他の言語(CSSを言語と表現していいかはわかりませんが)と比べて、学習コストが低い分、誰でもできてしまって結果的に制作物がカオスに・・・という場面を多くみてきたからです。(もちろん、自分も含めて)
「ゴニョゴニョ適当に書いたらそれなりに表示されたからいいや」ってのがすごく多いです。
でも、それじゃいけません。
ちょうど、近いうちにこの辺の話を社内でしなきゃいけなくなりそうなので、自分用にまとめておこうと思ったわけです。

というわけで、数回に分けて、CSSの基礎的なことをまとめて見たいと思います。
(シリーズ物苦手なんで、途中でやめちゃうかもしれないけど)

継承について

いきなり堅い話ですが・・・CSSを語る上で一番重要なことです。
これをしっかり理解できてから、「なんでスタイルが効かないんだよ」ってのが、大幅に減りました。つまりは、余計なことを考えずに、スラスラと書けるようになって、それは時間コスト削減にもつながる。それくらい、大切な事だと思います。

CSSはCascading Style Sheetsの略だというのはご存知だと思いますが、このCascading(つまり上段から流れる瀧のようなもの)が継承という意味になります。CSSでは親要素からスタイル情報を受け継いで表示されます。

例)

<html>
<body>
 <p>ホゲ</p>
</body>
</html>
body {
 color:red;
}

DEMO

pタグには何もスタイルがついていないですが、文字は赤く表示されます。
それは、上部階層であるbodyにスタイルがついているからです。

では、次のような場合はどうなるでしょうか?

body {
 color:red;
}
p{
 color:blue;
}
<html>
<body>
 <p>ホゲ</p>
</body>
</html>

DEMO

この場合、後から記述したスタイルが優先されますので、文字は青くなります。
ただし、何でも後から書けばいいかというとそうゆうわけではなく、セレクタの固有性に基いた計算によって適用されるスタイルが決まります。

具体的にいうと、セレクタにはそれぞれ優先順位を計算するための数値が設定されていて、その合計値が大きいセレクタの指定が最優先されるということです。

優先順位を計算するための数値
1.セレクタに含まれる要素・疑似要素1つを1とする
2.セレクタに含まれる属性・疑似クラス1つを10とする
3.セレクタに含まれるid属性1つを100とする
4.style属性による指定があれば1000とする

例えば

p#hoge {
 color:red;
}
p {
 color:blue;
}

この場合、
p#hoge=[要素属性(1)+id属性(100)]= 101
p =[要素属性(1)]=1
となりますので、たとえ

p {
 color:blue;
}

を最後に書いても、セレクタの固有性の計算結果の数値が大きい「p#hoge」のスタイルが適用されます。

DEMO

また、「どこ」に書いてあるかという事も重要な要素になってきます。

スタイル記述場所による優先順位

スタイルを書くことができる場所は、
・外部スタイル
・headタグ内(styleタグ内)
・要素に直接(style属性)
とありますが、

要素に直接>headタグ内>外部スタイル

という順で優先されます。

デモでは、外部スタイル(黄)、styleタグ(青)、style属性(赤)と文字色を指定しています。当然、style属性が優先されるので、文字は赤くなります。
DEMO

ここで、注意しなければならないのが、style属性は別として、セレクタをかなり上の要素から記述すると、それだけ優先度が高くなるから、安心じゃね?ってのは危険ですということです。
#hoge ul#menu li.menuItem01 a
みたいな指定をすれば、確かに確実に絞り込めます。
しかし、メンテナンス性はどうなりますか?ulの場所が変わってしまったら、cssの記述も書き換えなければなりません。そういった先を見越した設計が必要じゃないかと思います。

まとめ

基本的にcssは上から順番に実行されるので、下の方に書かれたスタイルが優先される。
ただし、セレクタの固有性によって優先性が増す。
そのルールをきちんと押さえておけば、スマートなcssの記述ができるようになる思う。

いわゆるポップ本、これかなり勉強になります。社内の勉強用にも使っています。はい。

Follow me!

Pocket
[`evernote` not found]

カテゴリーcss

コメントは受け付けていません。