CSSを変更してF5キーを押しても時々変更されない場合があります。ブラウザにキャッシュ機能が働き、表示を高速化するためにCSSを読み込んでいない場合があるからです。そんな中確実にCSSファイルを読み込む方法をご紹介していきたいと思います。6月24日記事

目次





通常読み込み

通常はhead内に

<head> 
<link rel="stylesheet" type="text/css" href="css/style.css>
</head>

と記入していく方法が一般的だと思います。しかし、この方法では、ブラウザのキャッシュ機能が働き、毎回CSSを必ず読み込んでもらえない場合があります。

必ず読み込むためにファイル名のあとにパラメータをつける

.html環境下では

必ず読み込むためにファイル名のあとに?から始まるパラメータをつけると必ず読み込んでくれます。

<head> 
<link rel="stylesheet" type="text/css" href="css/style.css?id=1>
</head> 

?のあとにアルファベットと数字をこの形でつけると読み込んでくれます。クエリといいます。 しかし、この方法ではブラウザによってこのクエリもキャッシュにしてしまうものがあるかもしれないので、日時を加えた方法を書くのであれば、php環境下で次のように書きます。

.php環境下では

<head> 
<link rel="stylesheet" type="text/css" href="css/style.css?date=<?php date('YmdHis')?>">
</head> 

これなら現在の日時に変換してくれるので毎回パラメータの値が変わってくれます。 これでもできない場合はctrlキーを押しながら、F5キーを押しましょう。