ウェブサイトやブログ記事を作成した時、CSSやJavaScriptファイルを更新したはずなのにうまく読み込まれず、古い状態のまま表示され続けることがあります。

これは、ブラウザが表示速度を速めるために「キャッシュ」を使用しており、それが強く残ってしまっているためです。
この記事では、FirefoxとChromeブラウザで、確実に「キャッシュ」をクリアする方法を2つ紹介します。

1. スーパーリロード(ハード再読み込み)でキャッシュクリアする方法

通常、ブラウザリロードのショートカットキーは、WindowsでF5、Macではcommand + Rですが、これ以外に「スーパーリロード」と呼ばれる、キャッシュをクリアするリロードがあります。

Firefoxブラウザのスーパーリロード方法

  • Windows・・・Ctrl + F5
  • Mac・・・command + Shift + R

Chromeブラウザのスーパーリロード方法

  • Windows・・・F12 (または任意の場所を右クリックして「検証」)で、「開発ツール」を表示した状態で「更新マーク」を右クリックし「キャッシュの消去とハード再読み込み」
  • Mac・・・command + Option + i (または任意の場所を右クリックして「検証」)で、 「開発ツール」を表示した状態で「更新マーク」を右クリックし「キャッシュの消去とハード再読み込み」

Chrome キャッシュのクリアとハード再読み込み
※「開発ツール」を表示した状態でないと「」を右クリックしても上記メニューは表示されません。

2. ブラウザの設定からドメイン単位でCookieとキャッシュデータを消す方法

もし、上記のスーパーリロード(ハード再読み込み)でもキャッシュが残る場合は、以下のようにブラウザの「設定」からドメイン単位でCookieとキャッシュデータを消せば確実です。
(ただし、誤ってブラウザの全Cookieとキャッシュデータを消すと、すべての閲覧履歴や保持しているログイン情報等も消えて面倒なことになるので注意しましょう)

FirefoxブラウザのCookieとキャッシュデータを消す方法

  1. 右上のメニューまたはWindowsはCtrl + ,、Macならcommand + ,から「設定」をクリック。
    Firefox メニューから設定
  2. 「プライバシーとセキュリティ」→「サイトデータ」→「設定」へ。
    Firefox サイトデータ
  3. ドメインごとのキャッシュデータの一覧が表示されるので、削除したいドメインを検索し、「選択したサイトデータを削除」すればOK。
    Firefox 選択したサイトデータを削除

ChromeブラウザのCookieとキャッシュデータを消す方法

Chromeは、Firefoxに比べて深い階層にあり、手順が多いので少し手間です。

  1. 右上のメニューから「設定」をクリック。
    Chrome メニューから設定
  2. スクロールしていき「詳細設定」を開き、「コンテンツの設定」へ。
    Chrome 詳細設定からコンテンツの設定
  3. 「Cookie」をクリック。
    Chrome Cookie
  4. 「すべてのCookieとサイトデータを表示」をクリック。
    Chrome すべてのCookieとサイトデータ表示
  5. 任意のドメインを検索し、削除したいドメイン横の (ゴミ箱)アイコンをクリックすればOK。
    Chrome Cookie削除

以上、FirefoxとChromeブラウザで、確実に「キャッシュ」をクリアする方法を紹介しました。