CSS
簡単5秒！もう強制リロードなんていらない！CSSにクエリを追加してキャッシュをクリアにする方法
web制作をしていると、誰もが面倒に思う「キャッシュのクリア」。
エンジニアにとっても「ctrl + F5」や「ctrl + shift + R」で強制リロードは当たり前の作業になっていますよね。
ですが、web制作に携わる人ではないと強制リロードなんて知らない人の方がほとんどです。
それ故に…
- 依頼主に確認をお願いしたら古い装飾のままだと言われた
- お客様からページが変わらないとのお問い合が来る
なんてことが毎度毎度起こるのです。
そこで、今回はこんな面倒で誰得にもならないcssのキャッシュのクリアを、エンジニア側で超簡単にできてしまう方法をご紹介します！
実装方法
さっそく、実装方法をご説明します！
ずばり！
読み込んでいるスタイルの.cssの後ろに、「?1111(お好きな数字)」を入れるだけなんです！
ちなみにこのURLの末尾につける「？○○○」の文字列を「クエリ」と言います。
記述例は以下の通りです。
<link rel=“stylesheet” href=“style.css?200301”>お好きな数字と言ったのですが、実際の現場ではアップ日の日付だったり、日付+時間だったりするので、現場にあった数字を入れておきましょう！
上の記述では2020年の「20」と、そのまま3月1日の「0301」を連続して書いています。
このクエリの数字をアップ前に更新することにより、このスタイルシートが新しいものであると、ブラウザに認識させる事ができるため、強制リロードやキャッシュクリアをしなくても、最新のcssを読み込む事ができるのです。
このクエリの数字をわざわざ毎回手動で変えるのがめんどくさいと思う方や、忘れてしまいそうだなと思う方は、ぜひ下の記事を読んでみてください！
この記事では「自動」でクエリを更新するやり方をご紹介しています！
まとめ
いかがでしたでしょうか。
ぜひ、もっと簡単に「自動」でCSSのクエリを更新できる、あわせて読みたい記事も読んでみてくださいね！
