CSS変更が反映されなければブラウザのキャッシュを消してみる

WordPressなどでCSSをいじった後、そのページを表示してみるとカスタマイズしたはずのスタイルが反映されていないことってないでしょうか?

これには原因があって、その1つとしてありがちなのがブラウザのキャッシュです。

キャッシュを消してしまえばCSSのカスタマイズがページに反映されます。CSSをいじる作業では必須の知識ですから、消す方法をしっかり覚えておきましょう。

キャッシュでCSSが反映されない理由

キャッシュとは、ブラウザでウェブサイトを表示したときページのデータをパソコンやスマホ本体に記憶しておく機能のことです。

データを記憶しておくと2回目以降同じウェブサイトを閲覧する際、いちいちネット回線経由でデータを受け取らなくても、前にパソコンが記憶しておいたデータを引っ張り出すだけで済みます。ウェブサイトの表示速度を上げるメリットがあるんですね。

ただ、記憶したキャッシュの中身はあくまでも過去に閲覧したウェブサイトのデータでしかありません。

CSSをいじった後の該当ページは最新のデータに切り替わりますが、パソコンやスマホが持っているのは古いウェブサイトのデータなので、表示されるウェブサイトの見た目も当然、以前のCSSのままになってしまいます。

スポンサーリンク

ブラウザのキャッシュを消す方法

ブラウザにはキャッシュを削除する設定が用意されています。消した後に該当ページを表示(再読込)すると最新のデータで閲覧できるようになり、カスタマイズしたCSSが反映されます。

ここではWindowsで利用者の多い、各ブラウザごとのキャッシュの消し方をご紹介します。

【Cookieも削除すべき?】

キャッシュを消す設定の中に「Cookie」の項目をよく見かけますが、これは消さないほうが良いと思います。Cookieにはログイン情報やウェブサイトの利用状態を維持するといった便利な機能が備わっているため、消さずに残すのがおすすめです。

Google Chromeの場合

ブラウザの画面右上付近にある設定アイコンをクリックして、メニューから「設定」を選びます。

GoogleChrome 設定

設定の画面を下へ移動すると「詳細設定」という文字があるので、そこをクリック。

詳細設定内の「プライバシーとセキュリティ」という項目の中から、「閲覧履歴データを消去する」を見つけましょう。

GoogleChrome 閲覧履歴データを消去する

いろんな項目が表示されます。上の部分にある「基本」と「詳細設定」についてはどちらを選んでも構いません。期間を「全期間」にします。

GoogleChrome 閲覧履歴データを消去する期間 全期間

続いて、「キャッシュされた画像とファイル」の項目をチェック。

GoogleChrome キャッシュされた画像とファイルにチェック

最後に「データを消去」のボタンをクリックして画面を閉じてください。これで完了です。

Microsoft Edgeの場合

ブラウザの画面右上からメニューを呼び出し、「設定」を選びます。

Microsoft Edge 設定

閲覧データのクリアという項目の「クリアするデータの選択」のボタンをクリック。

Microsoft Edge 閲覧データのクリア クリアするデータの選択

