ブラウザキャッシュクリアの方法
CSSや同名ファイル画像でキャッシュがクリアされない場合、ファイル名の末尾にクエリを付けることで解決される場合があります。
CSSの場合
meta.html内の
<link rel=”stylesheet” href=”/common/css/style.css”>
↓
<link rel=”stylesheet” href=”/common/css/style.css?ver-20210428-00″>
念のため「style.css」にも
@import url(global.css);
@import url(common.css);
@import url(sp.css?ver-20210428-00);
@import url(pc.css?ver-20210428-00);
クエリを付けることでブラウザは違うファイルと見なしてキャッシュを破棄して、再読み込みを行うようです
命名に規則は特にありませんが
?ver-20210428-00
「?ver-」+「日付-」+「バージョン」
がわかりやすいと思います。 TEST
画像の場合
<img src=”/common/images/sample.png”>
↓
<img src=”/common/images/sample.png?ver-20210428-00″>
参考サイト
- 「あ、それキャッシュですね。」とはもうオサラバ!パラメータでキャッシュをクリアしよう!
- ウェブサイト更新時のキャッシュ対策にファイルへのクエリパラメータを追加する
- ブラウザキャッシュはもう怖くない!きちんと更新されるキャッシュバスターの付け方
作業中のブラウザキャッシュの仕方(スーパーリロード)
- Google Chrome
Windows : Ctrl+F5/Shift+F5/Ctrl+Shift+R
Mac : command+R - Firefox
Windows :Ctrl+F5
Mac : command+Shift+R - Safari
Mac : command+R、Shift+更新ボタン - Microsoft Edge
Windows : Ctrl+F5 - Internet Explorer
Windows : Ctrl+F5