ChromeでCSSが反映されない?キャッシュ消去で対処

グーグルクロームでスーパーリロードする方法

グーグルクロームを使ってWebデザイン作業をしている方は、次のような経験をしたことがあるのではないでしょうか。

CSSを変更したのに、何回クロームを リロード(更新)してもデザインが変わらない!

原因と対処法は?

原因は、CSSの情報がキャッシュによりグーグルクロームに保存されてしまっていることにあります。そのため、キャッシュを読み込まず、Webから最新のデータを読み込む『スーパーリロード』を行えば、この問題は解決します。

この記事では、Google Chromeでスーパーリロードをすることで、最新のデザインを表示させる方法を解説します。※ Mac、Windowsどちらにも対応している方法です。

Chromeのキャッシュを削除してCSSを反映

手順1:デベロッパーツールを開く

デベロッパーツールを開く

Windowsの場合

F12キーを押しましょう。これだけでデベロッパーツールが開きます。

Macの場合

右クリック→検証

画面のどこでも良いので右クリックして、「検証」を選びましょう。これでデベロッパーツールが開きます。

手順2:リロードボタン を右クリック

リロードボタンを右クリック

デベロッパーツールを開いたまま、グーグルクローム上部のリロードボタンを右クリックします。

手順3:[キャッシュの消去とハード再読み込み]をクリック

キャッシュの消去とハード再読込

3つのリロード方法が選べるようになると思います。この中の[キャッシュの消去とハード再読み込み]をクリックしましょう。

完了!CSSが反映されるはず

これでページのキャッシュが削除され、最新データが読み込まれます。デザインCSSの変更も反映されるはずです。

同じカテゴリーの記事
同じカテゴリーの記事一覧
インターネット
サルワカ