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