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

CSS
スポンサーリンク

結論から言うと

CSSが効かないときの原因と確認すべき3つのポイントはこちらです。CSSが効かないときはそれぞれ確認してみましょう。

  1. ブラウザに対応していない
  2. 優先順位が低い
  3. 親要素に依存する

3つのポイント

ブラウザに対応していない

CSSはブラウザによって対応していないものがあります。特にIE(Internet Explorer)に対応していないものが多いので気を付けなければいけません。

CSSが反映されていないときはそのCSSがブラウザに対応しているか確認しましょう。

プロパティごとにどのブラウザに対応しているか確認したい場合は便利なサイト『Can I use』などを使いましょう。

またブラウザごとにCSSを分ける場合はCSSハックを使って記載しましょう。

優先順位が低い

CSSのプロパティには指定するセレクタごとに優先順位が付けられています。すでにあるCSSに自分で上書きしようとして反映されない場合は、自分が書いたCSSより優先順位が高いCSSが設定されている場合があります。

その場合の対策方法として2パターンあります。

!importantを使う

1つは『!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>

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

親要素に依存する

CSSには親の要素が指定されないと反映されないものがあります。特に親要素を基準に設定する値は親要素にプロパティが設定されていないと反映されません。

例えばpositionプロパティのabusoluteは親要素を基準にした絶対位置を指定します。この場合親要素にpositionプロパティが指定されていないと反映されません。

親要素が関係しているCSSを設定するときに反映しない場合の対策方法は親要素に同じCSSが設定されているか確認し設定することです。親要素を変更するときは他のセレクタに影響がないか気を付けて変更しましょう。

まとめ

まとめると3つのポイントと対策方法はこちらになります。

  1. ブラウザに対応していない
    サイトを活用してCSSがブラウザに対応しているか確認する。
  2. 優先順位が低い
    セレクタの指定方法を変えて優先順位を上げる。
  3. 親要素に依存する
    親要素に依存するCSSか確認し、依存する場合は親要素にCSSを設定する。

CSSが反映しない場合はまず何が原因か調べてみましょう。原因さえわかれば3つのポイントを活用して細かい設定できるようになります。CSSが反映しない場合も焦らずこのポイントを確認して自由な設定ができるようになりましょう!

スポンサーリンク
CSS プログラミング
スポンサーリンク
この記事を書いた人
まさき

25歳の社会人3年目のシステムエンジニアです。
未経験からIT企業に入社して業務や、業務外でも学習することでプログラミングが書けるようになりました。
得意なのはHTML,CSS,JavaScript。最近はVue.jsとGASを勉強中です。
本を読むことが好きなのでIT技術書以外にもたくさん読みます。
好奇心旺盛でとりあえずやってみる精神です。
楽しいことが生きがいで、仕事も私生活も楽しくなるように日々奮闘中。

まさきをフォローする
シェアする
まさきのエンジニア図書館
タイトルとURLをコピーしました