開発時のCSSのキャッシュクリア方法

システム開発、HP制作をしていると以前のキャッシュが残っていてブラウザに正しく表示されないなんてことはよくあると思います。

キャッシュはブラウザの表示速度が速くなり便利ですけど、開発時には若干面倒です。

自分だけの問題なら「あー・・・面倒」で終わる話ですが、ユーザーも絡むと更に面倒ですね(笑)

CSSのキャッシュクリアが一番問題になるかと思いますが、画像やjavascriptでも同じことがありえます。

開発中に自分のブラウザのキャッシュクリア方法

CSSをちょっといじってうまく表示できてるかな？って確認しようと思ったら反映されていない！

という状況です。

これは簡単で、ブラウザのキャッシュをクリアすればOKです。

ブラウザキャッシュは過去に開いたページのデータをブラウザに保存する機能なので、それを消せば再度現状のものを読み込んでくれるというわけです。

僕はchromeを使っているのですが、いちいち設定からうんたらかんたらしなくても

Ctrl + F5

を押すことでHTMLから読み込んでいるCSSや画像などのファイルを読みなおしてくれます。

なので開発中にCSSや画像ファイルをアップし直した場合なんかにはこれを使えば十分対応できると思います。

しかし、納品時やテスト環境を上司に確認してもらう場合、「Ctrl+F5を押してキャッシュをクリアしてから確認してください」とか言いづらいですよね？

上司ならギリギリありかもしれないですが、エンドユーザーやHPを利用してくれる人に同じようなことは言えないです。

その場合は次の方法になります。

納品時に自分以外のブラウザのキャッシュクリア方法

「よし完成！！お客さーん！出来たんで確認してくださーい」

「え？なんかページ崩れてるけど・・・」

な場面の話です。

この後「これはですねー。キャッシュをクリアすればOKですよ！Ctrl+F5です！キリ」なんて言ったらエンジニア失格ですね。

この場合も非常に簡単に解決できます。

上のような問題がある場合、CSSを読み込むときに次のように書いてると思います。

このCSSのリンクに対しgetパラメータを持たせればよいのです。

よく使われるのがバージョンですね。

https://domain.com/style.css と https://domain.com/style.css?ver=1.1.2 の違いです。

CSSへのリンクURLの最後に ?ver=1.1.2 が付与されているのが分かりますね。

これにより別のURLになり別ファイルと認識してくれるためブラウザは再度CSSを読み込みにいってくれるということです。

簡単ですね！

まとめ

開発時にいちいちバージョンを変えるのは面倒なので、自分が確認するだけの場合は Ctrl+F5 で自分のブラウザのキャッシュをクリアして確認。

納品時や上司へ確認時には変更したCSSのバージョンをちょっとだけ変えて、新しいCSSを読み込ませる。

後者の方は厳密にはキャッシュのクリアでは無いですが、目的は達成したのでOKということで！笑