記事内に商品プロモーションが含まれる場合があります
グーグルクロームを使ってWebデザイン作業をしている方は、次のような経験をしたことがあるのではないでしょうか。
原因と対処法は？
原因の1つは、古いCSSの情報がキャッシュとしてグーグルクロームに保存されていることです。その場合、キャッシュを使わず、Webから最新のデータを読み込む『スーパーリロード』を行うと、変更が反映されることがあります。
この記事では、Google Chromeでスーパーリロードをすることで、最新のデザインを表示させる方法を解説します。Mac・Windowsのパソコン版Chromeが対象です。以下の画面画像は公開当時のものなので、現在の表示やメニュー名と細部が異なる場合があります。
Chromeのキャッシュを削除してCSSを反映
手順1：デベロッパーツールを開く
Windowsの場合
F12キーを押しましょう。これでデベロッパーツールが開きます。Ctrl＋Shift＋Iでも開けます。キーボードの設定によっては、F12と一緒にFnキーを押す必要があります。
Macの場合
ページ内の要素を右クリックして、「検証」を選びましょう。これでデベロッパーツールが開きます。⌘＋Option＋Iでも開けます。
手順2：リロードボタン を右クリック
デベロッパーツールを開いたまま、グーグルクローム上部のリロードボタンを右クリックします。ボタンの長押しでもメニューを開けます。
手順3：［キャッシュの消去とハード再読み込み］をクリック
3つのリロード方法が選べます。この中の［キャッシュの消去とハード再読み込み］をクリックしましょう。この操作は対象ページだけでなく、すべてのサイトのブラウザーキャッシュを消去します。キャッシュを使わず読み直すだけでよい場合は［ハード再読み込み］を選べますが、こちらはキャッシュ自体を消去しません。
完了！CSSが反映されるはず
これでブラウザーキャッシュが削除され、ページのデータが再取得されます。Cookie・閲覧履歴・保存したパスワードをまとめて削除する操作ではありません。古いブラウザーキャッシュが原因なら、デザインCSSの変更が反映されることがあります。変わらない場合は、サーバーやCDN側のキャッシュ、CSSの読み込み先やルールの優先順位も確認しましょう。