WEB制作でCSS読込＆キャッシュ更新を素早くする方法

style.cssのファイル名末尾にパラメータをつければOK!

ブラウザのhttp/https通信では、ファイルにパラメータがついていると、別のファイルと認識して、新たに読み込んでくれる性質があります。

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

そのため、制作側でCSSのURLにパラメータをつけてあげるだけで、一元的に最新データへの更新することが可能です。

php環境であればスーパーリロードの自動化も可能

日付関数があるので、日時だけでなく分秒まで出力させると、利用者がブラウザで開いた時点で更新されるので、ほぼリアルタイムに更新が自動化されます。

<link type="text/css" rel="stylesheet" href="style.css?<?php echo date("YmdHis");?>">

注意点は、制作が終わった後、このままにしておくと、ずっと日付関数が働いてしまい、サーバーにも僅かながら負荷になりますし、利用者側はキャッシュ機能を利用できないので、リピーターの人がスムーズにサイト閲覧できなくなってしまいます。

本番化して公開した時には、忘れず削除しておくようにしましょう。

クライアントさんにスーパーリロードさせるとトラブルが多いから注意

もし、上記のやり方を知らないと、制作の現場において、

修正しました

前のやつから、ぜんぜんされてないじゃん！

え、そんなはずは……お手数なのですがctrl+F5押していただけないでしょうか？

スマホだよ！

それでしたら設定、閲覧データの履歴を削除して、もう一度読み直していただけますか？

はぁ……（めんどくさそうな返事

といったように、お客様満足度の喪失につながるので、制作側でサッと解決しておいたほうがスマートです。

まとめ

WEB制作をしている人なら、ほとんどの方が知っていると思いますが、これからの初心者の方向けに参考になれば幸いです。

参考リンク