編集したCSSファイルをサーバーへアップロードしたのにサイトに反映されない…ってこと、多々あると思います。

製作側はスーパーリロードで編集内容の反映を行うのでいいですが、そうでない人がスーパーリロードしてサイトを見ることは考えにくいです。

この記事では、だれが見ても最新の編集内容が反映されている状態を見れるようにする方法をいくつか説明します。

通常CSSをHTMLファイルにリンクする時は
<link href=”/css/style.css” rel=”stylesheet”>
みたいに書くと思います。

ここに下のような記述を追加します。
<link href=”/css/style.css?〇〇” rel=”stylesheet”>
〇〇の部分は任意です。
version管理をしっかりやっているのであれば、version数を入れるといいかもしれません。

また、PHPの記述が可能なら、下のように動的に記述を変えることもできます。

日付(yyyymmddMMss)
<link href=”/css/style.css<?php echo time(); ?>” rel=”stylesheet”>
秒まで出力されるので、頻繁に更新をする場合はいいと思います。
既定の日付から更新した瞬間の時間がそのまま出るので、更新頻度が低くなった時は他の文字列を入れたりして対策したほうがいいかもしれないですね。

これらの仕組みをざっくりと説明します

URL(上でいう「/css/style.css」)の末尾に?を付与することで、それ以降の文字はクエリー文字として認識されます。
これは、動的に変化しないデータの末尾に加えても影響はありませんが、ブラウザは異なるURLとして認識します。
なので、ブラウザのキャッシュではなく再度ファイルを読み込んでくれるということです。

是非、ご活用ください。