CSSが反映されない時の原因と対処法

Web制作

 

コーディングをやっているときにありがちなトラブルの一つとして、CSSが反映されないというものがあります。

しかし、CSSが反映されない原因はパターン化されているので、落ち着いて一つ一つ検証すればすぐに解決できます。

 

本記事では検証手順について解説していきます。

 

以下、記事に入ります。

 

CSSが読み込んでいるかどうか確認する

まずは大前提として、サイトがCSSを読み込んでいるかどうかを確認しましょう

例えばstyle.cssというファイルを作成した場合、headの中を見れば「style.css」の記述がどこかにあるはずです。

 

そもそもstyle.cssが反映されているかどうかを見てみましょう。

特にWordPressサイトだと、テンプレートタグの間違いなどで反映されてない可能性があります

 

この辺りの記述はしっかりと確認しましょう。

 

CSSが全体に反映されているか確認する

CSSが読み込んでいるのを確認したら、次はCSSが全て反映されているか確認しましょう。

 

例えば、h1タグのCSSは反映されているのにh2タグは反映されていない...

この場合、h2タグの記述が間違えていたり前後のCSSの閉じタグが抜けているなどの原因が考えられます。

 

検証ツールを用いて、要素のCSSを確認してみましょう。

CSSが反映されている場所と反映されていない場所があれば、記述ミスの可能性があります。

 

キャッシュを消してみる

style.cssが反映されていたら、キャッシュを消してみましょう。

キャッシュの消し方については、以下の記事で解説しています。

https://kutarosan.com/cache-delete/

 

ここで1つ問題なのが、サーバー側のキャッシュです。

例えばエックスサーバーによくありがちなのですが、自分のブラウザ(GoogleChrome等)でキャッシュを削除しても、エックスサーバー側がキャッシュを残している場合があります

 

この辺りの設定は大体サーバーのマニュアルに記述があります。

(エックスサーバーなら「エックスサーバー キャッシュ」で出てくる)

 

ブラウザキャッシュを消しても反映されない場合、サーバーキャッシュを疑ってみましょう。

 

また、WordPress系サイトだと「W3 Total Cache」などのキャッシュ系のプラグインが邪魔をしている場合があります

PCでキャッシュが消えていてもスマホで見ると残っている、という例もありますのでプラグインを使用する際は気をつけましょう。

 

ファイル名を確認する

CSSが全て反映されてない時などは、ファイル名を確認してみましょう。

 

ありがちなのが、「style.css」がstyke.cssstyles.cssになっている、などです。

初歩的ですが、間違うと割と見逃しがちな部分なので気をつけましょう。

 

パスを確認する

 

ファイル名の次は、パスを確認しましょう。

cssというフォルダに入れてあるのに、

ではなく、

と書いてしまうなどがあります。

 

WordPressサイトだと、functions.phpに書いたパスの記述が間違っていることがよくあります

前項の「CSSが読み込んでいるかどうかを確認する」と合わせて、しっかり確認しておきましょう。

 

CSSの記述を確認する

上記問題点を見直したあとは、CSSの記述内容に問題がないか確認しましょう。

 

よくありがちなのが、

・クラス名を間違っている

・クラス名の前のドットが抜けてる

・タグ名(h2やp等)の前にドットをつけてる

などです。

CSS全体ではなく、ピンポイントで反映されていない時はこちらの原因を疑いましょう

 

珍しい例でいうと、メディアクエリの閉じタグが抜けていて、PC版のCSSを書いてるはずなのにSP版にしか反映されていなかった...などがあります

@media screen and ( max- width: 768px ){

}←こいつが抜けてる

 

まとめ

CSSが反映されない原因、心当たりのあるものもあったのではないでしょうか。

CSS全体が反映されていない、など大きな問題ほど原因は小さなものです。

 

落ち着いて、手順を決めてチェックすればほとんど解決できる問題なので気をつけましょう╭( ・ㅂ・)و̑