Webサイトを作っているみなさんは、こんな経験をしたことはありませんか？

・「CSSやJavascriptを変更したのに、何回ブラウザをリロード（更新）してもデザインが変わらない！」
・CSSやJavascript修正後、「反映されてなかったらキャッシュのせいだからページを再読み込みしてください」とクライアントに毎回伝えている･･･

私がこのキャッシュを読み込んじゃう問題の解決方法を知ったのは、恥ずかしながら結構最近です(^^;)
とても簡単な方法なので私にとってはとても画期的！でした（笑）
なので、知っている方も多いのではと思いますが、「キャッシュを読み込んでしまいCSSやJavascriptが反映されない！」みたいにならないようにする方法をご紹介します。

普通、HTMLでstyle.cssというファイル名のCSSファイルを読み込むとき、以下のように記述すると思います。
[html]<link type="text/css" rel="stylesheet" href="styles.css">[/html]

これを、以下のように「CSSのファイル名」のあとに「?適当な数字」を書きます。
[html]<link type="text/css" rel="stylesheet" href="styles.css?20180330">[/html]

Javascriptの場合も同じようにファイル名の後に「?適当な数字」を書きます。
[html]<link type="text/javascript" rel="stylesheet" href="javascript.js?20180330">[/html]

「適当な数字」は何でもいいみたいですが、変更した日時にしておくといいかなと思います。
更新するたびに「?」の後の数字を変えるだけで、ブラウザに新しいファイルという認識をさせて、キャッシュの影響を受けないようです。

今回のようにURLの一番最後に「?」記号を付け加えて続ける文字列を「クエリー（Query）」と呼ぶそうです。
CGI（WWWサーバーがプログラムを起動する際の起動方法を定めた仕様の名前）などのプログラムに指示を送る目的で使われています。

「でも、CSSを変更するたびに数字も書き換えるのって面倒！」
と思った方は、date()関数を使ったこんな方法もあるようです。
[html]<link type="text/css" rel="stylesheet" href="styles.css?<?php echo date(‘Ymd-Hi’); ?>">[/html]

?記号のあと、数字の変わりに以下を書きます。
[html]<?php echo date(‘Ymd-Hi’); ?>[/html]

こうすることで１分単位でCSSを新しく読み直してくれるようになりますが、キャッシュの意味がなくなってしまうので、この方法は、よく修正や更新をするCSSファイルやJavascriptファイル限定で使うのがよさそうです。
CSSを読み直す期間は、H（時間）やi（分）を消したりして調節します。