サイトのデザイン変更が反映されない時の対策

HTML、CSSなどをイジっていて、デザイン変更したのに反映されない時がある。

サイトの情報がブラウザ(Google Chrome, Internet Explorer, Firefoxなど)にキャッシュされている時に、この現象が起こる。なぜブラウザがこのようなことするかというと、何度も同じサイトを閲覧するユーザーが毎回サイトの全ての情報を読み込むには時間がかかって非効率であるため、あらかじめブラウザに保存しておいてくれているのである。

対策としては、CSSを更新して「反映されていないな」と思ったときに、キャッシュを削除すればよい(あるいはキャッシュしない設定があるかもしれない)。以下にキャッシュの削除方法を記載する。

Google Chromeのキャッシュ削除方法

Chromeの場合、「Ctrl + Shift + Delete」(MacではCommand + Shift + delete)で以下のようなダイアログボックスが開く。赤枠で囲んだキャッシュにチェックを入れて、「閲覧データを消去する」のボタンをクリックすればよい。

Chromeのキャッシュを削除する方法

Internet Explorer 9のキャッシュ削除方法

Internet Explorer 9(以下IEと呼ぶ)の場合、ブラウザを開いた状態で、以下の写真に沿って進んでいけばよい。

1. 赤枠部分をクリックし、「インターネットオプション」をクリック
IEのキャッシュ削除方法 - step1

2. 赤枠の「削除」ボタンをクリック
IEのキャッシュ削除方法 - step2

3. インターネット一時ファイル部分にチェックを入れ、「削除」ボタンをクリック
IEのキャッシュ削除方法 - step3

以上。

その他のブラウザのキャッシュ削除方法

全てのブラウザについて方法を書いていてもキリがないので上記2つの削除方法でやめておく。実際にはIEやChromeも様々なバージョンがあるため、バージョンによって同じ方法でできるかも分からない。そのため、自分の使っているブラウザでキャッシュを削除する方法を知りたい場合、

ブラウザ名+バージョン キャッシュ 削除(もしくはクリア)

などで検索していただければと思う。具体的には

IE9 キャッシュ 削除

Chrome キャッシュ クリア

など。おそらく親切な方やブラウザの公式サイトで紹介されているだろう。

反映を確認する際には、サイトを更新することをお忘れなく。更新ボタンか、WindowsならF5キーで更新されますので。。。

関連記事

HTML5、CSSを用いた中央寄せのテンプレート
Chrome でユーザースタイルシートを設定する方法
button要素のデザインを変更する方法(HTML、CSS)

コメント

  • 単にデザインを変更してキャッシュを使わずにページを更新したいなら、Ctrl+F5でいいと思います。

    2014年9月9日 3:33 PM| アイチャコ

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/programming/990/trackback/