こんにちは、かつコーチです。
CSSを修正してブラウザを更新したのに、見た目が変わらない。
そんな経験は誰にでもあります。
「とりあえずキャッシュを消せばいい」と聞いて設定画面を開くと、項目が多くて戸惑いますよね。
今日は、CSS未反映を直すために本当に消すべき項目はどれか、結論から解説します。
結論：まずこれをやればいい
Chromeの「閲覧履歴を消去」画面には7つの項目があります。
CSSが反映されない問題を直したいだけなら、消すのはキャッシュされた画像とファイルの1つだけで十分です。
手順は、Chromeの設定 → プライバシーとセキュリティ → 閲覧履歴データの削除、から開けます。
期間は「1時間」で十分なことが多いです（直近の作業のキャッシュだけ消せればいいため）。
チェックは「キャッシュされた画像とファイル」だけに入れて、他は外したまま削除しましょう。
なぜそれで解決するのか（簡単な仕組みの補足）
キャッシュとは、一度読み込んだCSSや画像、JavaScriptなどのファイルを、ブラウザが手元に一時保存しておく仕組みです。
次回以降のアクセスを速くするための仕組みなので、便利な反面、サーバー側でファイルを更新しても古いキャッシュが優先されてしまうことがあります。
これがCSS未反映の主な原因です。
「キャッシュされた画像とファイル」を消すと、この一時保存分だけがクリアされ、次に読み込むときは必ずサーバーから最新のCSSを取りに行くようになります。
あわせて知っておきたいこと（関連Tips・注意点）
他の6項目についても簡単に触れておきます。
- 閲覧履歴：訪れたサイトのURL一覧。消してもCSS反映には無関係です。
- Cookieと他のサイトデータ：ログイン状態やカート情報などを保持する仕組み。消すとログアウトされる副作用があるので注意してください。
- ホストされているアプリデータ：Webアプリがオフライン用に保存するデータです。
- ダウンロード履歴：ダウンロードしたファイルの記録一覧です。
- 自動入力フォームのデータ：住所やメールアドレスなど入力補完の情報です。
- サイトの設定：通知許可やカメラ許可などサイトごとの権限設定です。
これらはCSSの表示とは関係がないので、CSSを直したいだけなのに全部にチェックを入れて削除すると、ログイン情報や入力履歴まで消えてしまい、思わぬ手間が増えます。
目的に応じて必要な項目だけを選ぶ、という判断軸を持っておくと安心です。
まとめ
- CSS未反映を直すなら「キャッシュされた画像とファイル」だけ消せば十分
- 「Cookieと他のサイトデータ」を消すとログイン状態が切れるので注意
- 期間は「1時間」で十分なケースが多い
次は、設定画面を開かずにもっと手軽にキャッシュをクリアする方法を紹介します。
更新ボタンを長押し・右クリックするだけでキャッシュをクリアする方法もあわせてご覧ください。
タグ: Chrome / 初心者向け / 実践Tips
コメント