1 【サイトトップ】>【その他】>【ホームページ作成】 2017 年 01 月 14 日 改訂：2017 年 03 月 25 日 改訂：2018 年 01 月 08 日 キャッシュを削除（クリア）して WEB サイトの表示を正常にする方法 － WEB サイトが正常に見られない場合の対応 － 柳川 行雄
内容
１ 最初に ... 2 （１）ホームページの表示の乱れ ... 2 （２）今回の表示の乱れの原因 ... 2 ２ キャッシュを削除して表示の乱れを正す具体的な方法 ... 4 （１）Google 社の Chrome ... 4（２）Microsoft 社の Internet Explorer ... 8
（３）Mozilla 社の Firefox ... 11
（４）Microsoft 社の Edge ... 15
（５）Opera Software ASA 社の Opera ... 18
（６）Apple 社の Safari ... 21
３ データをリロード（再読込み）して表示を更新する方法 ... 21
（１）Google 社の Chrome ... 22
（２）Microsoft 社の Internet Explorer ... 23
（３）Mozilla 社の Firefox ... 23
（４）Microsoft 社の Edge ... 24
（５）Opera Software ASA 社の Firefox ... 24
（６）Apple 社の Safari ... 25
2 １ 最初に （１）ホームページの表示の乱れ ホームページを閲覧しているとき、表示が乱れるという現象はしばしば発生 します。図1-1 は、「実務家のための産業保健のサイト」のトップサイトの表示 ですが、左側の正常な表示画面に対して、右側は大きく乱れていることがお分か りいただけると思います。これは、ホームページの表示方法を指定するためのフ ァイル（css ファイル）を修正したために起こった現象です。css ファイルを修 正することは、とくに個人のサイトではよくあり、この現象はサイト管理者の頭 痛の種となっています。 正常な表示 乱れた表示（例） 図1-1：正常な画像と表示が乱れた画像 また、WEB サイトを管理者が更新しても、ユーザーには元のままの状態が見 えていることがあります。この原因も、本質的には図1-1 の表示乱れと同様な原 因で発生します。 本稿では、これらの現象を回避するための方法ブラウザの種類ごとに、具体的 に解説します。 （２）今回の表示の乱れの原因 この項は、やや技術的な内容となりますので、必要なければ読み飛ばして、２ に進んで頂くようお願いします。
3
ホームページは、html ファイル、css ファイル、jpg ファイルなど、様々なフ ァイルから成り立っています。そして、これらのファイルで構成されるホームペ ージを閲覧するためのソフトは、ブラウザと呼ばれ、よく用いられるものとして は、Google 社の Chrome や Microsoft 社の Internet Explorer などがあり、 Windows10 では Edge が標準で添付されています。 ユーザーがあるホームページを（最初に）閲覧したとき、ブラウザはそのサイ トのファイルをキャッシュと呼ばれるエリアに保存します。次にユーザーがそ のサイトを閲覧しようとすると、実際のサイトを読みにいくのではなく、キャッ シュのファイルによって表示します1）。このようにするのは、実際のサイトを読 みに行くよりもキャッシュの方が速く読めるので、ホームページを高速に表示 できるようにするためです。 ところが、このようにすると、サイトの管理者がcss ファイルを修正したとき にも、ブラウザにはそのことは分からないため、キャッシュに保存された古い css ファイルを利用することとなります。css ファイルは、サイトをどのように 表示するかを定めているファイルなので、画面が正しく表示されないこととな るわけです。 この場合の問題を解決するためには、キャッシュに保存されているデータを 削除（クリア）すればよいわけです。キャッシュがクリアされれば、ブラウザは 実際のホームページを読みにいくので正常に表示されることになります。 なお、キャッシュに保存されたデータを削除すると、その後、一時的にWEB サイトの表示時間が遅れることがあります。しかし、最近は家庭でもブロードバ ンドを使用しているため、ほとんど問題となりません。つまり、キャッシュの内 容を削除してもとくに問題となるようなことはありません。 また、各サイトの内容等が更新されているときには新しい情報を読めるとい うメリットもあります。 ただし、各種の会員サイトや買い物サイトを閲覧している途中では、キャッシ ュを削除することは避けて下さい。再び、パスワードを要求されたり、それまで の買い物情報がクリアされたりすることがあるので注意が必要です。 1 実際には設定によります。設定によっては、閲覧するたびに、毎回、実際のサイトのフ ァイルを読み込むようにすることも可能です。ただ、当然のことながら読み込みに時間 がかかることになります。
4 ２ キャッシュを削除して表示の乱れを正す具体的な方法 以下にブラウザの種類ごとに、キャッシュを削除する方法をお示しします。た だし、設定によっては、必ずしも画面が同じになるとは限りませんが、それほど 大きな違いはないと思います。 （１）Google 社の Chrome Google 社の Chrome（ ）のキャッシュの削除は次のように行います。図 2-1-1 は Chrome で当サイトを立ち上げたところです。設定によっては、画面上部 の細かな表示は異なっていると思いますが、ここではあまり気にする必要はあ りません。 なお、以下のすべてのブラウザに関して、冒頭に当サイトを立ち上げた画像を お示ししていますが、当サイトを起動する必要はありません。どのサイトを表示 していても効果は同じとなります2。 図2-1-1：Chrome で当サイトを立ち上げたところ。 この画面で、右側の最上部にある、図2-1-2 の赤丸で示したアイコンをクリッ クしてください。 2 当サイトのキャッシュだけを削除することはできません。ここに紹介する操作ですべて のサイトのキャッシュが削除されますが、問題となるようなことはありません。 ここをクリック
5 図2-1-2：Chrome の右上の表示 そうすると、図2-1-3 のプルダウンメニューが現れますから、「設定（S）」を クリックしてください。 図2-1-3：プルダウンメニュー 図2-1-4 のような設定の画面が現れます。 ここをクリック 下にスクロール
6 図2-1-4：設定の画面 下の方にスクロールして、「詳細設定を表示…」をクリックします。なお、図 とは違って、実際の画面には青い枠は表示されません。 図2-1-5：詳細設定を表示… さらに下方向にスクロールして、「閲覧履歴データの消去…」をクリックしま す。 図2-1-6：プライバシー そうすると図 2-1-7 の「閲覧履歴のデータ削除」のウインドウが表示されま す。 ここをクリック ここをクリック
7 図2-1-7：削除する項目の選択 特に問題がなければ、キャッシュ等を削除する期間は、「すべて」を選択して ください。 図2-1-8：消去する期間の選択 次に、「キャッシュされた画像とファイル」のチェックボックスにチェックを 入れて選択します。なお、他のチェックボックスは必要に応じてチェックを入れ てください。入れなくても問題はありません。Cookie やパスワードのチェック を入れると、他のサイトを次に閲覧したときに、それまで求められなかったパス ワードを求められることがあるかもしれませんので留意してください。 図2-1-9：キャッシュされた画像とファイル 最後に図2-1-7 の右下にある「データを消去」のボタンをクリックすれば、キ ャッシュは消去されます。 ここを選択 ここをクリック ①ここをクリックして ②ここを選択
8 図2-1-10：キャッシュされた画像とファイル （２）Microsoft 社の Internet Explorer
Microsoft 社の Internet Explorer（ ／以下「IE」と略記します）で当サイト を立ち上げると図2-2-1 のようになります。 図2-2-1：IE で当サイトを立ち上げたところ。 この画面の右上にある、図2-2-2 のアイコンをクリックしてください。 図2-2-2：設定のアイコン そうすると、図2-2-3 のようなメニューが現れますので、「インターネットオ プション(O)」をクリックしてください。 ここをクリック
9 図2-2-3：設定のメニュー そうすると、インターネットオプションのウインドウが表示されます。 図2-2-4：インターネットオプション インターネットオプションの左上にある「全般」タブをクリックしてください。 図2-2-5：全般タブ ここをクリック ここをクリック
10 次に、インターネットオプションの下方にある「削除(D)…」をクリックしま す。 図2-2-6：削除(D)ボタン 閲覧履歴の削除のウインドウが表示されます。 図2-2-7：閲覧履歴の削除 「インターネット一時ファイルおよび WEB サイトのファイル(T)」のチェッ クボックスを選択してください。 図2-2-8：インターネット一時ファイル ここをクリック ここを選択
11 最後に図2-2-7 の右下にある「閲覧データを消去する」のボタンをクリックす れば、キャッシュは消去されます。 図2-2-9：削除ボタン （３）Mozilla 社の Firefox Mozilla 社の Firefox（ ）のキャッシュの削除は次のように行います。図 2-3-1 は Firefox で当サイトを立ち上げたところです。設定によっては、画面上部 の細かな表示は異なっていると思いますが、ここではあまり気にする必要はあ りません。 図2-3-1：Firefox で当サイトを立ち上げたところ。 この画面で、右側の最上部にある、図2-3-2 の赤丸で示したアイコンをクリッ クしてください。 図2-3-2：Firefox の右上の表示 ここをクリック ここをクリック
12 そうすると、図2-3-3 のメニューが現れますから、「オプション」をクリック してください。 図2-3-3：メニュー 図2-3-4 のようなオプションの画面が現れます。 図2-3-4：オプションの画面 ここをクリック
13 左側のメニューにある「プライバシーとセキュリティ」をクリックします。 図2-3-5：オプション画面左側のメニュー プライバシーの画面に切替わります。 図2-3-6：ブラウザープライバシー画面 画面の中ほどにある「現在の履歴をすべて消去」の文字をクリックします。な お、実際の画面では図2-3-7 とは異なり、青い枠はありません。 図2-3-7：現在の履歴をすべて消去 そうすると図2-3-8 の「すべての閲覧を消去」のウインドウが表示されます。 ここをクリック ここをクリック
14 図2-3-8：すべての閲覧を消去 特に問題がなければ、消去する期間は「すべての履歴」を選択してください。 図2-3-9：消去する履歴の期間 次に「キャッシュ」のチェック ボックスにチェックを入れて選択します。なお、他のチェックボックスは必要に 応じてチェックを入れてください。入れなくても問題はありません。Cookie に チェックを入れると、他のサイトを次に閲覧したときに、それまで求められなか ったパスワードを求められることがあるかもしれませんので留意してください。 図2-3-10：キャッシュ 最後に図2-3-8 の右下にある「今すぐ消去」のボタンをクリックすれば、キャ ッシュは消去されます。 ここを選択
15 図2-3-11：今すぐ消去 （４）Microsoft 社の Edge Microsoft 社の Edge（ ）のキャッシュの削除は次のように行います。図 2-4-1 は Edge で当サイトを立ち上げたところです。設定によっては、画面上部の 細かな表示は異なっていると思いますが、ここではあまり気にする必要はあり ません。 図2-4-1：Edge で当サイトを立ち上げたところ。 この画面で、右側の最上部にある、図2-4-2 の赤丸で示したアイコンをクリッ クしてください。 図2-4-2：Edge の右上の表示 そうすると、図2-4-3 のメニューが現れますから、「設定」をクリックしてく ださい。 ここをクリック ここをクリック
16 図2-4-3：メニュー 図2-4-4 のように右側に設定のメニューが現れます。 図2-4-4：設定の画面（右側） メニューの閲覧データのクリアにある「クリアするデータの選択」をクリック ここをクリック
17 します。 図2-4-5：設定のメニュー 画面右側に「閲覧データのクリア」のメニューが現れます。 図2-4-6：閲覧データのクリア画面 ここをクリック
18 ここで、「キャッシュされたデータとファイル」のチェックボックスを選択し ます。 図2-4-7：キャッシュされたデータとファイル 最後に図2-4-8 の中ほどにある「クリア」のボタンをクリックすれば、キャッ シュは消去されます。 図2-4-8：クリア
（５）Opera Software ASA社のOpera
Opera Software ASA社3）のOpera（ ）のキャッシュの削除は次のように行 います。図2-5-1 は Firefox で当サイトを立ち上げたところです。設定によって は、画面上部の細かな表示は異なっていると思いますが、ここではあまり気にす る必要はありません。
図2-5-1：Opera で当サイトを立ち上げたところ。
3 Opera は 2016 年に奇虎 360 社に売却されている。Opera Software ASA 社は Opera を開発した会社である。
ここを選択
19 この画面で、最上部の左端にある「メニュー」、図2-5-2 の赤丸で示したとこ ろをクリックしてください。 図2-5-2：Opera の左上表示 そうすると、図2-3-3 のメニューが現れますから、「履歴(H)」にマウスカーソ ルを合わせます。 図2-5-3：メニュー サブメニューの「閲覧データの消去」をクリックします。 図2-5-4：サブメニュー ここをクリック ここにマウスカーソルを合わせる ここをクリック
20 そうすると図2-5-5 の「閲覧データを消去」のウインドウが表示されます。 図2-5-5：閲覧データを消去 特に問題がなければ、消去する期間は「すべての期間」を選んでください。 図2-5-6：消去する期間 「キャッシュされた画像およびファイル」のチェックボックスにチェックを入 れて選択します。なお、他のチェックボックスは必要に応じてチェックを入れて ください。入れなくても問題はありません。Cookie にチェックを入れると、他 のサイトを次に閲覧したときに、それまで求められなかったパスワードを求め られることがあるかもしれませんので留意してください。 図2-5-7：キャッシュされた画像およびファイル ここを選択
21 最後に図 2-5-5 の右下にある「閲覧データを消去」のボタンをクリックすれ ば、キャッシュは消去されます。 図2-5-8：閲覧データを消去 （６）Apple 社の Safari
Apple 社の Safari は MAC 用のブラウザです。私は MAC を保有していない ので実際に試したわけではありませんが、履歴とキャッシュの削除は簡単にで きるようになっています。具体的には、以下の方法でキャッシュをクリアできる はずです。 ① メニューバーに「履歴」を選択する。 ② 表れるメニューの一番下に「履歴を消去…」があるので、これをクリックす る。 また、キャッシュだけを削除したいという場合は次の方法で可能です。 ① メニューバーの「Safari」を選択する。 ② 表れるメニューの「環境設定…」をクリックする。 ③ 「環境設定画面」が表示されるので、「詳細」タブをクリックする。 ④ 「メニューバーに“開発”メニューを表示」のチェックボックスをチェック する。 ⑤ メニューバーに「開発」が表示されるので、これをクリックする。 ⑥ 「キャッシュを空にする」というメニューが表示されるので、これをクリッ クする。 ３ データをリロード（再読込み）して表示を更新する方法 私の「実務家のための産業保健のサイト」では、基本的にコンテンツはpdf フ ァイルで掲示しています。pdf ファイルは、適宜、更新していますが、更新した ファイルは元のファイルを上書き保存しています。 ここをクリック
22 ところが、前に元のpdf ファイルを閲覧していると、ブラウザはそのファイル をキャッシュに保存しておき、再び、そのpdf ファイルを閲覧したときには、保 存されたファイルを表示します4。これは、pdf ファイルに限らず、ホームページ の本体部分である html ファイルや png ファイルなどの画像データについても 同じです。 このため、私がhtml ファイルや pdf ファイルや更新しても、ブラウザには更 新されていることは分かりませんから、元の旧ファイルを表示することとなり ます。そこで、ブラウザの種類ごとに、新しいデータをリロード（再読込み）す る方法を以下にお示しします。
なお、Microsoft 社の Internet Explorer を除けば、ここでお示しする方法で リロードされるのは、そのときに閲覧しているページのデータだけで、他のペー ジや他のサイトのデータが更新されるわけではありません。 （１）Google 社の Chrome Chrome の表示画面は図 3-1-1 のようになっています。 図3-1-1：Chrome で当サイトを表示したところ。 画面の左上にある、図3-1-2 の赤で囲んであるアイコンをクリックしてくださ い。右側のホームのアイコンは設定によっては表示されていないと思いますが、 気にする必要はありません。これでページは最新のものに切替わります。 4 これは設定によります。
23 図3-1-2：Chrome でデータをリロードする。
（２）Microsoft 社の Internet Explorer
Microsoft 社の Internet Explorer でデータをリロードする方法は２に示した キャッシュを削除する方法と同じです。この方法では、その後に閲覧するすべて のページが最新のものとなります。 （３）Mozilla 社の Firefox Firefox の表示画面は図 3-1-1 のようになっています。 図3-3-1：Firefox で当サイトを表示したところ。 画面の上中央付近にある、検索ボックスの右側の図3-1-2 の赤で囲んであるア イコンをクリックしてください。これでページは最新のものに切替わります。 図3-3-2：Firefox でデータをリロードする。 ここをクリック ここをクリック
24 （４）Microsoft 社の Edge Microsoft 社の Edge の表示画面は図 3-1-1 のようになっています。 図3-4-1：Edge で当サイトを表示したところ。 画面の左上にある、図3-1-2 の赤で囲んであるアイコンをクリックしてくださ い。これでページは最新のものに切替わります。 図3-4-2：Edge でデータをリロードする。
（５）Opera Software ASA社のFirefox
Opera software 社の Opera の表示画面は図 3-5-1 のようになっています。 ここをクリック
25 図3-5-1：Opera で当サイトを表示したところ。 画面の左上にある、図3-5-2 の赤で囲んであるアイコンをクリックしてくださ い。これでページは最新のものに切替わります。 図3-5-2：Opera でデータをリロードする。 （６）Apple 社の Safari Apple 社の Safari でデータをリロードする方法は２に示したキャッシュを 削除する方法と同じです。この方法では、その後に閲覧するすべてのページが最 新のものとなります。 ４ 最後に 2017 年に入ってから、私のサイトで、トップページのメニューを「CSS だけ で作る「多階層」なドロップダウンメニュー」を参考にさせて頂いて、ドロップ ダウン方式に切り替えたことを始めとして、様々に変更してきました。 詳細は、「ホームページ作成入門② 本サイトの大改修の記録」に記載してあり ます。このとき、css ファイルを大きく修正しています。ところが、ユーザーの ここをクリック
26 側でファイルのキャッシュをクリアして頂かないと、ブラウザで表示したとき 画面が乱れることになります。 実は、ホームページ側で対応することも不可能ではありません。そのひとつは css ファイルの場所か名称を変更してしまえば、ブラウザは新しい css ファイル を読むため、画面が正常に表示されます。 また、html 側でユーザーにキャッシュを保存させないような設定をすること も可能なのですが、いずれも一長一短があり、根源的な解決とはなりません。そ こで、それぞれのブラウザについてキャッシュをクリアする方法を紹介しまし た。 この資料は「実務家のための産業保健のサイト」に掲示されています。よろしけ ればサイトの方にもご訪問ください。
