【html】最新の外部ファイルを読み込ませる方法

CSSやjsファイルは外部ファイルにしていることが多いですが、ブラウザでリロードしてもサイトを早く表示するためキャッシュに残っている外部ファイルは読み直してをしてくれません。

製作者は外部ファイルを修正していることを知っているのでハードリロードすればいいですが、閲覧者はそんなことは考えません。

外部ファイルを修正した場合は読み直ししてほしいですよね。

その場合は、呼び出し側を以下のように半角のクエスチョンマークを付けて記述します。

クエスチョンマークの右側の「〇〇〇」は何でもいいですが、この〇〇〇が変わる度にブラウザは「ファイルが変更された」と認識して読み直してくれるのです。

実際の外部ファイルはクエスチョンマークより左側だけなので「ファイル名.css」です。

呼び出し側を変えるだけです。

例えば、「ファイル名.css?1.1」→「ファイル名.css?1.2」みたいな感じで修正する度に呼び出し側を変更すれば読み直してくれます。

呼び出し側がPHPファイルであれば、以下のように記述しておくと常に最新のCSSを読み込んでくれます。

<link rel='stylesheet' href='ファイル名.css?<?= date("Y-m-d H:i:s") ?>' type='text/css' />