この記事の最終更新日は【2019年8月7日】です。
価格やサービス内容など、現在と状況が異なる可能性がありますので、ご注意ください。
最近のウェブブラウザには、HTMLやCSSのコードを確認したり調整するツールが付いていることがほとんどです。
Webブラウザ大手ソフトであるGoogleChromeにも当然ついている機能なのですが、時折正常なCSSであってもうまく読み込めないことがあるようです。
キャッシュの削除と再読込を行うことで直りましたので、やり方をまとめておきます。
正しい記述のCSSなのに反映されない？
事の発端はというと、ホームページ作成の練習をしていたときにCSSがうまく反映されなかったんですよね。
CSSで「margin」と呼ばれる隙間をつけるレイアウトを指定したのですが、何度リロードをしてもうまくいかず…
こういう場合はCSSファイルのコーディングが間違っていることも多いため念入りに何度も確認しました。
文末の「;」が抜けていたり、「margin」を「magrin」と書いてしまうなどコードが間違っていたりしたら、そこを直せばいいのですが、やはり何度確認してもどこも間違っていなかったのです。
それなのにCSSで指定したとある箇所のマージンが反映されません。
かなり困りました。
キャッシュの削除と再読込をしたらなおった
そこでネットで「GoogleChrome css おかしい」のような感じで調べてみたところ、表示が崩れる場合は「キャッシュの削除と再読込」をするとなおる場合があるとのことだったので、やってみたところ無事直りました。
やり方は以下の通りです。
- 表示のおかしいサイトで開発者ツール（デベロッパーツール）を開く
- サイトのリロードのボタンで右クリック
- ３つほどあるメニューのなかから「キャッシュの削除と再読込」を押す
- 正しいCSSでサイトが表示される
デベロッパーツールは「F12」キーまたは「Ctrl＋Shift＋I」キー、右クリックメニューの「検証（要素を検証）」から開くことができます。
Mac OSの場合のショートカットは「command+option+I」です。
Firefoxでのやり方は？
自宅ではブラウザはfirefoxをメインに使っているので同じことができないか調べたところ、firefoxでは押す箇所が異なりました。
「Ctrl＋F5」でキャッシュの削除と再読込を行うようです。
CSSがうまく反映されなかった理由は？
各種ブラウザはサイトを閲覧した際に「キャッシュ」と呼ばれるデータを取っておくようなのですが、それがサイトが更新されたときに更新されたデータ（今回はCSS）ではなく古いキャッシュをずっと読み込んでしまう事があるようです。
今回はどうやらこれが悪さをしていたようで、キャッシュを消してやったら元通りになったというわけでした。
シチュエーションとしてはホームページ作成中やブログ記事更新などでたまに起きるようです。
また、今回はCSSでしたが、JavascriptやHTMLでも起きることがあるそうなので、コードに不備がないのにおかしな動きをしていたらひとまずキャッシュクリアを試してみるといいかもしれません。
・参考にした記事：ChromeとFirefoxで確実にキャッシュクリアする方法（スーパーリロード、ハードキャッシュクリア）｜ウェブジェネ
◆この記事を読んだ人にオススメ！