【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. ホテル京阪札幌のサイト
    札幌駅西口にあるホテル京阪札幌は、駅からも近いのに比較的安価で、とてもおすすめのホテルです。 実際…
  2. 自立支援医療受給者証申請方法
    特定の疾患・障害で通院を続けている人向けに、医療費を軽減する「自立支援医療制度」。 先日、実際に申…
  3. 発達障害の世界観
    周りが是としていることに異を唱えるのは難しい。 同調圧力の強い日本ではなおさらだ。 聡明な人ほど…
  4. 戦国大戦のシャクシャイン
    「戦国大戦1477-1615日ノ本一統への軍記」で追加になった新カード、他家東「シャクシャイン」。 …
  5. 享徳の乱と太田道灌
    ちまたにある萌え本と呼んでも差支えない戦国関係の資料本を紹介する企画です。 (さらに&helli…
  6. 戦国大戦の土居清良
    「戦国大戦-1590 葵 関八州に起つ-」追加のカード、土居清良。 笑いを誘う撤退・落城セリフのた…
  7. 就労継続支援事業所のメリット・デメリット
    学校を卒業してから、あるいは人生の何処かで躓いてから発達障害が発覚した大人は最近とても増えているらし…
  8. 炭火ハンバーグ大かまど芝
    札幌市電「大通西4丁目」駅を降りてすぐのところにある「炭火ハンバーグ 大かまど 芝」。 ボリュ…
  9. facebookの性別欄
    「Facebookをやってみたいけど、日本語版は性別欄が男女の2つしかないしな…」とがっかりしている…
  10. TEAMナワバリングのメルマガ
    2016年のNHK大河ドラマ「真田丸」は、考証チームが優れていることでも注目が集まっています。 …
 スポンサーリンク


記事を書いている人

校倉

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

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

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

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

ページ上部へ戻る