【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. 画像が表示されないのは拡張子がおかしいから
    HTMLとCSSを用いてウェブサイトを制作をする時に、 コードには間違いがないのに画像が表示されな…
  2. indesignで同人誌制作
    同一レイアウトの適用を容易にするマスターページ機能により、長くなりがちなページを整えたり、 イラス…
  3. 効率の良い食器洗いの手順とコツ
    突然ですが、皆さん食器洗いって得意ですか? そうです、ご飯のあとに食べた食器を洗うアレです。 …
  4. 正論怖い
    この社会には、仕事に就き、経済的に自立しており、また精神面でも誰かに不健全に依存することなくいたって…
  5. 小説家になろう
    大概のwebサービスって登録時に性別入力を求められますよね? 私はいわゆる「性別違和感持ち」でして…
  6. 歴史史跡のWeb情報
    2015年の3月と5月に、それぞれ春日山城(新潟県)・小田原城(神奈川県)と史跡めぐり旅行に行ってき…
  7. 少部数で安い同人印刷所
    同人誌を作るとき、コピー本やキンコーズも悪くはないけど、印刷所も使ってみたい。 でも大手の同人印刷…
  8. デザイン苦手レイアウトおすすめ本
    デザインとかレイアウトとか苦手!センスない!いつまで経っても初心者です! そんな筆者が基礎を学んだ…
  9. オンラインイラスト講座sensei3
    2016/3/2、イラストSNS最大手Pixivがイラストの講座動画サイト「sensei(センセイ)…
  10. FF14ロードオブヴァーミニオン
    ファイナルファンタジー14のパッチ3.4で、攻略手帳による「冒険者小隊」志願兵勧誘の仕組みが増えたこ…
 スポンサーリンク


記事を書いている人

校倉

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

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

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

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

ページ上部へ戻る