TEMAHIMA

Webデザイナーの寺岡幸雄の公式サイト「TEMAHIMA(てまひま)」

CSSが反映されない!?そんな時はCSSを強制読み込みさせる

CSSが反映されないのはキャッシュが残っている可能性が大きい

ホームページの修正依頼など、対応したのちクライアントから

「デザイン変わってないけど…」

と言われたことはありませんか?

こちらでは修正してオンライン上でも問題なく表示されているのに…。
そういう時はだいたいクライアント側でキャッシュが残っているのが原因です。

「スーパーリロードしてください」はちょっと問題あり

キャッシュが残っているということはクライアント(エンドユーザー)側でリロード、スーパーリロードを行えばおおよそ解決します。

だからと言って

「ああ、それはただのキャッシュですのでリロードしてもらえれば直りますよ。リロードの仕方はググってくださいね。」

みたいな対応だと

「いやいや、こっちは修正されたの知っているからいいけど、エンドユーザーはどうなるのか考えないの?」

と不安を感じることは想像に難くないですよね。「この人大丈夫?」って信用を失ってもおかしくありません。

CSSで強制的にリロードしよう!

jsで強制的にリロードさせることもできますが、毎回リロードさせると毎回読み込みに時間がかかってしまうので現実的ではありません。そこで、CSSによるリロードを行います。

CSS内の記述を変更するのではなく、「head」内のCSSのリンク先アドレスにちょっと記述を足すだけでリロードできます。

具体的にはCSSファイル名の後ろに「?」から始まる任意の数字を並べるだけです。CSSファイル名が「style.css」だった場合、「style.css?201908031」という感じです。

こうすることでブラウザに新しいCSSファイルだと認識させます。
一手間加えることで防げるトラブルなので、面倒くさがらずに対応しましょう。