今回は、CSSに変更を加えたのに、ブラウザで確認してもその変更が反映されない！
そんな経験はありませんか？

・ブラウザの更新を何度もかけたが反応なし
・CSSの記述は間違っていない
・CSSの読み込み先の指定も間違っていない

なのに、なぜ？
安心してください。このような状況は、WEBサイトの作成時にはよくあることです。
解決方法として、最初にしていただきたいのは、ブラウザの「キャッシュ」に古いデータが残っていないかを疑うこと。
今回は、CSSの変更が反映されないときの原因にありがちな「キャッシュ」についてと、キャッシュをクリアすることによってCSSの変更を今すぐ反映させる方法をご紹介します。

■キャッシュとは

キャッシュとは、ブラウザで表示させたWEBページの情報をパソコンに一時的に保存しておき、再度ブラウザに保存したデータを利用させる機能です。
簡単に言うと、一度見たことのあるページを高速で表示させるための技術です。
また、ブラウザでWebページが表示される仕組みは、

1.  ユーザーがブラウザでURLを入力すると、ブラウザはそのURLを表示するようサーバーにリクエストを送信する。
2.  サーバーはブラウザからのリクエストを元に、ページを表示させるレスポンスを返す。
3.  サーバーから返ってきたレスポンスを元に、ブラウザに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制作を依頼されたクライアント） にキャッシュクリアをお願いする時などは、この方法が良いかもしれません。

1.  画面右上の 「」をクリックする
2. その他ツール　→　閲覧履歴を消去
3. 消したい項目にチェックを入れ、閲覧データを消去するボタンをクリック
※CSSの変更を反映させたいだけなら、「キャッシュされた画像とファイル」にだけチェックを入れればOK。

いかがでしたでしょうか？
今回は、CSSで行った変更が反映されない時の対処法についてご紹介しました。
キャッシュクリア、スーパーリロード、設定メニューからの削除。
どれも簡単に最新のページを表示させることができますので、ぜひ試してみてください。

【この記事のライター】
Satoru Osada
株式会社エー・エム・ティー　Front-end Engineea

この記事を読んで、Web制作に関するお悩みやご要望をお持ちの方はいませんか？
私たちは、Web制作のプロフェッショナルとして、お客様のニーズに応えるWebサイト制作から運用サポートまでをお手伝いします。
高品質かつコストパフォーマンスの高いWeb制作を得意とする私たちにお任せください。
詳細は、このページの下の方にあるリンクからお問い合わせください。
ご連絡をお待ちしています。