CSSのキャッシュ対策について

  • 2018/5/30

編集した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として認識します。
なので、ブラウザのキャッシュではなく再度ファイルを読み込んでくれるということです。

是非、ご活用ください。

この著者の最新の記事

関連記事

ピックアップ記事

  1. アメーバブログからWordPressへ投稿記事を移行する機会がありましたので、それについてご紹介し…
  2. 今回で3回目のおすすめプラグインのご紹介です。 Classic Editor このプラ…
  3. WordPressで使えそうなプラグインのご紹介 その2ということで、またいくつか紹介したいと思い…
  4. WordPressでサイトを構築、改修するときに、標準の機能だけでは中々自分の思い描く通りにサイト…
  5. 皆さんはwordpressのテーマは何を使っているでしょうか?有料、無料ともにいろんなものが多く作ら…

株式会社タスタスHP

ページ上部へ戻る