【解決】キャッシュクリアの強制方法【CSSの修正反映】

パソ君

・サイト修正時に強制的にキャッシュクリアする方法ない？

こんな疑問にお答えします。

サイトを修正した時に、キャッシュが原因でCSSが更新されないことがありますよね。

キャッシュ削除の知識があればすぐに対応できますが、クライアント様側はわからない可能性もあります。

その場合、相手側にお時間と手間をかけることにつながります。

実はとあることをすれば、強制的にキャッシュクリアさせて更新させることが可能なんですよね。

ジト

すぐにできるよ！

ということで、この記事では「キャッシュクリアの強制方法」について解説していきます！

【解決】キャッシュクリアの強制方法【CSSの修正反映】

結論：読み込みコードにパラメータを追加すればOK。

パラメータとは、末尾につく「?12345」のような変数ですね。

例として下記になります。

<!-- 通常 -->
<link rel="stylesheet" href="/css/style.css" />

↓

<!-- キャッシュクリア強制用 例➀ -->
<link rel="stylesheet" href="/css/style.css?ver=1.0.1" />

<!-- キャッシュクリア強制用 例➁ -->
<link rel="stylesheet" href="css/style.css?20231101" />

このように拡張子の末尾に「?~~~」とパラメータをつけます。

verを表したり、日付を表すやり方が多いですね。もちろん記述する文字は任意でOKです。

別ファイルとして読み込まれる

パラメータをつけることで「style.css」と「style.css?ver=1.0.1」は、別ファイルとして扱われます。

そのため同ファイルでも再読み込みされて、強制的にキャッシュクリアすることが可能です。

ちなみに後日新たに修正が入った場合、パラメータの数値を変えれば再度読み込みさせることもできますよ。

<!-- 11月1日に修正 -->
<link rel="stylesheet" href="css/style.css?20231101" />

↓

<!-- 11月5日に修正 -->
<link rel="stylesheet" href="css/style.css?20231105" />

imgやJavaScriptでも可能

もちろんimgタグやJavaScriptの読み込みコードでも対応できます。

例として下記ですね↓

<!-- img 例 -->
<img src="/img/main.jpg?20231101" alt="">

<!-- JavaScript 例 -->
<script src="/js/script.js?20231101"></script>

PHPを使えば自動更新が可能

余談ですが、PHPを使えば自動でパラメータの数値の変更ができるため、更新作業がめちゃ楽にできます。

例として下記ですね。

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

これなら自動でパラメータの数値が変更可能です。

ただし更新をしなくても・・

先述したPHPコードですと、更新をしていなくても強制的にキャッシュクリアしてしまいます。

あまりよろしくないですよね。。

そのため「filemtime()」を使った下記コードの方がオススメになります↓

<link rel="stylesheet" href="/css/style.css?<?php echo filemtime('ここにファイルのパスを指定');?>" />

「filemtime」を使うと、ファイル更新日時が取得可能です。

つまりファイルが更新されたときのみ、パラメータの数値を更新日時に変えることができます。

使い方の例が下記↓

<link rel="stylesheet" href="/css/style.css?<?php echo filemtime('/css/style.css');?>" />

ファイルの相対パスを()部分に記述しましょう。

これでキャッシュの効果を活かしつつ、強制的にキャッシュクリアすることができますね。

【解決】キャッシュクリアの強制方法【CSSの修正反映】：まとめ

ジト

強制的にキャッシュクリアしたい時はためしてみてね！