こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
前回【初めてのHTML/CSS】CSS（スタイルシート）の基本の書き方と「id/class」についてをご紹介しましたが、今回は実際にCSSを書いた時の優先順位についてご紹介します！
こんなお悩みありませんか？
・CSSを書いてみたけれども、反映されない…
・CSSが反映される優先順位を知りたい！
CSS（スタイルシート）の優先順位を覚えておこう！
CSSをちゃんと書いているはずなのに、意図したスタイルにならない多くの原因は、CSSの優先順位にあります。あらかじめ読み込まれるルールを覚えておきましょう！
1.CSSを書く順位
まずはじめに、CSSは「一番最後（下）に書いたものが優先される」と覚えましょう。
ブラウザはHTMLやCSSを上から順番に読み込んでいくので、基本的に後から読み込んだスタイルを最優先して適用させる特徴があります。
▼CSS例
|
1 2 |
p {color:red;} p {color:blue;} |
→例えば、このように同じ pタグに文字色が設定された場合は、下に書かれている color:blue（青）の指定が適用されます！
2.セレクタ指定の優先順位
次に、セレクタの優先順位です。
セレクタに指定するid名・class名・要素名の3つの中では、id名が一番優先順位が高く設定されています。
ここでは、例として、divタグにid「wrap」とclass「section」という名前をつけて違う文字色を指定してみます。
▼HTML例
|
1 2 3 |
<div id="wrap" class="section"> <p>ああああ</p> </div> |
▼CSS例
|
1 2 3 |
#wrap {color:red;} .section {color:blue;} div {color:green;} |
→このように同じ divタグに別々の文字色が設定された場合は、一番優先度が高い idで書かれている color:red（赤）の指定が適用されます！
・おさらいになりますが、idはサイトをレイアウトするためのdivタグなど、ページ内で1回しか出てこない部分を指定するときに使います。classは何回でも使えます。
更に、もう少し細かくみてみましょう。
要素を特定すると優先順位が高くなります。
→かんたんに言うと、より細かく指定しているセレクタが優先されます！
・他にもスタイルの指定方法はいくつかありますが、あらかじめ基本的な優先順位をおさえておきましょう。
【おまけ】
優先度は理解できたけど、どのCSSが適用されているか分からなくなってしまった…。
そんな時は、ブラウザ上で「F12」キーをクリックしてみてください。
適用されているCSSをデベロッパーツールで、かんたんに確認することができます！
デベロッパーツールについては、関連記事：どの要素にどのCSSが適用されているの？ブラウザ上でカンタンに確認する方法をご参考ください。
いかがでしたでしょうか。
まずは「CSSを書く順位」と「セレクタ指定の優先順位」を覚えてデザインしましょう。
そして困ったときは「F12」キーに助けてもらいましょう。
それではまた！
