問題
PHPやGo言語でアプリを作成している際にCSSを変更したはずが、ブラウザ画面を確認してみるとCSSが反映されていないという事態が起きました。
半日くらい経てば、CSSが反映されるという事も・・・
考えられる原因
調べたところ、反映されない原因が4つほど紹介されていました。
- キャッシュに残っていたページのCSSで表示されている
- CSSで指定したスタイルの優先順位が低い
- CSSの記述ミス
- CSSが上手く読み込めていない（パスが間違っているなど）
この中でも、１番のキャッシュが原因だった場合の対処法と反映されなかった理由を解説していきます。
参考URL(キャッシュ):キャッシュとは？Webサイト高速化にかかせない機能をご紹介！
参考URL:CSSが反映されない時にチェックすべき5つのポイントと解決方法
環境
環境は以下のようになります。
PC: M2 MacBook Air
ブラウザ: Chrome
対処法
キャッシュが問題の場合は解決する方法として、残ったキャッシュを破棄して最新のデータを読み込むスーパーリロードを使うと解決出来るようです。
スーパリロードの方法はWindowsとMacで異なっており
Windows：CtrlキーとF5キーを同時押し
Mac ：commandキーとshiftキーとRキーを同時押し
になります。
ショートカットキーを使わない方法もあります。
URL → CSSが反映されない時の原因と対処法を5つ紹介！わかりやすく解説！
キャッシュとは？
ブラウザが一度表示したWebページのデータを保存しておき、次回以降 同じページを表示する際に、あらかじめ保存しておいたデータを使うことにより、一度目より素早く表示してくれる仕組みのことです。
反映されなかった原因
今回の場合はリクエストを送った際に、キャッシュの機能によって保存されていたページが返されていたため、反映させたいCSSを含んだページが上手く反映されない事が原因でした。
また、半日くらい経ってからCSSが反映された理由は、半日が経つまでに色々な操作をした事により、新しいキャッシュとして最新のページ（反映させたいページ）が追加され、古いキャッシュとして過去のページ（キャッシュにあったページ）が消去されたためだと考えられます。
キャッシュの設定を変える
html上でキャッシュ自体の設定を変更する事も出来るようです。
方法は簡単で一行のmetaタグをheadタグ内に追加するだけです。
例えば、
1.キャッシュの無効化
クライアントのリクエストやサーバーのレスポンスについて、キャッシュに何も保存しないように設定できる。
<meta http-equiv="Cache-Control" content="no-store">
2.キャッシュの検証
キャッシュした複製を渡す前に検証をさせるために、生成元のサーバーにリクエストを送信するよう設定できる。
<meta http-equiv="Cache-Control" content="no-cache">
3.キャッシュの期限設定
この要素で指定した日時、または秒数後に、ブラウザのキャッシュから文書の情報を消去するよう設定できる。
<meta http-equiv="Expires" content="86400">
この例では、contentに"86400"は86400秒の事を指し、24時間後にキャッシュを削除する事を表しています。
これらを使えば 今回のような問題を起こさない事、キャッシュの設定をきちんと行った上での対応を取る事ができ、より便利になるのではないかとも思います。
参考URL:【HTML】常に最新の情報を表示するためにもキャッシュを無効にしよう※デメリットも解説