見出し画像

CSS スタイル変更が反映されないとき

Chromeでlocal hostで開発中のページを確認しているとき、.cssファイルでのスタイル変更が反映されず、メインでコードを書いている.phpファイルに直接<style></style>のエリアを作って同じ内容を書くと反映される、という現象が何度かあった。

この現象の原因はキャッシュの削除がされないまま、前のページの記録を表示されていることにより起こる現象なので、以下の方法で解決できる。

方法1:開発者ツールで更新ボタンを右クリックし、キャッシュのクリアと更新をする。

英語表示でわかりずらいですが一番のものです

方法2:Chromeのシークレットモードで開く
シークレットモードはキャッシュクリアが自動で入るため。

方法3:echo dateというクエリをつける。

<link type="text/css" href="css/style.css?ver=1.0.1"/>
<link type="text/css" href="css/style.css?<?php echo date('YmdHis'); ?>"/>

HTMLの欄にある上のコードを下のコード'echo date'以降のものをつけると現在の状態に常に更新されるようになるので、開発者からクライアントへ渡した後、クライアントにわざわざ「キャッシュクリアしてください」とお願いしなくてもきちんと更新されるようになる。

この記事が気に入ったらサポートをしてみませんか?