CSSの読み込みにタイムスタンプをつける

はじめに

Webサイトを作っていて、FTPでサーバにアップロードして、いろんなデバイスでサイトを確認して、修正したいところがみつかって、CSSを更新して、もう一度サイトを確認してみても更新されていないことがあります。
ブラウザキャシュが原因で起こるのですが、PCだとCtrl+F5などで強制的にリロードすることで反映できます。ただ、iOSのサファリなどでは履歴とWebサイトデータを削除するか該当のドメイン名を探して個別にキャッシュをクリアするなど非常に面倒な作業が必要です。
そこで、CSSの読み込みにタイムスタンプをつけることで、その面倒な作業をしなくてもいいようにすることができます。

CSSの読み込みにタイムスタンプをつける

キャッシュを残さずにCSSを反映させるために、HTMLでCSSを読み込むときにパラメータをつけてあげる方法があります。

<link rel="stylesheet" href="./css/style.css?1546830000">

ファイル名の後に?をつけて任意の文字列を入力します。ここではunixタイムスタンプを使ってみました。
JavaScriptの読み込みにも使えます。

おわりに

更新作業するときにちょっとひと手間かかりますが、サイトを確認するときのストレスが減りますし、別の人に見てもらうときもキャッシュの削除や強制リロードの方法を説明したりといった面倒な作業がなくなるので快適にやり取りができると思います。また、ここでは控えますが、PHPを使えば自動でタイムスタンプをつける方法もあるようです。