ブラウザにキャッシュされているファイルに変更を反映する方法

公開日:2016/08/27  最終更新日:2018/05/02  カテゴリー:HTML / CSS / JS

大抵の場合は リロードをすることで キャッシュではなくサーバーからデータを取得しなおすことができます。
しかしながら、デザイン変更を確認する相手がWEB制作を依頼した1人であっても 事情を説明するのは面倒ですし、不特定多数の閲覧者に対しての場合は厳しいです。
そこで、 WEB制作側で解決する方法をご紹介します。

方法①:ファイル名を変更する

ファイル名の変更をすればブラウザのキャッシュの影響は受けなくなります。
しかしながら、ファイル自体の名前とファイルへのパスの両方を書き換えるのは面倒です。

方法②:クエリを付加して変更する

<link type="text/css" rel="stylesheet" href="styles.css?20160828"> のように ファイル名の後ろに ?任意の文字列 を付加しておけば、更新時にはファイル名の変更は不要で 任意の文字列部分だけ変更すればよくなります。
任意の文字列は 更新日時やファイルのバージョンなどにしておくとよいでしょう。

WordPress などでも使用されている

WordPressで制作されているサイトのソースを見ればわかりますが、WordPressなどの 様々なCMS でも同様の方法が用いられています。

参考文献

本サイトでは URLに日本語を含んでいます。
メールなどで共有する場合は リンクとして認識されない場合がございますので、こちらをご利用ください。