CSSファイルをアップロードしたのにキャッシュが残っていてCSSが正しく反映できないときの解決方法です。

キャッシュとは？

そもそもキャッシュとは、ウェブサイトを訪問したときに自動でブラウザに保存されるデータのことです。2回目以降の訪問時にこのデータをブラウザが自動で出力することで、ページの表示速度を上げることができるというメリットがあります。

ウェブサイトを訪問したときに1回目より2回目のほうがページが早く表示されるのは、このキャッシュがロードされているおかげというわけですね。

メリットばかりではないキャッシュの存在

このキャッシュという機能が原因で、CSSファイルをアップロードしたはずなのにウェブサイトには反映されてない…ということが起こってしまいます。

これを「キャッシュが効いてる」や「キャッシュが残ってる」などと言いますが、どちらも共通して「キャッシュが自動で出力されて更新が適用されてない」という意味になります。

ちなみに自分自身のキャッシュをクリアする方法は簡単で、Ctrl+Shift+Rでスーパーリロードを行うことで可能です。

キャッシュの対処方法の考え方

どのような環境でも考え方は同じで「ファイル名にパラメーターを付ける」という対処方法になります。

パラメーターとは下記のような.css以降に付いている「?=123」のことです。

style.min.css?=123

このパラメーターはクエリと言って、ブラウザは「style.min.css」と「style.min.css?=123」を別のファイルだと認識するので、ファイルを更新するたびにパラメーターを変えれば常に1回目の訪問だと認識させることができます。

PHPが使えないときのキャッシュの対処方法

PHPが使えない環境での対処方法です。CSSファイルを更新したらウェブサーバーにアップロードして、そのあとにCSSファイルを読み込んでいるHTMLファイルを開いて手動で編集します。

<link href="./css/style.css?=2023-04-25 17:41" />

Google日本語入力では「きょう」で今日の日付、「いま」で現在の時間に変換ができます。「年月日 時分」をクエリとして付けることで、ブラウザに常に新しいファイルだと認識させることができます。

WordPressのキャッシュの対処方法

WordPressの場合は、ファイルをアップロードしたときの日時を自動で付与することができます。CSSファイルを読み込んでいるheader.phpなどを開いて編集してください。

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

<?php echo date('YmdHis'); ?>でファイルがアップロードされた時間を取得します。取得されるのは「年月日時分秒」となっているので、ブラウザに常に新しいファイルだと認識させることができます。

ちなみに取得される日時は協定世界時のUTCになっているので、日本時間より9時間ずれた時間がタイムスタンプされます。