Webデザイン
 

CSSのスタイルが適用されない!? CSSの適用条件と優先順位について

       

WEBアプリやホームページ作成をしているときに「CSSに記載したスタイルが効かない??」なんてことはありませんか??

CSSは基本的に後に書いたものが優先されるので、追加したいスタイルをどんどん後に追加していけばいいと思っている方もいるかもしれません。
ですが、実は後に書いても適用されない場合も存在するのです!
「私はこんな感じでスタイルを適用したいのに!」って気持ちが強すぎていきなり「!important」は使わないでくださいね^^;
importantを使い始めるとそれ以降に追加したくなった場合、importantの応酬が始まり最終的に何がどう適用されているのかわかりにくいCSSになってしまう可能性があります。
あくまでもimportantは最終手段として使用するということを忘れないでください…(小声)

CSSの適用条件は獲得ポイント数により決まる!

「じゃあどうすれば思った通りに適用されてくれるの?」ってところなんですが、実はCSSには獲得ポイント数により優先順位が決められています。
下記の表に優先順位をまとめてみました。

指定方法 ポイント数
行-1 A-1 B-1
id #sample 100ポイント
class .sample 10ポイント
要素名 p 1ポイント
全称セレクタ * 0ポイント

サンプルをもとに適用されるスタイルを確認してみましょう

下記のCSSを適用した場合、pタグのテキストは何色になるでしょうか?

css_sample.html


<div id="contents">
<p class="text" style="color: darkorange;">色が変わるよ</p>
</div>

css_sample.css


#contents p{
color: red;
}
.first p{
color: blue;
}
.text{
color: green;
}
p{
color: yellow;
}

答えはdarkorangeです。
表を見てわかる通りタグの要素に記載したスタイルは1000ポイントなのでかなり強力な優先順位を与えられています。
タグの要素を消した場合は「css_sample.css」に記載したスタイルが上から順に適用されていく形になります。

まとめ

このようにCSSのスタイルは単純に後に記述したほうが適用されるわけではなく、決められた獲得ポイントに従って適用されていますので、思い通りのスタイルが適用されないときは冷静にポイントを見直してみてください。
また、皆様がCSSを記載する際にはなるべくポイント数が低い状態でスタイルを適用することを意識すると後から変更を加える方が少し楽できると思いますので、意識してみて頂ければと思います。

現在はエンジニア、研修講師(副講師メイン)を中心に業務を行っております。
最近は趣味と言えることはあまりしていませんが、休日は友人と出かけていたり、家でテレビを見ながらのんびり過ごしています。

 
  • このエントリーをはてなブックマークに追加