[HTML] CSS修正時に強制的に再読み込みさせる方法

2019年7月21日

CSSを修正してサーバにアップしても、ブラウザのキャッシュ機能によって修正後のCSSを読み込んでくれない事がよくありますが、このような場合でも最新のCSSを強制的に読み込ませる方法を紹介します。

手順

ブラウザはキャッシュファイルを使うか、サーバからファイルを取得するかの判断をURLが同じかどうかで行っているため、異なるURLにしてブラウザがサーバからファイルを取得するように仕向ければよいです。

例えば、CSSの読込箇所が以下のように記述されていたとします。

CSSを修正してアップする時に、このCSS名を変更すればURLが変わるので再読み込みしてくれますが、ファイル名は変えたくないので、以下のようにダミーのパラメータを付加します。
（パラメータの変更もURLが変わったと認識されます。）

ver=1.0の箇所はダミーなので異なる文字列でもOKです。

これでブラウザはキャッシュファイルを使用せずに、サーバからファイルを取得してくれます。

注意点

注意点としては、修正したCSSをアップする度にダミーのパラメータを別のものに変更する必要がありますので忘れないようにしましょう。
あと、一回使用したパラメータは使わないようにご注意ください。
（一回使用したものを指定すると、その時のCSSファイルのキャッシュが使用される可能性があります。）

まとめ

この方法を使用すると、ユーザにブラウザの強制再読み込み（[Ctrl]+[F5]など）をお願いしなくてもよくなるのでとても便利です。