【CSS】CSSを適用しても、ページに反映されないときの対処法

CSS修正して、適用しているのに、ページのレイアウトやいろが変わらないなぁ
僕も最初はこれに悩まされました・・・。
ただ、原因に気がついてみれば、めちゃくちゃ簡単に解消できました。
今回はその方法をご紹介します。

CSSが適用されない原因はキャッシュがブラウザに残っている

Google Chrome や Firefoxといったブラウザには、「キャッシュ」という機能があります。

これは、次回同じサイトを開いたときに読み込む時間を短縮するために、そのサイトの画像や色などのレイアウトの情報を、パソコンに一定期間保管しておく、というものです。

つまり、CSSを適用しても、ページに反映されない場合は、前回そのページにアクセスした際のキャッシュが、使用しているパソコンに残っていることが原因であることが多いです。

 

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

Google Chromeの右上に点が縦に3つ並んだアイコンがあるので、これをクリックします。

点々

 

 

表示された中から「設定」をクリックします。

設定

 

 

設定画面を一番下までスクロールすると、「詳細設定」という項目が表示されるので、クリックします。

詳細設定

 

 

「プライバシーとセキュリティ」という欄に、「閲覧履歴データの削除」がありますので、クリックします。

閲覧履歴の削除

 

 

「キャッシュされた画像とファイル」にチェックを付け、「データを削除」ボタンをクリックします。

データが多いと少々時間がかかります。

キャッシュされた画像とファイル

 

以上で、キャッシュの削除が完了です。

CSSを適用したページを読み込み直してみてください。

修正した内容がページに反映されていればOKです!

 

 

Firefoxのキャッシュ削除方法

Firefoxを開いて、右上に表示される横棒3本のアイコンをクリックします。

メニュー

 

「オプション」をクリックします。

オプション

 

 

オプション画面の左側の「プライバシーとセキュリティ」をクリックします。

プライバシーとセキュリティ

 

 

「Cookieとサイトデータ」という項目の「データを消去」ボタンをクリックします。

データ消去

 

 

「ウェブコンテンツのキャッシュ」にチェックを付け、「消去」ボタンをクリックします。

データが多い場合は、少々時間がかかります。

キャッシュ削除

 

以上で、Firefoxのキャッシュ削除は完了です。

CSSを適用したページを読み込み直してみてください。

修正した内容がページに反映されていればOKです!

 

 

まとめ:CSSが反映されない場合は、キャッシュを削除しよう!

いかがでしたか?

CSSが適用されない場合は、自分のCSSの記述の良し悪しを疑う前に、まずキャッシュを削除して、何が悪いか切り分けてみてくださいね!

 

 

アイキャッチ
最新情報をチェックしよう!