CSS変更が反映されない時に試してほしい方法。ブラウザのキャッシュを削除したくない時におすすめ!

こんにちは、ルカ(@RUKAv2)です😊
昨日、別のサイトのフォントを変えようと思ったら、なかなかCSSが反映されなくてとっても苦労しました💦
わたしはいつもデザインの変更が反映されない時は、以下のことを見直すようにしています。

  1. CSSのコード間違い
  2. キャッシュが残っていないかどうか
CSSは、全角スペースが入っていないかどうか、とじカッコを忘れていないかどうかなどに気をつけて見直します。
どこかからコピペしてきたコードなどは特に全角スペースが入ってしまうことがあるので、一度詰めてからもう一度半角スペースを入れたりします。
で、昨日はこっちを見直して問題なさそうだったのと、検証(デペロッパーツール)でCSS自体が読み込まれていないことがわかったことから、2番について考えました。
CSS自体が読み込まれていないかどうかは、変わってほしいところにカーソルを当て、右クリックで検証、右側の画面でCSSの箇所を見つけて、該当するコードがあるかないかで変わります。
今回は、読み込まれているフォントが以前のもの(もうCSSには書いていないやつ)だったので、
ルカ
これはコードの間違いじゃなくて、コード自体が読み込まれていないやつだ!
と気付き、キャッシュについての解決策を探しました。
また、他のブラウザできちんと表示されていればこれもキャッシュの問題なので、safariなどの他のブラウザで見たり(わたしは普段chromeを使っています)、他の人のPCやスマホから確認してみてもいいと思います。
以前は何回かリロード(更新)すれば読み込まれていたのですが、今回はどんなに頑張ってもフォントが変わらなくて焦りました。
履歴からキャッシュをクリアしても良かったのですが、これをするとcookieが消えてしまってちょっとめんどくさかったりします。
例えば、カエレバやヨメレバなどの情報も消えたり、各サイトのIDやパスワードももう一度入れ直して再ログインしないといけなくなったりします。
前にこの方法でキャッシュクリアできたは良いものの、後がめんどくさかったので消すか迷いました。
また、該当するページのURLだけ検索して消してもいいのですが、めんどくさかったり時には効かなかったりしたので、「他に良い方法ないかなあ」と思って探していたら…
ありました!!💕
それが、今回紹介する方法です✋
CSSを変更したのになかなか読み込まれない…という人は、ぜひ試してみてください。
わたしは普段ブラウザはchromeを使っているため、今回はchromeの説明となっています。
やり方は簡単です。
リロードしたいページで右クリックし、検証画面(デベロッパーツール)を開きます。
そのあと、ブラウザの左上のリロード(更新)ボタンを長押しします。
すると以下の3項目が出てくるはずです。
  • 通常の再読み込み
  • ハード再読み込み
  • キャッシュの消去とハード再読み込み
chromeのキャッシュをクリアする方法
この中から、「ハード再読み込み」を選択します。
これで、CSSが反映されるはずです。
ハード再読み込みは、キャッシュ機能を無視して強制的にサーバーからページをダウンロードする方法らしいです。
キャッシュをクリアしなくてもわたしの場合これだけでうまくいったので、キャッシュをクリアしたくない人はこちらでいいと思います!
うまくいかない人は、キャッシュはクリアされてしまいますが、「キャッシュの消去とハード再読み込み」を試してみてください✋
CSSが反映されないと、ほんとモヤモヤするんですよね…
モヤモヤしてる人は、ぜひ参考にしてみてください(。・ω・)ノ゙✨

おすすめ関連コンテンツ