cssファイルを修正したけど反映されない！？キャッシュをクリアしてWEBページに反映させる方法

WEBページを更新することはよくあることだと思います。

そのなかで一番困るのが修正したけどクライアントから修正されていないと言われることだと思います。

僕も以前ありました。

クライアントから修正依頼をいただき修正してcssをアップしました。

ところが「修正されていません」を指摘をもらいました。

原因としてはcssのキャッシュで修正後のcssが反映されず修正前のcssが反映されている状態になります。

cssキャッシュの解決策

キャッシュクリアの一つに「クエリストリング/GETパラメーター」というものがあります。

<link type="text/css" rel="stylesheet" href="style.css">

修正したcssファイルが「style.css」だとします。

その後ろに下記のようにパラメータを付与してあげます。

<link type="text/css" rel="stylesheet" href="style.css?20210304">

ファイルを更新するたびにパラメータ部分を修正する必要がありますがパラメータ部分を修正することでブラウザがこれは新しいファイルだと認識してくれて新しいcssを反映してくれます。

cssファイル以外にも画像やjsもキャッシュをクリアさせることができます。

書き方はcssと同じです。

<img src="/images/img.jpg?20210304" alt="画像">

次はjsファイルのキャッシュクリアです。

<script src="add.js?rev=20210304"></script>

下記の方法でもキャッシュクリアできます。

「?ver=〇〇」をバージョンをつけてキャッシュクリアすることができます。

<script src="add.js?ver=1.0.1"></script>

よく使われるのがやっぱり更新日時などをパラメータに入れて更新するのが多いかと思います。

またパラメータをつけるだけでなくファイル名にバージョンを付けたりファイルパスにバージョンを付ける方法もあります。

どれを使うかは管理しやすくわかりやすいものを選べばいいと思います。