ページ内には広告が含まれます広告ポリシー
Webサイトのコーディングでスタイルシートを変更したとき、編集したはずのコードが反映されないことありませんか？この記事では、ChromeブラウザでよくあるCSSが反映されない問題の解決案を5種類まとめました。
問題の内容を確認
CSSの設定を行っていると頻繁に遭遇する「CSSが反映されない問題」。まずは問題の状況を確認します。
CSSファイルを編集・保存したのに見た目が変わらない場合、ブラウザが古いCSSを一時保存していることがあります。コード自体に問題がない場合は、まずChromeのキャッシュを削除して確認するのが基本です。
Chromeのキャッシュをクリアしよう
Chromeの設定を開く
キャッシュはChromeの設定画面から削除することができます。設定画面は、Chromeの右上にある設定ボタンを押して、「設定」を開きます。
設定画面を開いたら、その中の「プライバシーとセキュリティ」を選択し、次に「閲覧履歴データを削除」を選択します。
ポップアップが表示されるので、その中にある「キャッシュされた画像とファイル」にチェックを入れて、最後に「データを削除」を選択して完了です。
ブラウザを更新してCSSの反映を確認
保存されていたキャッシュの量にもよりますが、キャッシュの削除は概ね数秒で完了します。
クリアが完了したら、CSSを設定したブラウザのタブに戻り、更新してみましょう。無事CSSが反映されていれば成功です。そのまま続けてCSSの編集→更新すると基本的に即時に反映されますが、時間をあけて再度同じ事象が起きたら、もう1度同じ作業をすれば解決します。
それでもCSSが反映されないときの対処法
Chromeのキャッシュを削除しても反映されない場合は、次の方法も確認してみてください。
スーパーリロードを試す
通常の更新ではなく、キャッシュを無視してページを読み込み直す方法です。Windowsなら「Ctrl + F5」または「Ctrl + Shift + R」、Macなら「Command + Shift + R」を試します。
DevToolsを開いた状態でハード再読み込みする
Chromeの開発者ツールを開いた状態で、更新ボタンを長押しまたは右クリックすると、「ハード再読み込み」や「キャッシュの消去とハード再読み込み」を選べる場合があります。CSSだけがなかなか切り替わらないときに便利です。
DevToolsでキャッシュを無効化する
開発者ツールの「Network」タブにある「Disable cache」を有効にすると、DevToolsを開いている間はキャッシュを使わずに確認できます。CSSの調整を何度も繰り返すときは、この方法が便利です。
シークレットウィンドウで確認する
普段使っているタブだけ表示がおかしい場合は、シークレットウィンドウで同じページを開いて確認してみましょう。通常ウィンドウ側のキャッシュや拡張機能の影響かどうかを切り分けやすくなります。
CSSファイル自体が更新されているか確認する
ページではなく、CSSファイルの編集した内容が保存できているか確認します。CSSファイル自体が古いままなら、ブラウザのキャッシュではなく、アップロード先や読み込み先のCSSファイルが違っている可能性があります。
まとめ
CSSが反映されないときは、まずChromeのキャッシュ削除を試すのが基本です。それでも変わらない場合は、スーパーリロード、DevToolsでのキャッシュ無効化、シークレットウィンドウ、CSSファイルの直接確認を順番に試すと、原因を切り分けやすくなります。
