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

HTML
この記事は約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タイムスタンプは、毎秒ごとに変わるので、記述も少ないし便利です!

SNSフォローボタン
エンデ・バタローをフォローする
HTMLサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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