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

記事内に商品プロモーションが含まれる場合があります

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

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

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

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

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

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

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

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

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

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