IBE_LOG

プログラミングに関するアウトプットブログ

CSSの変更が反映されない!【これをやれば即解決】

こんにちは、ハーフエンジニアのIBEです!

CSSの変更が反映されたり、されなかったりといった事象が発生。
原因はCSSの情報がブラウザ(Chrome)のキャッシュに保存されていて、そこからロードされていることでした。

なので、CSSのタグ指定を変更したり、優先順位を高くしたり、リロードしても反映されません。


そんな時はChromeの検証ツールを使ってCSSが反映されているか確認してみましょう。

画面上で右クリックして検証を選択

f:id:IBE_LOG:20181012084121p:plain
画面上で右クリックして検証を選択

確認したいHTMLタグを選択すると右側に適用されているCSSが表示される

f:id:IBE_LOG:20181012084129p:plain
CSSの確認
キャッシュが原因なら何度リロードしても変更が反映されていないことが確認できるはずです。

確認したいHTMLタグやコードが見つからない場合は、画面上の確認したい対象にカーソルを合わせてから右クリックして検証ツールを起動してみましょう。
そうすると対象のHTMLコードが選択されている状態でツールが起動します。
もしくは、ツールの左上にあるこのマークをクリックしてからカーソルを画面上に移動して対象を選択してみましょう。

この左上の矢印マークを選択
f:id:IBE_LOG:20181012085733p:plain

画面上で対象を選択
f:id:IBE_LOG:20181012090312p:plain

ここからが本題!

対処方法は、検証モードでスーパーリロード→キャッシュの消去とブラウザのリロードです。
ブラウザの左上にあるリロードボタンを右クリックして、キャッシュの消去とハード再読み込みを実行しましょう。

f:id:IBE_LOG:20181012084136p:plain
スーパーリロード

これでCSSの変更が反映されているはず!