CSSを変更してもChromeに反映されない時は、キャッシュクリアで解決

こんにちは！

はじめに、この記事の概要と目次です。本編は少しスクロールすると始まります。

今回は、CSSの編集をしているときにふと発生する、「変更したはずのCSSがChromeで反映されない問題」の解決手順をまとめました。Webデザインをしていると何度も直面する問題ですが、Chromeの場合はほとんどこの手順で解決します。

問題の内容を確認

CSSの設定を行なっていると頻繁に遭遇する「CSS反映されない問題」。まずは問題の状況を確認します。

キャッシュはChromeの設定画面から削除することができます。設定画面は、Chromeの右上にある設定ボタンを押して、「設定」を開きます。

設定画面を開いたら、その中の「プライバシーとセキュリティ」を選択し、次に「閲覧履歴データを削除」を選択します。

ポップアップが表示されるので、その中にある「キャッシュされた画像とファイル」にチェックを入れて、最後に「データを削除」を選択して完了です。

保存されていたキャッシュの量にもよりますが、キャッシュの削除は概ね数秒で完了します。

クリアが完了したら、CSSを設定したブラウザのタブに戻り、更新してみましょう。無事CSSが反映されていれば成功です。そのまま続けてCSSの編集→更新すると基本的に即時に反映されますが、時間をあけて再度同じ事象が起きたら、もう1度同じ作業をすれば解決します。