こんにちは、福岡のちゃんけいです。
今回はタイトル通り、初心者向けにCSSの大切なルールについて書いていきたいと思います。
今回紹介するのはこちら
- セレクタってなに？idとclassの違いって何？
- 詳細度ってなに? どのCSSがサイトに表示されるの？
- CSSのルールをおさらい
HTMLやCSSでidとclassを一度書いたことのある人なら、きっと理解できる内容になっていますので是非読んでください。
セレクタってなに？idとclassの違いって何？
HTMLやCSSを学ぶときによく聞く「〜セレクタ」って何のことを意味しているか分かりますか？
セレクタとは、CSSを適用する対象を選ぶという意味を込めて付けられます。
idなら、idセレクタとかclassならクラスセレクタなんてカッコよく呼びます。
id
idは、原則として1ページに1箇所しか使いません。
同じ名前のidを1ページに何度も書かないようにしましょう。
もし、同じ場所にidとクラスが書かれていた場合どちらがサイトに表示されるか分かりますか？
1 | <p id="txt01" class="txt02"><a href="#">テキストがここにあります</a></p> |
1 2 3 4 5 6 | #txt01{ color: green; } .txt02{ color: red; } |
答えは……、idセレクタです！！
クラスセレクタよりも、idセレクタが優先される、これがCSSのルールの1つです。
class
classは、1ページに何箇所も何回でも使える便利なやつ。
何箇所も何回でも使えるので、下記のように書いた場合でも同じクラスを使い回すことができます。
1 2 3 4 5 6 7 8 | <p class="txt01"><a href="#">テキストがここにあります</a></p> <div class="wrapper"> <ul class="list01"> <li class="txt01"><a href="#">リンク</a></li> <li class="txt01"><a href="#">リンク</a></li> <li class="txt01"><a href="#">リンク</a></li> </ul> </div> |
1 2 3 | .txt01{ color: green; } |
違う要素に対しても、異なる場所でも、同じスタイルを設定できる便利なやつですね。
1つの要素に複数のクラスをつけることもできます。
実際に同じ場所に複数のクラスをつけると、どのCSSが適用されるのでしょうか？
1 | <p class="txt01 txt02"><a href="#">テキストがここにあります</a></p> |
1 2 3 4 5 6 | .txt01{ color: green; } .txt02{ color: red; } |
この場合は、.txt02のスタイルでサイトに表示されます。
同じセレクタ同士の場合は、CSSファイルの下に書かれた方が優先されます。
他にも要素セレクタというものがあり
1 2 3 | p { color: red; } |
HTML要素を直接指定してCSSを書く方法です。
今回紹介したidセレクタ、classセレクタよりもっと詳細度が低い指定方法です。
CSSで使うセレクタは他にもたくさんありますが、今回はidセレクタとclassセレクタに絞って説明していきます。
もっと詳しく知りたい方は次のページが参考になります。
詳細度ってなに? どのCSSがサイトに表示されるの？
idとclass、サイトに表示される際にどちらが優先されるCSSの記述か理解できましたか？
なぜidの方がclassよりも優先されるか、それはCSSのルールの1つで詳細度というものが決まっているからです。
idとclassの詳細度を比較したとき、
1 | class < id |
といった感じになっています。
より詳細度が高いものが優先して適用されるので、idで設定したCSSが表示されるのですね。
では、先ほども例として出てきた、同じ場所にclassが2つある場合はどうなのでしょうか？
1 | .txt01 = .txt02 |
となっており詳細度が全く同じになっています。
なので詳細度で決めることができません…。
この場合は「CSSファイルの下に書いた方を優先してサイトに表示しましょう」というのがCSSのルールになっています。
では、下記のCSSの場合はどちらが優先されるでしょうか？
1 2 3 4 5 6 7 | <div class="wrapper"> <ul class="list01"> <li class="item01"><a href="#">リンク</a></li> <li class="item01"><a href="#">リンク</a></li> <li class="item01"><a href="#">リンク</a></li> </ul> </div> |
1 2 3 4 5 6 | .wrapper .list01 .item01{ color: green; } .wrapper .list01{ color: red; } |
いきなり難しくなりましたね…。
今回はクラスセレクタしかありませんので今まで通りに行くと、CSSファイル内で、より下に記述されているcolor: redのCSSが適用されることになります。
しかし、今までと違うことが1つあります。
それはCSSのセレクタ部分にクラスが何個も書かれている、ということです。
この場合は、 .wrapperの中の.list01の中の.item01 と .wrapperの中の.list01 の詳細度を競うことになります。
この、「〜の中の」という考え方がとても大切になってきます。
では説明のために「クラスセレクタの詳細度 = 1」として、「〜の中の」がある分だけ詳細度を足し合わせてみます。
全て足し算した値が高いほど詳細度が高いとしましょう。
すると、
1 2 3 4 | .wrapperの中の.list01の中の.item01 1+1+1 = 3 .wrapperの中の.list01 1+1 = 2 |
結果がわかりましたね、今回は詳細度が3である方のCSSがサイトに表示されることになります。
ただし、これはセレクタの詳細度が同じ場合にしか使えません。
もし競合するCSSで、idセレクタがどちらかにあった場合は、idセレクタのあるCSSが優先して適用されます。
これはidとclassの詳細度を比べたときに、idのほうが詳細度が高いからです。
どちらにもidセレクタがある場合は、今回のようにそのidセレクタの中に存在するセレクタ（classセレクタや要素セレクタなど）同士で詳細度を競うことになります。
CSSのルールをおさらい
競合するCSSがあった場合に、どのCSSが優先されるかを決めるルールというものがあり、それが下記の3つになります。
適用される優先度も1番からになります。
- 詳細度が高いものから優先される
- 詳細度が同じ場合は、セレクタの数によって優先度が変わる
- 詳細度も優先順位も同じ場合は、後に書かれた方が適用される
今回書いた内容は、この3つに沿って書きました。
いかがでしたでしょうか？
私自身もWebデザインを学び始めて、コーディングしだした時にCSSに悩んだことがあったのでまとめてみました。
今ホームページ制作の勉強を始めて間もない方、コーディングを始めて間もない方のためになればと思います。
それでは、次回の記事で。ちゃんけいでした。
福岡市の中小企業様向けのホームページ制作を得意としております。