キャッシュされたデータとファイル」の項目にチェックを入れ、クリアのボタンを押したら完了です。(下の画像ではチェックを入れていますが、Cookieは消さないほうが良いと思います。

Microsoft Edge 閲覧データのクリア キャッシュされたデータとファイルにチェック

Fire Foxの場合

ブラウザの画面右上からメニューを呼び出し、「オプション」を選択します。

Fire Fox オプション

メニューから「プライバシーとセキュリティ」を選び、その画面内の「Cookieとサイトデータ」の項目にある「データを消去」のボタンをクリック。

Fire Fox プライバシーとセキュリティ データを消去

「Cookieとサイトデータ」の項目はチェックを外し、「ウェブコンテンツのキャッシュ」の項目のみチェックを入れて「消去」のボタンを押せば完了です。

Fire Fox データを消去 ウェブコンテンツのキャッシュをチェック

Fire Foxにはもう1つ別のやり方があります。

メニューから「プライバシーとセキュリティ」を選び、「履歴」の部分にある「履歴を消去」というボタンをクリック。

Fire Fox プライバシーとセキュリティ 履歴を消去

消去する履歴の期間を「すべての履歴」にして、キャッシュにチェックを入れます。(下の画像ではチェックを入れていますが、現在のログイン情報とCookieは消さないほうが良いと思います。

Fire Fox 消去する履歴の期間を全期間に キャッシュをチェック

最後に「今すぐ消去」のボタンを押せば完了です。

Internet Explorer 11の場合

ブラウザの画面右上にある歯車アイコンから、「インターネットオプション」をクリック。

Internet Explorer 11 インターネットオプション

全般」の画面にある「閲覧の履歴」の項目から「削除」のボタンを選びます。

Internet Explorer 11 インターネットオプションの全般 閲覧の履歴 削除

「お気に入りWebサイトデータを保持する」と「クッキーとWebサイトデータ」のチェックを外し、「インターネット一時ファイルおよびWebサイトのファイル」にチェックを入れ、「削除」のボタンをクリックすれば完了です。

Internet Explorer 11 インターネット一時ファイルおよびWebサイトのファイルをチェック

スマホのキャッシュを消すには?

スマホやタブレットのブラウザアプリもパソコン同様、キャッシュの影響を受けます。Google ChromeとSafariのキャッシュを消す方法について解説します。

Google Chromeの場合

アプリを起動し、メニューの「設定」を選びます。

GoogleChromeアプリ 設定

プライバシー」を選んだ先の「閲覧履歴の消去」という部分をタップし、「キャッシュされた画像とファイル」にチェックを入れます。最後に「閲覧履歴の消去」をタップして完了です。

GoogleChromeアプリ 閲覧履歴の消去 キャッシュされた画像とファイルをチェック

Safariの場合

iPhoneで説明します。Safariのアプリではなく、スマホの設定アプリを起動します。

画面をスクロールしてSafariを見つけましょう。

iPhone 設定アプリ Safariを選択

次にあらわれる画面内に「履歴とWebサイトデータを消去」という項目があります。そこを選択して「履歴とデータを消去」でキャッシュを消すことができます。しかし、この方法だとキャッシュだけでなくCookieやWebサイトデータもすべて消してしまうので、記憶しておきたい機能を維持できないのが厄介です

そこで、CSSをカスタマイズした該当サイトだけピンポイントにデータを消去する方法でやってみることにしましょう。

iPhoneの設定アプリを起動してSafariを選び、「詳細」の項目をタップ。

iPhone 設定アプリ Safariの詳細

Webサイトデータ」を選択すると、訪れたことのあるウェブサイトのアドレスがずらりと並んだ画面があらわれます。この画面右上の「編集」をタップ。

すると、アドレスの横にマイナスのアイコンが出ます。CSSをカスタマイズしたサイトアドレスのマイナスアイコンをタップしましょう。

iPhone 設定アプリ SafariのWebサイトデータ一覧

削除」の文字が出ますので、そこを押せば完了です。

このとき、一覧の中に該当サイトのアドレスが無い場合、「すべてのサイトを表示」を選んでみてください。さらに多くのサイトアドレスが表示されますので、その中から該当アドレスを見つけましょう。

Safariだと消したいデータを細かく選べないのが不便ですね。Chromeならキャッシュだけを消せます。

ブラウザのキャッシュを消したら画面を再読込

上の方法でブラウザのキャッシュを消した後、CSSを反映させたいウェブサイトを表示させて再読込してみましょう。ブラウザ自体を一旦閉じ、再起動しても構いません。カスタマイズしたCSSが反映されているはずです。

それでもCSSが反映されなかったら?

CSSの記述を間違えている可能性が濃厚です。

「文字を打ち間違えていないか?タグの閉じ忘れはないか?」などをチェックして、正しい内容に書き直してから画面を再読込してみてください。