CSSが適用されない原因はキャッシュがブラウザに残っている
Google Chrome や Firefoxといったブラウザには、「キャッシュ」という機能があります。
これは、次回同じサイトを開いたときに読み込む時間を短縮するために、そのサイトの画像や色などのレイアウトの情報を、パソコンに一定期間保管しておく、というものです。
つまり、CSSを適用しても、ページに反映されない場合は、前回そのページにアクセスした際のキャッシュが、使用しているパソコンに残っていることが原因であることが多いです。
Google Chromeのキャッシュ削除方法
Google Chromeの右上に点が縦に3つ並んだアイコンがあるので、これをクリックします。
表示された中から「設定」をクリックします。
設定画面を一番下までスクロールすると、「詳細設定」という項目が表示されるので、クリックします。
「プライバシーとセキュリティ」という欄に、「閲覧履歴データの削除」がありますので、クリックします。
「キャッシュされた画像とファイル」にチェックを付け、「データを削除」ボタンをクリックします。
データが多いと少々時間がかかります。
以上で、キャッシュの削除が完了です。
CSSを適用したページを読み込み直してみてください。
修正した内容がページに反映されていればOKです！
Firefoxのキャッシュ削除方法
Firefoxを開いて、右上に表示される横棒3本のアイコンをクリックします。
「オプション」をクリックします。
オプション画面の左側の「プライバシーとセキュリティ」をクリックします。
「Cookieとサイトデータ」という項目の「データを消去」ボタンをクリックします。
「ウェブコンテンツのキャッシュ」にチェックを付け、「消去」ボタンをクリックします。
データが多い場合は、少々時間がかかります。
以上で、Firefoxのキャッシュ削除は完了です。
CSSを適用したページを読み込み直してみてください。
修正した内容がページに反映されていればOKです！
まとめ：CSSが反映されない場合は、キャッシュを削除しよう！
いかがでしたか？
CSSが適用されない場合は、自分のCSSの記述の良し悪しを疑う前に、まずキャッシュを削除して、何が悪いか切り分けてみてくださいね！