ChromeでCSSを更新したのに反映されない場合の対処法!

ChromeでCSSを更新したのに反映されない場合の対処法!

Webデザインを行っている方であれば、Google Chromeなどブラウザでどう表示されるか確認しますよね。しかし、CSSを更新したのに何故か反映されないこともあります。この記事では、ChromeでCSSを更新したのに反映されない場合の対処法をご紹介します。


目次[非表示]

  1. ChromeでCSSを更新したのに反映されない問題
  2. ChromeでCSSを更新したのに反映されない場合の対処法

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キー」を同時押ししましょう。これらのショートカットキー操作を行うことで、スーパーリロードされますよ。

キャッシュの削除とハード再読み込みを行う

スーパーリロードよりも効果があるリロード方法が、「キャッシュの消去とハード再読み込み」です。

メニューボタンをクリックしてメニューを開き、「その他のツール」にマウスカーソルを乗せる
キャッシュの消去とハード再読み込みを行うには、Google Chromeウィンドウ右上に表示されているメニューボタンをクリックしてメニューを開き、「その他のツール」にマウスカーソルを乗せましょう。
「デベロッパーツール」をクリック
サブメニューが表示されるので、「デベロッパーツール」をクリックしましょう。また、ショートカットキーの「Ctrlキー+Shiftキー+Iキー」・「F12キー」でも可能です。
デベロッパーツール
デベロッパーツールが表示されます。
デベロッパーツールが表示された状態で更新ボタンを右クリックして「キャッシュの消去とハード再読み込み」をクリック
デベロッパーツールが表示された状態で、更新ボタンを右クリックして「キャッシュの消去とハード再読み込み」をクリックすればOKです。

関連記事