CSSファイルを修正しサーバへアップロードしてもうまく修正したスタイルが反映されない時があります。

この場合、CSSファイル読み込み時のキャッシュが原因の場合があります。その対策について説明します。

対策

例としてhtmlからcssファイルを下記のように読み込んでいたとします。

<link rel="stylesheet" href="./css/style.css" type="text/css">

cssファイルを読み込むhtmlの記載を下記のように変更します。ポイントは “?” 以降の箇所です。

<link rel="stylesheet" href="./css/style.css?ver=2025121401" type="text/css">

“?” 以降はなんでも良いです。cssファイルを修正しサーバーへアップロードする度に、htmlがcssファイルを読み込む記載の “?” 以降を変更します。例えば、”?ver=2025121402″ でも良いです。

理由

知らなくても大丈夫ですが、一応説明します。
以下を知っている事を前提とします。

ファイルの読み込みはHTTPリクエストで行われます。リクエストメソッドはGETです。
GETメソッドにはクエリーパラメータを付与する事が出来ます。
“?”以降がクエリパラメータになります。本来はcssのようなファイルを読み込むにはクエリパラメータは必要ありません。ですが、このように敢えてクエリパラメータ付与してcssファイルを読み込むと、異なるHTTPリクエストとして扱われる為、キャッシュが使用されないので、修正後の新しいcssファイルが読み込めるようになります。