プログラミング初心者の方は、HTMLとCSSをまず学習されることが多いはず。
ある程度勉強しWEBサイトを作っている時、急にCSSが反映されなくなってしまう事ってありませんか？その理由は、CSSの優先度にあるかも知れません！
今回はCSSの優先度と、ついつい使いがちな「!important」について解説していきます。
CSSの優先度とは
CSSには様々な書き方があります。
そして、その書き方によって優先度が決まってしまうという事をご存じでしょうか？
私は過去に、この優先度のせいでCSSをあてたのに要素が思ったような色やサイズにならなかったりと苦労をした事があります。
そうならない為にも、書き方ごとのCSSの優先度はしっかり学んでおきましょう！
例えば
|
1 |
<p>この要素の色を変える</p> |
こんな風なタグがあったとします。
この要素の色を変化させたい場合
|
1 |
<p style="color:yellow">この要素の色を変える</p> |
こうして、直接スタイルを書き込む方法や
|
1 2 3 4 5 |
<style> p { color: yellow; } </style> |
styleタグやstyleシートに要素名を書き込んだり
|
1 2 3 4 5 6 7 8 9 |
<p class="element">この要素の色を変える</p> <style> .element { color: yellow; } </style> |
要素にクラス名を与えてあげて、クラス名を指定してCSSをあててあげる方法など様々な方法がありますね。
状況によって使い分けるって感じでもいいと思いますが、私の経験としては、最低限書き方はごちゃ混ぜにせずに統一するのが基本です。
一番おすすめなのは、クラス名を与えてあげてクラス名指定でCSSを当てる方法です。
とは言え、クラス名を考えるのも大変かと思うので、初心者の間は何かの方法に統一してCSSをあてていくのでいいでしょう。
さて次に、それぞれの優先度を学んでいきましょう。
CSSの優先度一覧
CSSの優先度を表にまとめるとこんな感じになります。
| 名称 | CSSの書き方 | 優先度 |
|---|---|---|
| 全称セレクタ | * { } | 0 |
| タイプセレクタ | p { } | 1 |
| クラスセレクタ | .class名 { } | 10 |
| idセレクタ | #id名 { } | 10 |
| 要素に直接書き込む | style=” “ | 1000 |
| !important宣言 | CSSプロパティ の後ろに !important | 最優先 |
CSSの書き方によって優先度が与えられており、もし同じようなCSSをあてられていた場合、最も優先度の高いものが反映されるようになっています。
また、後ろに書いたCSSほど優先されるようにもなっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> p { color: yellow; } ======100行くらい下===== p { color: red; } </style> |
例えばこんな風に、知らず知らずのうちに重複してCSSをあててしまっていた場合、後で書かれたほうが優先されます。この場合ですとp要素は赤色で表示されるようになります。
最も優先される指定方法「!important」とは
先ほどの表の中に登場しましたが、このCSS優先度の中にはなによりも優先される「 !important 」というモノがあります。
!importantの使い方は、以下のようにCSSプロパティの後ろに記述します。
|
1 2 3 4 5 6 7 |
<style> .element { color: red; !important } </style> |
これで、どのスタイルよりも最も優先されるようになります。
もし複雑なコードになり、「CSSをどのように当てても反映させる事ができない！」なんて状況になった場合でも、!importantならば反映させられるのです。
!importantの注意点
けれど、!importantには注意点もあります。
例えば、チームで開発していた場合他のメンバーがCSSを変更したいと思った時に、「!important」があてられていると変更ができない事があります。
困ったその人は、また!importantをあてて解決しようとします。
こうした事が何度も続き
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style> .element { color: red; !important } ========100行くらい下======= .element { color: blue; !important } ========100行くらい下======= .element { color: yellow; !important } ========100行くらい下======= .element { color: black; !important } </style> |
このような状況になってしまうと、もはや!importantをあてざるを得ない状況になる上、ブラウザにとってどれを優先すべきかわからず混乱させてしまうケースもあります。
まとめ
いかがでしたか？
今回は、CSSの優先度、#importantについて解説させていただきました。初心者のころ、私も優先度を間違えてCSSを反映させるのに苦労したことがあります。
「その頃に理解しておけばすごくスムーズに開発できたな…」と思いながら、今回の記事を書きました。この記事があなたの悩み解決に役立てば幸いです！
