正しい記述のCSSなのに反映されない？
事の発端はというと、ホームページ作成の練習をしていたときにCSSがうまく反映されなかったんですよね。 CSSで「margin」と呼ばれる隙間をつけるレイアウトを指定したのですが、何度リロードをしてもうまくいかず… こういう場合はCSSファイルのコーディングが間違っていることも多いため念入りに何度も確認しました。 文末の「;」が抜けていたり、「margin」を「magrin」と書いてしまうなどコードが間違っていたりしたら、そこを直せばいいのですが、やはり何度確認してもどこも間違っていなかったのです。 それなのにCSSで指定したとある箇所のマージンが反映されません。 かなり困りました。キャッシュの削除と再読込をしたらなおった
そこでネットで「GoogleChrome css おかしい」のような感じで調べてみたところ、表示が崩れる場合は「キャッシュの削除と再読込」をするとなおる場合があるとのことだったので、やってみたところ無事直りました。 やり方は以下の通りです。- 表示のおかしいサイトで開発者ツール（デベロッパーツール）を開く
- サイトのリロードのボタンで右クリック
- ３つほどあるメニューのなかから「キャッシュの削除と再読込」を押す
- 正しいCSSでサイトが表示される
Firefoxでのやり方は？
自宅ではブラウザはfirefoxをメインに使っているので同じことができないか調べたところ、firefoxでは押す箇所が異なりました。 「Ctrl＋F5」でキャッシュの削除と再読込を行うようです。CSSがうまく反映されなかった理由は？
各種ブラウザはサイトを閲覧した際に「キャッシュ」と呼ばれるデータを取っておくようなのですが、それがサイトが更新されたときに更新されたデータ（今回はCSS）ではなく古いキャッシュをずっと読み込んでしまう事があるようです。 今回はどうやらこれが悪さをしていたようで、キャッシュを消してやったら元通りになったというわけでした。 シチュエーションとしてはホームページ作成中やブログ記事更新などでたまに起きるようです。 また、今回はCSSでしたが、JavascriptやHTMLでも起きることがあるそうなので、コードに不備がないのにおかしな動きをしていたらひとまずキャッシュクリアを試してみるといいかもしれません。 ・参考にした記事：ChromeとFirefoxで確実にキャッシュクリアする方法（スーパーリロード、ハードキャッシュクリア）｜ウェブジェネ ◆この記事を読んだ人にオススメ！
【HTML/CSS】コードが正しいのに画像が表示されない時は拡張子の表示設定を見直す！
WordPressブログの表が変？スマホではみ出る時の対処法と解説！CSSにこのコードを入れるだけ！
画面の一部をキャプチャするならWindows標準搭載の「Snipping Tool」が便利！