cssの優先順位を簡単にご説明します！
公開日：
css制作の勉強をしている方やサイト制作を独学で始めた方は、一度は「どうだったかなぁ」「cssがうまく効かない」などを考えたり経験したことがあると思います。
また、そういったミスや認識違いによって間違っている個所の記述がわからなく、あれこれ触っていく内に更にわからなくなり、cssが苦手になる方もいらっしゃると思います。そんな方は、簡単に覚えることができるのでご覧ください。
cssの優先順位を理解し、上手く活用しよう
まず、見本のhtmlコードがこちらになります。こちらのコードを参考に解説していきます。
|
1 2 3 4 5 6 7 8 9 10 |
<section class="box"> <h1>見本html</h1> <ul> <li>1番目</li> <li>2番目</li> <li class="text" id="name">3番目</li> <li>4番目</li> <li>5番目</li> </ul> </section> |
上記のようなコードがあるとします。そして、liタグの3番目にフォントのカラーを指定する場合の記載方法ご説明します。
タグ数での優先順位
※下のcssの指定になるにつれて優先順位が上がります
|
1 2 3 |
li { color: #ff0000; } |
|
1 2 3 |
ul li { color: #ff0000; } |
|
1 2 3 |
section ul li { color: #ff0000; } |
上記のようにタグの指定数が多くなれば、少ないタグ指定より優先順位は上がります。
class・idを使った優先順位
※下のcssの指定になるにつれて優先順位が上がります。
|
1 2 3 |
li { color: #ff0000; } |
|
1 2 3 |
.text { color: #ff0000; } |
|
1 2 3 |
#name { color: #ff0000; } |
タグのみ→クラス名→ID名の順番で優先順位が上がります。
!importantが優先順位の中で最上位
※下のcssの指定になるにつれて優先順位が上がります。
|
1 2 3 |
li { color: #ff0000; } |
|
1 2 3 |
li { color: #ff0000 !important; } |
!importantを付けることで、どんな指定方法よりも優先順位は高くなります。
ただ、この指定の仕方はあまり使わないようにサイト制作をしましょう。理由としては、今後の修正やコンテンツの追加をする際に、通常のcssの記述が効かなくなり、!importantを指定したものを再度修正してから作業を行うことになったり、まわりくどい指定の仕方になったりする恐れがあります。
あくまでも、どうしようもない時などにのみ使用することをオススメします。cssの必殺技みたいなものです（笑）
スタイル内での優先順位
|
1 2 3 4 |
li { color: #ffffff; color: #000000; } |
上記の１つのタグに対して同じスタイルを指定している場合は、下に記述しているものが優先されます。この場合は#000000が優先されます。
|
1 2 3 4 5 6 7 |
li { color: #ffffff; } li { color: #000000; } |
こちらの記述も同じで下に記述しているものが優先されます。この場合は#000000が優先されます。
cssの優先順位の応用編
|
1 2 3 4 5 6 7 8 9 10 |
<section class="box"> <h1>見本html</h1> <ul> <li>1番目</li> <li>2番目</li> <li class="text" id="name">3番目</li> <li>4番目</li> <li>5番目</li> </ul> </section> |
こういった記述だと、どう表示するでしょう？
|
1 2 3 4 5 6 7 8 9 |
section ul li { color: #ff0000; font-size: 16px; background-color: #cdd001; } section ul li.text { font-size: 20px; } |
liすべてにフォントの色・サイズ・背景色が適応されます。ただ、クラス名（text）を指定している3番目liタグのみフォントのサイズが20pxに上書きされます。
このように、全体に適応するものと個別に適応するものを上書きすることで、cssに記述するコードを少なくすることができます。
cssは難しくなく！
今までで説明している内容を文字で読むと難しいイメージがありますが、基本的には指定タグの数とclass名・id名の優先順位を理解しておくだけで、ホームページのコーディングが今までよりもスラスラと記述することができ、また修正やコンテンツの追加なども楽にできるようになります。
ぜひ、cssの優先順位を理解し、ホームページ制作をしてみてください！