CSSが反映されない場合の対策法
2021.06.11
webページなどを作成していると、「打ち込んだはずのCSSがうまく反映されず、原因も自分なりに探してみたがわからずに困ってしまった…」という経験をしたことのある人も多いです。
CSSは書くことはそこまで難しいものではないですが、細かい決まりがあるため、なぜcssが反映されないのかを探すのはとても大変です。
今回はなぜCSSが反映されないのかを調べる方法や、よくある原因、その対処法まで詳しく紹介していきます。
CSSが反映されない原因を調べる方法
まずはなぜCSSが反映されないのかを調べる必要があります。
原因を調べる際に便利なのが検証機能「デベロッパーツール」を使うことです。
今回はGooglechromeを使った検証方法について紹介していきます。
デベロッパーツールの使い方
まずはGooglechromeを使ってwebページを開き、CSSが反映されない部分を右クリックします。
下に出てくる「検証」をクリックします。
出てきた画面の左側がHTMLコード、右側がCSSコードを表示しています。
問題がありそうなHTMLを探す
HTMLをクリックすることで、それぞれのCSSコードが表示されます。
まずは問題がありそうなHTMLコードをクリックします。
HTMLの左にある「▶」をクリックすると、中のコードまで詳しく見ることが可能です。
CSS側を確認する
問題のありそうなHTMLコードを見つけたら、次にCSS側を確認していきましょう。
中には様々なことが原因で、CSSに取り消し線が引かれている場合があります。
そういった場合そのCSSは適用されていないということなので、なぜ適用されていないのかを調べてコードを修正する必要があります。
CSSが反映されない時に多い失敗例や対処法4選
実際にCSSが反映されないときに多い原因や、どのように対処すればいいのかについて詳しく説明していきます。
キャッシュが残っている
キャッシュとは、開いたスタイルシートを過去のデータとして残すことで、表示速度をあげることができる機能のことです。
キャッシュが残っていることで、過去のデータが表示されていて、更新したはずのCSSが適用されていないということが考えられます。
対処法
デベロッパーツールを開いた状態で、画面上部の更新ボタンを右クリックし、「キャッシュの消去とハード再読み込み」をクリックすると、キャッシュをクリアした状態で再読み込みされ、最新の状態に更新することが可能です。
キャッシュを削除するだけで簡単なので、まずはキャッシュの削除を試してみるのがおすすめです。
HTMLとCSSがリンクしていない
CSS名が異なっていてHTMLとリンク出来ていない事から、上手く反映出来ないというのもよくある原因の1つです。
対処法
<span style="font-weight: 400;"><link rel="stylesheet" href="style.css"></span>
がHTMLのheadタグの中にしっかりと記載されているかどうかを確認します。
また、CSS名が間違っていないか、バックアップをとってある場合はバックアップ側のデータを編集していないかなども確認することで、HTMLとCSSをしっかりリンクさせることが可能です。
優先度が低い
他の記述に同じプロパティの指定を入れていることで、他の記述が優先されて反映されていないということがあります。
先ほども紹介したように、適用されていないものには取り消し線が表示されているので、比較的見つけやすい原因です。
対処法
記述の優先度は、優先度の高いものから
- 要素を指定したid
- id
- 要素を指定したclass
- class
- タグ
となっています。
他の記述を見直しながら優先度を調整することで、しっかりCSSを反映させることが可能です。
記述ミスがある
単純に記述ミスをしているため反映されていないということが最も多い原因の1つです。
細かいことでも反映されなくなってしまうため、見つけるのも大変ですが修正は簡単に行うことが可能です。
対処法
よくある記述ミスとしては
- 「；(セミコロン)」→「；」のとじ忘れや「：(コロン)」との打ち間違い
- 「(半角スペース)」→半角スペースの入れ忘れや、全角スペースとの打ち間違い
- 「｛(波かっこ)」→「｛」の重複や打ち忘れ
- セレクタ名の書き方ミス
- コメントアウトミス
などが挙げられますので、注意して1文ずつ確認・修正していくことで正しくCSSを反映させることが可能です。
まとめ
- cssが反映されないときはデベロッパーツールを使って原因を探す
- cssが反映されない原因
- キャッシュが残っている
- HTMLとcssがリンクしていない
- 優先度が低い
- 記述ミスがある
cssは細かい決まりがあるため、反映されない原因を探すのは難しいですがデベロッパーツールを使ったり、よくある原因からcssを見直したりすることで問題を解消することができます。
ぜひcssが反映されずに困っている時には今回紹介したことを試してみてください。
関連
Webサイト制作Web開発
Webディレクション
Webサイト制作Web開発
