CSSが効かないときの原因と確認すべき３つのポイント

結論から言うと
３つのポイント
まとめ

結論から言うと

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>

もし同じ優先順位のセレクタが２つ以上ある場合は、後に書いたものが反映されます。