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

CSS

2021.08.262020.04.12

こんにちは朱夏です。

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

朱夏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今回のまとめはこちら。

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

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