html/css/jsの変更が反映されない時はブラウザキャッシュを消してみよう
htmlやcssなどでサイトを制作や微調整しているときに、たまに変更が反映されないことがあります。
理由はキャッシュなのですが、キャッシュを消してもなぜかうまく動かない時もあり、反映されない原因がわからない時も。
この記事では、Chrome限定で、ブラウザキャッシュを確実に消す方法をお伝えします。
かなり簡単な方法なので誰でもすぐできます。
Chromeのデベロッパーツールで削除する
なかなかキャッシュが消えない！
そんな時は、Chromeのついているデベロッパーツールで消しましょう。
1. デベロッパーツールを表示
やり方は、
Chrome上で、右クリックを押して、その中の「検証」をクリック。
そうすると、
こんな感じでChromeの下の方に、謎の英語とかが書いている何かが表示されます。
これがデベロッパーツールです。
2. デベロッパーツールでキャッシュクリアするための設定
次に、下の画像のように、デベロッパーツールを操作してください。（2回クリックします）
すると、↓のような画面が表示されます。
この画面を下にスクロールしていくと、「Disable cache」というものがあるのでここにチェックを入れます。
ここにチェックを入れれば設定の完了です。
3. デベロッパーツールを開きながら更新ボタンを押す
最後です。あとは、デベロッパーツールを開きながら更新ボタンを押しましょう。
これでキャッシュが確実に消えました。
さっきの設定は、
ということをやっていました。
なので、今後は、この設定なしで、
- デベロッパーツールを開く
- 更新する
これで全てのキャッシュが確実に消えるようになりました。
デベロッパーツールを開いている状態で更新しないと、キャッシュは削除されないので、今後キャッシュを消す時は、デベロッパーツールを開きながら更新するようにしましょう。
ちなみに、更新は、Macだとcommand + R、windowsだとcontral + R のショートカットキーで消せるので、これも合わせて覚えておくと楽になるかもしれません。
まとめ：それでもcssとかの変更が反映されなければ？
おそらくファイル名や参照ディレクトリを間違えている可能性が高いです。が、他にも原因の要素はあるので、心当たりのところを1つ1つ調べていくしかありません。。。
もし、WordPressでcssが効かない！みたいな人は、以下記事が参考になるかもしれません。
【読み放題】kindleアンリミテッドで実は技術書が読める
Amazonに、読み放題のkindleアンリミテッドがあるのですが、実は技術書もあります。
技術書は、3,000円とかが当たり前の値段だったりして結構高いのでkindleアンリミテッドで技術書を読むのも結構アリだなと思ってます。
kindleアンリミテッドは月額980円するのですが、全部無料で読むことができるため、本を買うよりお得。
月に1冊技術書を読むのなら、確実に得するので、本で勉強するのが好きな人は、kindleアンリミテッドに入るのがおすすめです。
初回は30日の無料体験ができて微妙ならすぐに解約できるので、一度登録してみるのはアリなんじゃないかと。