修正したCSSが反映されない!?強制的にキャッシュを再読み込みさせる方法

この記事は約2分で読めます。

ページデザインが完成してレスポンシブもばっちりと思って、提出すると「変わってないですが。。。」と言われてしまう。
キャッシュをクリアして再読み込みすればいいから「shift」を押して更新すれば良いじゃん!と思っちゃうけど、お客さんにひと手間加えさせるのは申し訳ないので、ちゃんとやっておこう!

HTML head内のCSSを読み込む時にファイル名の後ろにパラメータを追加するだけで
強制的にキャッシュクリアして読み込んでくれるから安心ね!
以下にサンプル用意してるのでコピペしてね!

HTML

// ファイル名の後ろに「?」と日付やバージョンなどを追加します
<link rel="stylesheet" href="style.css?20210110">
<link rel="stylesheet" href="style.css?var=01">

これで毎回、パラメータを変更して更新すればお客さんに指摘されることがないです!
でも、毎回パラメータを更新するのが面倒と思ったり更新するのを忘れちゃう心配がある時は、phpで現在の日付と時間を取得する方法もありますので、その方法もご紹介します。
phpを使う時はファイル名を「index.html」から「index.php」にしてくださいね!

PHP

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

これでパラメータにUNIXタイムスタンプを追加できます。
UNIXタイムスタンプは、毎秒ごとに変わるので、記述も少ないし便利です!

CSS
エンデ・バタロー

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました