結論から言うと
CSSが効かないときの原因と確認すべき３つのポイントはこちらです。CSSが効かないときはそれぞれ確認してみましょう。
- ブラウザに対応していない
- 優先順位が低い
- 親要素に依存する
３つのポイント
ブラウザに対応していない
CSSはブラウザによって対応していないものがあります。特にIE(Internet Explorer)に対応していないものが多いので気を付けなければいけません。
CSSが反映されていないときはそのCSSがブラウザに対応しているか確認しましょう。
プロパティごとにどのブラウザに対応しているか確認したい場合は便利なサイト『Can I use』などを使いましょう。
またブラウザごとにCSSを分ける場合はCSSハックを使って記載しましょう。
優先順位が低い
CSSのプロパティには指定するセレクタごとに優先順位が付けられています。すでにあるCSSに自分で上書きしようとして反映されない場合は、自分が書いたCSSより優先順位が高いCSSが設定されている場合があります。
その場合の対策方法として２パターンあります。
!importantを使う
１つは『!important』を使う方法です。これを使うと優先順位を無視して反映されます。しかし、使いすぎると後からCSSを追加するときにメンテナンスが大変になるので、本当に必要なときに使いましょう。
使い方はプロパティの指定する値の後ろに『!important』を付けます。
span {
color: red!important;
}優先順位を上げる
もう一つはセレクタの指定方法を変更して優先順位を上げる方法です。セレクタについてはこちらをご覧ください。
セレクタごとの優先順位は以下のように決まっています。
- HTMLタグのstyle属性の指定
1000点 - IDセレクタ
100点 - classセレクタ
10点 - 属性セレクタ
10点 - 要素名セレクタ
1点
これらのセレクタを組み合わせることで優先順位を上げます。既についているCSSを確認してそれより点数を上げることがコツです。
例としてこのように計算します。セレクタを組み合わせることで優先順位が上がります。
<!--style属性：1000点 -->
<div id="foo" class="bar" name="hogehoge" style="color:red"></div>
<style>
//IDセレクタ：100点
#foo { color:blue; }
//classセレクタ：10点
.bar { color:green; }
//属性セレクタ：10点
[name=hogehoge] { color:yellow; }
//要素セレクタ：1点
div { color:white; }
//IDセレクタ＋classセレクタ：110点
#foo.bar { color:black; }
//要素セレクタ＋属性セレクタ：101点
div[name=hogehoge] { color:gray; }
//IDセレクタ＋classセレクタ＋要素セレクタ＋属性セレクタ：121点
div#foo.bar[name=hogehoge] { color:#fff; }
</style>もし同じ優先順位のセレクタが２つ以上ある場合は、後に書いたものが反映されます。
親要素に依存する
CSSには親の要素が指定されないと反映されないものがあります。特に親要素を基準に設定する値は親要素にプロパティが設定されていないと反映されません。
例えばpositionプロパティのabusoluteは親要素を基準にした絶対位置を指定します。この場合親要素にpositionプロパティが指定されていないと反映されません。
親要素が関係しているCSSを設定するときに反映しない場合の対策方法は親要素に同じCSSが設定されているか確認し設定することです。親要素を変更するときは他のセレクタに影響がないか気を付けて変更しましょう。
まとめ
まとめると３つのポイントと対策方法はこちらになります。
- ブラウザに対応していない
サイトを活用してCSSがブラウザに対応しているか確認する。 - 優先順位が低い
セレクタの指定方法を変えて優先順位を上げる。 - 親要素に依存する
親要素に依存するCSSか確認し、依存する場合は親要素にCSSを設定する。
CSSが反映しない場合はまず何が原因か調べてみましょう。原因さえわかれば３つのポイントを活用して細かい設定できるようになります。CSSが反映しない場合も焦らずこのポイントを確認して自由な設定ができるようになりましょう！
