こんにちは。５歳に息子に「お母さんのどこが好き？」と聞いたら、
「丸いところ。」
と言われて複雑な気持ちになっている、アラフォーシンママの あき です。
今回は、キャッシュのおはなし。
CSSに変更を加えたのに、ブラウザで確認してもその変更が反映されない！そんな経験はありませんか？
- ・ブラウザの更新を何度もかけたが反応なし
- ・CSSの記述は間違っていない
- ・CSSの読込み先の指定も間違っていない。
なのに、なぜ・・・。
安心してください。このような状況は、WEBサイトの作成時にはよくあることです。解決方法として、まず最初にやってもらいたいことは、ブラウザの「キャッシュ」を疑うこと。
今回は、CSSの変更が反映されない時の原因として疑ってほしい「キャッシュ」についてと、そのキャッシュをクリアすることによってCSSの変更を今すぐ反映させる方法をご紹介します。
目次
キャッシュとは
キャッシュとは、ブラウザで表示させたWEBページの情報をパソコンに一時的に保存しておき、再度ブラウザに保存したデータを利用させる機能です。
簡単に言うと、一度見たことのあるページを高速で表示させるための技術です。
ブラウザでWEBページが表示される仕組みを簡単に説明すると、
- ユーザーがブラウザでURLを入力すると、ブラウザはそのURLを表示するようサーバーにリクエストを送信する。
- サーバーはブラウザからのリクエストを元に、ページを表示させるレスポンスを返す。
- サーバーから返ってきたれレスポンスを元に、ブラウザにWEBページが表示さる。
といった流れになります。
このように、サーバーにリクエストをして返ってきたデータを元にユーザーは目的のページを見ることができるのですが、ユーザーが何度も同じページを見るという事はよくありますよね。
その場合、前に見たのと同じページなのに毎回サーバーにリクエストを送るのは無駄な手間だと言えます。
そんな時が、キャッシュの出番です。
キャッシュのメリット
キャッシュを利用すると、一度見たページのデータは「閲覧履歴」としてパソコン上に一時的に保存されるので、再度同じページを表示させようとしたとき、わざわざ再度サーバーにリクエストを送るということはせず、手元のパソコンに保存された閲覧データを元に、ブラウザにページを表示させることができます。
このように、キャッシュを利用すれば、サーバーへのリクエストを送る手順を省くことができ、それによりWEBページの表示が高速になるというメリットがあります。
キャッシュのデメリット
そんな便利なキャッシュですが、デメリットもあります。
それは、サイトの制作者がCSSファイルなどに変更を加えた場合、変更したファイルをアップロードしていても、そのページを閲覧したことのあるユーザーのブラウザには以前のキャッシュが残っているため、変更前のページが表示されてしまうという点です。
まさにこれが、
「CSSを変更したのに、変更が反映されない！」
という状態ですね。
なぜキャッシュに古いデータが残ってしまうのか
キャッシュは、表示されたページのURLをもとにデータを保存します。
なので、そのページを表示させるためのファイルの中身が変更されていたとしても、ページのURL自体は変わらないので、新しいページだとは認識されず 以前見たのと同じページと認識されます。
それにより、変更前のページが表示されてしまうのですね。
キャッシュをクリアする方法
という事で、「CSSの変更が反映されない！」という場合は、まず初めにキャッシュを疑いましょう。
キャッシュは簡単に消去することができ、キャッシュを消去して新しいページを表示させることを「キャッシュクリア」すると言います。
キャッシュをクリアすれば最新のページが読み込まれます。
早速キャッシュをクリアして、CSSの変更を反映させましょう！
今回は、chromeブラウザでのキャッシュクリア方法をご説明します。
ショートカットキーのみでハード再読み込み
まずは、ショートカットキーで手軽に再読み込みをする方法です。
通常のリロード（再読み込み）で変更が反映されない場合は、キャッシュを使わず再読み込みする方法を試します。OSによりショートカットキーが異なります。
Windowsの場合 : Shift + F5
Mac の場合 : Shift + command + R
デベロッパーツールでスーパーリロード
上記の方法で変更が反映されない場合は、さらに強力な手を使います。
それが 「スーパーリロード」 と言われるものです。
スーパーリロードを行うためには、まずchromeのデベロッパーツールを開きましょう。
Windowsの場合 : F12
Mac の場合 : Option + command + I
このショートカットキーで開くことができます。
デベロッパーツールを開いた状態で、chromeの更新ボタンを右クリック、もしくは長押しすると、下図のようなメニューが表示されるので、
「キャッシュの消去とハードの再読み込み」 を選択します。
これでスーパーリロードは完了。とても簡単ですね！
設定メニューからの削除
ブラウザの設定メニューから、キャッシュクリアすることもできます。
デベロッパーツールに馴染みのない方 （例えば、WEB制作を依頼されたクライアント） にキャッシュクリアをお願いする時などは、この方法が良いかもしれません。
- URLバーから設定メニューをクリック
- その他ツール → 閲覧履歴を消去
- 消したい項目にチェックを入れ、閲覧データを消去するボタンをクリック
※CSSの変更を反映させたいだけなら、「キャッシュされた画像とファイル」にだけチェックを入れればOK。
簡単にキャッシュクリアできるchromeの拡張機能
Chromeの拡張機能には、ワンクリックでキャッシュをクリアしてくれる便利なものもあります。
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ja
頻繁にキャッシュクリアを行う方は、こういった機能を使うのも手軽で良いですね！
まとめ
いかがでしたでしょうか。
今回は、CSSで行った変更が反映されない時の対処法についてご紹介しました。
スーパーリロード、キャッシュクリア、chromeの拡張機能。どれも簡単に最新のページを表示させることができますので、ぜひ試してみてくださいね。
という事で、「お母さんが丸いって、どのへんが？」「ねえ、どのへん？」と
しつこく息子に問いただしている、アラフォーシンママの あき がお伝えしました。
