CSSのデザイン変更が反映されない時の対処法【Google Chrome】

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

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

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

原因と対処法は?

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

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

Google Chromeでスーパーリロードする方法

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

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

Windowsの場合

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

Macの場合

Mac:ページのソースを表示

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

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

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

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

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

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

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

完了!

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

サルワカ