【GoogleChrome】コーディング中にCSSがうまく反映されないときはキャッシュの削除&再読込を!

googlechromeでcssが反映されない



最近のウェブブラウザには、HTMLやCSSのコードを確認したり調整するツールが付いていることがほとんどです。

Webブラウザ大手ソフトであるGoogleChromeにも当然ついている機能なのですが、時折正常なCSSであってもうまく読み込めないことがあるようです。

キャッシュの削除と再読込を行うことで直りましたので、やり方をまとめておきます。

正しい記述のCSSなのに反映されない?

事の発端はというと、ホームページ作成の練習をしていたときにCSSがうまく反映されなかったんですよね。

CSSで「margin」と呼ばれる隙間をつけるレイアウトを指定したのですが、何度リロードをしてもうまくいかず…

こういう場合はCSSファイルのコーディングが間違っていることも多いため念入りに何度も確認しました。

文末の「;」が抜けていたり、「margin」を「magrin」と書いてしまうなどコードが間違っていたりしたら、そこを直せばいいのですが、やはり何度確認してもどこも間違っていなかったのです。

それなのにCSSで指定したとある箇所のマージンが反映されません。

かなり困りました。

キャッシュの削除と再読込をしたらなおった

そこでネットで「GoogleChrome css おかしい」のような感じで調べてみたところ、表示が崩れる場合は「キャッシュの削除と再読込」をするとなおる場合があるとのことだったので、やってみたところ無事直りました。

やり方は以下の通りです。

  1. 表示のおかしいサイトで開発者ツール(デベロッパーツール)を開く
  2. サイトのリロードのボタンで右クリック
  3. 3つほどあるメニューのなかから「キャッシュの削除と再読込」を押す
  4. 正しいCSSでサイトが表示される

デベロッパーツールは「F12」キーまたは「Ctrl+Shift+I」キー、右クリックメニューの「検証(要素を検証)」から開くことができます。

Mac OSの場合のショートカットは「command+option+I」です。

Firefoxでのやり方は?

自宅ではブラウザはfirefoxをメインに使っているので同じことができないか調べたところ、firefoxでは押す箇所が異なりました。

「Ctrl+F5」でキャッシュの削除と再読込を行うようです。

CSSがうまく反映されなかった理由は?

各種ブラウザはサイトを閲覧した際に「キャッシュ」と呼ばれるデータを取っておくようなのですが、それがサイトが更新されたときに更新されたデータ(今回はCSS)ではなく古いキャッシュをずっと読み込んでしまう事があるようです。

今回はどうやらこれが悪さをしていたようで、キャッシュを消してやったら元通りになったというわけでした。

シチュエーションとしてはホームページ作成中やブログ記事更新などでたまに起きるようです。

また、今回はCSSでしたが、JavascriptやHTMLでも起きることがあるそうなので、コードに不備がないのにおかしな動きをしていたらひとまずキャッシュクリアを試してみるといいかもしれません。

・参考にした記事:ChromeとFirefoxで確実にキャッシュクリアする方法(スーパーリロード、ハードキャッシュクリア)|ウェブジェネ

◆この記事を読んだ人にオススメ!

【HTML/CSS】コードが正しいのに画像が表示されない時は拡張子の表示設定を見直す!

WordPressブログの表が変?スマホではみ出る時の対処法と解説!CSSにこのコードを入れるだけ!

画面の一部をキャプチャするならWindows標準搭載の「Snipping Tool」が便利!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でフォローしよう!

校倉

投稿者プロフィール

「戦国らいふ」は校倉が管理しているブログです。
ブログと管理人についての詳細はこちら。
連絡・お問い合わせは[email protected]まで。

※自分のことで精一杯なので、個人的な相談等には対応しておりません

この著者の最新の記事

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

コメントするためには、 ログイン してください。

 スポンサーリンク


おすすめ記事

  1. さっぽろレインボープライド感想
    セクシュアルマイノリティやLGBTsのイベント・レインボーパレードってご存知でしょうか。 主催団体…
  2. 伊藤ハム通好み「ミミガー」
    沖縄料理の一つで、コリコリとした食感が特徴の「ミミガー」(豚の耳)。 物産展や沖縄料理屋でしか…
  3. 就労継続支援A型事業所採用までの流れ
    一般就労が難しい障害のある人のための福祉的就労の場として就労継続支援事業所A型というのがあります。 …
  4. 創作活動をやめたくなるとき
    イラスト・漫画・小説などにかぎらず創作活動をしていると、ふとした瞬間に魔が差したように筆を折りたくな…

記事を書いている人

校倉

ゲーム・創作活動・歴史などが好き。

記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

連絡・お問い合わせは[email protected]まで。

※自分のことで精一杯なので、個人的な人生相談等には対応しておりません

ページ上部へ戻る