【CSS】反映されない時に試してみるべき3つの事

CSS
スポンサーリンク

こんにちは朱夏です。

今回は、CSSが反映されない時に試してみると良いことを3つ紹介したいと思います。

朱夏
朱夏

なんでCSSが反映されないの?

どこを確認すればいいのか解らない。

 

 

こういった時に、私が試して効果のあった原因の特定方法を3つ紹介していきます。
それではいってみましょう。

 

[もくじ]
試したこと
1.コピペを活用する
2.セレクタの指定方法を変えてみる
3.デベロッパーツールでスタイルを確認する
あとがき

 

試したこと

私がCSSが反映されない時に試して、効果があったのは次の3つの方法です。

  1. コピペを活用する
  2. セレクタの指定方法を変えてみる
  3. デベロッパーツールでスタイルを確認する

 

私はこの3つを試すことで、CSSが適用されない問題をほぼすべて解決する事が出来ました。

1つずつ具体的に説明していきます。

 

1.コピペを活用する

コピペを活用するのは、以下の様な目的があります。

  • スペルミスの防止

 

CSSが反映されない時に一番ありがちで、一番はまりやすいミスなので、一番最初に潰していきます。

セレクタ部分に関してはHTMLの記述からコピペします。
プロパティや値は、リファレンスなどのサイトからコピペします。

これを一番最初にやっておくことが重要だったりします。

 

2.セレクタの指定方法を変えてみる

セレクタの指定方法を変更する理由は以下の様なものがあります。

  • 優先度を上げてみる
  • セレクタの指定ミスがないかの確認

 

2つ目に試してみるのは、スタイルがちゃんと反映できる状態で書かれているのかです。
競合している記述があれば、優先度が高い方が優先されますし、そもそもセレクタの指定方法が間違っていれば、別の場所にスタイルが当たっていたりする場合もあります。

セレクタの指定方法を変更する場合の一番簡単な方法は、「idで指定してみる」事です。
優先度の一番高いセレクタなので、競合の有無が解ります。

そして、idはユニークなものを指定するので、「divの配下のspan」といった複雑な指定方法を書かなくても良いという利点があります。

 

3.デベロッパーツールでスタイルを確認する

Chromeのデベロッパーツールを使って、実際に適用されているスタイルを確認してみます。

殆どの場合、1つ目、2つ目の方法で解決する事が多いのですが、それでも解決しない場合は、Chromeのデベロッパーツールで確認するのが効果的です。

デベロッパーツールで確認した時に想定される現象としては、以下の2つがあると考えます。

  1. 記載したスタイルが表示されていない
  2. 記載したスタイルに取り消し線が付いている

 

1.記載したスタイルが表示されていない

この場合、原因として考えられるのは、CSSファイルの読み込みパスが間違っている可能性がある事です。

もしくはセレクタの指定方法がまだ間違っている可能性がありますね。

落ち着いて見直しましょう。

 

2.記載したスタイルに取り消し線が付いている

この場合に考えられる原因は、まだ競合に優先順位で負けているということです。

この場合は、プロパティに!importantを付けてみてください。
そのプロパティのスタイルが最優先で適用されるはずです。

競合先にも!importantが付いていた場合はどうしようもないのですが・・・

ここまでくると、CSSの書き方や構造自体を見直した方が良いレベルで複雑になっている可能性があります。

 

あとがき

というわけで、CSSが反映されない時に試してみたい3つの事を書いてみました。

今回のまとめはこちら。

  1. コピペを活用する
  2. セレクタの指定方法を変えてみる
  3. デベロッパーツールでスタイルを確認する

 

今回は、自分で原因を特定して問題解決していくためのアプローチ方法として紹介しました。
CSSを学習している人にとっては、原因を直接教えてもらうより、自分で解決する方法を学んだ方が、今後の役に立つと思ったからです。

今回は以上です。
次回もよろしくお願いします。

 

タイトルとURLをコピーしました