だれかの、なにかに、役立てるウェブ制作者YoTaの趣味ブログ

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

ウェブサイトのコーディング制作で面倒なのが、ブラウザやスマホ端末で確認しながらのCSS修正作業です。

Ctrl+F5のスーパーリロードはまだしも、ブラウザ設定のキャッシュ履歴削除なんて、いちいちやってられませんし、クライアントにもお願いすると面倒くさいですよね。

そんな時は、CSSのURLにパラメータをつければスムーズです。

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");?>">

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

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

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

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

YoTa アイコン

修正しました

読者 アイコン

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

YoTa アイコン

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

読者 アイコン

スマホだよ!

YoTa アイコン

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

読者 アイコン

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

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

まとめ

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

参考リンク

ページ上部に戻る