ChromeでCSSを更新したのに反映されない問題
Webデザイナーなどの職業をしている方であれば、シェア数の多いブラウザであるGoogle Chromeで作成したホームページの確認を行いますよね。しかし、CSSの変更を行ったのにも関わらずホームページのデザインが更新されないという事態に遭遇したことはないでしょうか。
HTMLやCSSの記述が間違っていた場合はファイルを更新したとしてもデザインが変わることはありませんが、記述が正しいのにデザインが反映されない場合はGoogle Chromeに原因があります。Google ChromeのキャッシュにCSSが保存されることによって、CSSを更新したのにも関わらずキャッシュに保存されているCSSを読み込んでしまうため、ホームページが更新されないのです。この場合は、通常のリロード(再読み込み)で更新しても反映されません。CSSが正常に反映されないと、ちゃんと作成したホームページのデザインが崩れるため困ってしまいますよね。
この記事では、Google ChromeでCSSを更新したのに反映されない場合の対処法を紹介していきます。
ChromeでCSSを更新したのに反映されない場合の対処法
スーパーリロードを行う
通常のリロードでは、CSSを更新してもキャッシュを読み込んでしまうためホームページの確認ができません。そこで、「スーパーリロード」を行ってみましょう。スーパーリロードとは、ホームページの画像やCSSといったキャッシュを無効・破棄した状態でリロードを行います。これで、最新のCSSをホームページに反映させることができます。
Google Chromeでスーパーリロードを行うには「Ctrlキー+Shiftキー+Rキー」、もしくは「Shiftキー+F5キー」を同時押ししましょう。これらのショートカットキー操作を行うことで、スーパーリロードされますよ。
キャッシュの削除とハード再読み込みを行う
スーパーリロードよりも効果があるリロード方法が、「キャッシュの消去とハード再読み込み」です。