cssが反映されない原因は？サーバー側のキャッシュ？

CSSが反映されない原因と対策

サイトでCSSを変更してブラウザ上で確認したけれども、何故かそれが反映しないなんてことありませんか？

折角記述したコードが確認できなければ意味がありませんよね。

ということでここでは文法ミスやサーバー側のキャッシュによる問題など、初心者の方に良くありがちなCSSが反映されない原因をその対策についてご紹介していきたいと思います。

cssが反映されない原因は？

初心者の方にありがちなCSSが反映されない原因としては下記のようなことが考えられます。

CSSの記述に慣れていないような場合だと、文法ミスによることが原因であることも少なからずあったりします。

初心者の方の文法ミスとしてありがちなのは

以上のようなものがあります。

ちなみにセレクタの書き間違えというのは、通常idで指定しているのであれば「#」、classで指定しているのであれば「.」としなければならないところを、間違ってidで指定しているのに「.」を使っていたり、逆にclassで指定しているのに「#」を使っていたりするとった間違いです。

これらは初心者の場合に良くありがちなので、CSSが反映されないときにはまず、こう言った文法ミスがあるかどうかチェックしてみると良いでしょう。

文法ミスをチェックするには、チェックツールを利用すると良いでしょう。

dirty-markup
CSSのチェックツールはいくつかありますが、「Dirty Markup」というツールならばデザイン的に使いやすい上に、HTMLとJavascriptのコードのエラーチェックもできるのでおすすめです！

Dirty Markupサイト（https://www.10bestdesign.com/dirtymarkup/）

WEBサーバー側のキャッシュ（依然開いたウェブページを素早く開くために、その時のページのデータをブラウザに保存するというようなもの）により、古いキャッシュがそのまま残ってしまっている場合は、例えCSSを変更したとしてもそれが反映されなかったりします。

キャッシュが原因であれば、このキャッシュを削除することによってCSSが反映されるようになります。

キャッシュを削除する方法は、大体ブラウザの右上にあるアイコンから履歴を選択し、そこで履歴の削除・クリアなどを行えばキャッシュを削除することができます。

CSSは下記のコードが優先的に適用されるというルールがあります。

つまりCSSが反映されない場合は、他に詳しく指定したセレクタがある場合や、反映されないCSSコードの後の行に同じ要素が指定されていることが原因だと考えられます。

なので対処方法としては、反映させたい部分のセレクタをより詳しく指定したり、なるべくCSSファイルの後の方の行にコードを記述するようにすると良いでしょう。

反映させたい部分のセレクタを詳しく指定
例：「h2」→「.main h2」→「.container.main h2」など

その他問題がなければ、優先してスタイル適用されている方のコードを削除するのも手です。

CSSが反映されない場合の対策奥義「!important」

どうしてもCSSが反映されない場合は、奥の手としてセミコロンの前に「!important」を書き足すと良いです。

こうするとその部分が優先的に適用されるので、CSSが反映されない場合の対策として手っ取り早いです。

ただし「!important」を付けてしまうと、それが優先されることから他の部分のCSSをいじるときにこれが原因でスタイルが反映されなくなったりするので、あくまでも!importantは奥の手になります。

ということで今回はCSSが反映されない場合の簡単な対策についてご紹介していきました。
「CSSを変更したけれども何故だか変わらない！」という方は、上記の対策について一度試してみてはいかがでしょうか？