ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

ホームページ制作を始めて間もない人が知っておくと役立つCSSの基本的なルールについて

| カテゴリー : HTML/CSS

こんにちは、福岡のちゃんけいです。

今回はタイトル通り、初心者向けにCSSの大切なルールについて書いていきたいと思います。

今回紹介するのはこちら

  • セレクタってなに?idとclassの違いって何?
  • 詳細度ってなに? どのCSSがサイトに表示されるの?
  • CSSのルールをおさらい

HTMLやCSSでidとclassを一度書いたことのある人なら、きっと理解できる内容になっていますので是非読んでください。

セレクタってなに?idとclassの違いって何?

HTMLやCSSを学ぶときによく聞く「〜セレクタ」って何のことを意味しているか分かりますか?
セレクタとは、CSSを適用する対象を選ぶという意味を込めて付けられます。

idなら、idセレクタとかclassならクラスセレクタなんてカッコよく呼びます。

id

idは、原則として1ページに1箇所しか使いません。同じ名前のidを1ページに何度も書かないようにしましょう。

もし、同じ場所にidとクラスが書かれていた場合どちらがサイトに表示されるか分かりますか?

答えは……、idセレクタです!!

クラスセレクタよりも、idセレクタが優先される、これがCSSのルールの1つです。

class

classは、1ページに何箇所も何回でも使える便利なやつ。

何箇所も何回でも使えるので、下記のように書いた場合でも同じクラスを使い回すことができます。

違う要素に対しても、異なる場所でも、同じスタイルを設定できる便利なやつですね。

1つの要素に複数のクラスをつけることもできます。
実際に同じ場所に複数のクラスをつけると、どのCSSが適用されるのでしょうか?

この場合は、.txt02のスタイルでサイトに表示されます。

同じセレクタ同士の場合は、CSSファイルの下に書かれた方が優先されます。

他にも要素セレクタというものがあり

HTML要素を直接指定してCSSを書く方法です。

今回紹介したidセレクタ、classセレクタよりもっと詳細度が低い指定方法です。

CSSで使うセレクタは他にもたくさんありますが、今回はidセレクタとclassセレクタに絞って説明していきます。もっと詳しく知りたい方は次のページが参考になります。

詳細度ってなに? どのCSSがサイトに表示されるの?

idとclass、サイトに表示される際にどちらが優先されるCSSの記述か理解できましたか?

なぜidの方がclassよりも優先されるか、それはCSSのルールの1つで詳細度というものが決まっているからです。

idとclassの詳細度を比較したとき、

といった感じになっています。

より詳細度が高いものが優先して適用されるので、idで設定したCSSが表示されるのですね。

では、先ほども例として出てきた、同じ場所にclassが2つある場合はどうなのでしょうか?

となっており詳細度が全く同じになっています。なので詳細度で決めることができません…。

この場合は「CSSファイルの下に書いた方を優先してサイトに表示しましょう」というのがCSSのルールになっています。

では、下記のCSSの場合はどちらが優先されるでしょうか?

いきなり難しくなりましたね…。

今回はクラスセレクタしかありませんので今まで通りに行くと、CSSファイル内で、より下に記述されているcolor: redのCSSが適用されることになります。

しかし、今までと違うことが1つあります。それはCSSのセレクタ部分にクラスが何個も書かれている、ということです。

この場合は、

.wrapperの中の.list01の中の.item01

.wrapperの中の.list01

の詳細度を競うことになります。この、「〜の中の」という考え方がとても大切になってきます。

では説明のために「クラスセレクタの詳細度 = 1」として、「〜の中の」がある分だけ詳細度を足し合わせてみます。

全て足し算した値が高いほど詳細度が高いとしましょう。すると、

結果がわかりましたね、今回は詳細度が3である方のCSSがサイトに表示されることになります。

ただし、これはセレクタの詳細度が同じ場合にしか使えません。

もし競合するCSSで、idセレクタがどちらかにあった場合は、idセレクタのあるCSSが優先して適用されます。これはidとclassの詳細度を比べたときに、idのほうが詳細度が高いからです。

どちらにもidセレクタがある場合は、今回のようにそのidセレクタの中に存在するセレクタ(classセレクタや要素セレクタなど)同士で詳細度を競うことになります。

CSSのルールをおさらい

競合するCSSがあった場合に、どのCSSが優先されるかを決めるルールというものがあり、それが下記の3つになります。
適用される優先度も1番からになります。

  1. 詳細度が高いものから優先される
  2. 詳細度が同じ場合は、セレクタの数によって優先度が変わる
  3. 詳細度も優先順位も同じ場合は、後に書かれた方が適用される

今回書いた内容は、この3つに沿って書きました。

いかがでしたでしょうか?

私自身もWebデザインを学び始めて、コーディングしだした時にCSSに悩んだことがあったのでまとめてみました。

今ホームページ制作の勉強を始めて間もない方、コーディングを始めて間もない方のためになればと思います。

それでは、次回の記事で。ちゃんけいでした。

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。