Web制作 上谷亮太

html/css/jsの変更が反映されない時はブラウザキャッシュを消してみよう

htmlやcssなどでサイトを制作や微調整しているときに、たまに変更が反映されないことがあります。

理由はキャッシュなのですが、キャッシュを消してもなぜかうまく動かない時もあり、反映されない原因がわからない時も。

この記事では、Chrome限定で、ブラウザキャッシュを確実に消す方法をお伝えします。

かなり簡単な方法なので誰でもすぐできます。

Chromeのデベロッパーツールで削除する

なかなかキャッシュが消えない!

そんな時は、Chromeのついているデベロッパーツールで消しましょう。

1. デベロッパーツールを表示

やり方は、

Chrome上で、右クリックを押して、その中の「検証」をクリック。

そうすると、

こんな感じでChromeの下の方に、謎の英語とかが書いている何かが表示されます。

これがデベロッパーツールです。

2. デベロッパーツールでキャッシュクリアするための設定

次に、下の画像のように、デベロッパーツールを操作してください。(2回クリックします)

すると、↓のような画面が表示されます。

この画面を下にスクロールしていくと、「Disable cache」というものがあるのでここにチェックを入れます。

ここにチェックを入れれば設定の完了です。

3. デベロッパーツールを開きながら更新ボタンを押す

最後です。あとは、デベロッパーツールを開きながら更新ボタンを押しましょう。

これでキャッシュが確実に消えました。

さっきの設定は、

「デベロッパーツールを開きながら更新するとキャッシュを消す」

ということをやっていました。

なので、今後は、この設定なしで、

  1. デベロッパーツールを開く
  2. 更新する

これで全てのキャッシュが確実に消えるようになりました。

デベロッパーツールを開いている状態で更新しないと、キャッシュは削除されないので、今後キャッシュを消す時は、デベロッパーツールを開きながら更新するようにしましょう。

ちなみに、更新は、Macだとcommand + R、windowsだとcontral + R のショートカットキーで消せるので、これも合わせて覚えておくと楽になるかもしれません。

まとめ:それでもcssとかの変更が反映されなければ?

おそらくファイル名や参照ディレクトリを間違えている可能性が高いです。が、他にも原因の要素はあるので、心当たりのところを1つ1つ調べていくしかありません。。。

もし、WordPressでcssが効かない!みたいな人は、以下記事が参考になるかもしれません。

2018.01.22

wordpressでcssを編集したのに効かない問題の対処と原因と特定する術

最近、友人にWeb制作を教えたりしてるんですが、 こんな質問がきました。 答えは結構簡単だったんですが、本人は自分でめちゃくちゃ調べたらしく、それでもわからないから僕に聞いたみたいです...
2019.04.04

【初心者向け!】CSSの変更がうまくいかないときは優先度がおかしいかも?

CSSを変更してもうまくいかないときはありませんか? 実は、それはCSSの優先度がおかしいのかもしれません。 CSSには優先順位がある 実は、CSSが適応される際に優先順位というのがあります。 何か...