CSSが更新されない！CSSのキャッシュを自動で読み直すWEBサイト更新テクニック

kobato

4か月前

WEBサイトの更新時、クライアントさまから

クライアント：「更新されていませんよ」

私：「お手数ですがキャッシュの削除をお願いできますか？」

クライアント：「キャッシュって何？…」

という不毛なやりとりをすることが多くて、
なんとかならないかなーって思ってました。

更新が反映されない原因は、CSSが更新されていないから。
見ているブラウザのキャッシュを削除しないと、
前のデータが残ったままになっているのです。

CSSが更新されない問題を解決する方法を試したら、うまくいったのでシェアしまーす！

このページのもくじ

CSSが更新されないときの対処法

対処方法は、CSSファイルを読み込む時にパラメーターを付与します。

HTML

<link rel="stylesheet" href="style.css?20240110">
<link rel="stylesheet" href="style.css?var=001">

ファイル名の後ろに「？」とバーションや日付けを追加します。

PHP

<link rel="stylesheet" href="style.css?<?php echo time(); ?>">

もとのファイルがHTMLだった場合はPHPにするのを忘れずに。
例）index.html → index.php

CSSファイルをアップロードしたときに自動で日時を付与させることができます。
CSSファイルを読み込んでいる「header.php」などを開いて編集します。

PHP

<link href="./css/style.css?=<?php echo date('YmdHis'); ?>">

<?php echo date('YmdHis'); ?>でファイルがアップロードされた時間を取得します。
取得するのは「年月日時分秒」となっています。

これでブラウザに常に新しいファイルだと認識させることができます。
取得する日付は協定世界時のUTCになっているので、日本時間より9時間ずれた時間になっています。