【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. itextのレビュー
    今や小説を書くときにはスマホで書いているという方も少なくないと思います。 実は私もその一人です。 …
  3. 性別違和
    自分の性別が「男女」どちらの枠にもないと感じる、「性別違和感」を持っている人(FtX、MtXなどのX…
  4. マヌカハニーとアレルギー
    花粉症・ダニ・ハウスダストなどによって生じる目や鼻のかゆみといったアレルギー症状。 薬でなんとかそ…
  5. 北條五代祭りのパレード見学ルート
    戦国時代、相模国(現在の神奈川県)を本拠に、関東一帯に覇を唱えた小田原北条氏。 毎年5月3日は小田…
  6. 上杉顕定の手紙
    上杉顕定から色部昌長宛て書状に出ていた「長尾六郎」は果たして「長尾為景」か、「上田長尾房長」なのか!…
  7. オンラインのイラスト添削サービス
    近年増えてきた、オンラインでイラスト添削を受けられるサービスをまとめてみた記事です。 利用したこと…
  8. 札幌のバスと市電
    北海道最大の都市・札幌。一年を通じ移住や引っ越しで札幌圏に越してくる人も多いです。 ですが、市…
  9. 楽天ブックスの全額ポイント支払い注意点
    rakutenがやっている楽天ブックスでは、Amazonや書店で在庫切れの本が案外あったりして便利で…
  10. 侍のプリン
    目を引く武士のパッケージイラストが特徴のプリン本舗「侍のプリン」。 苦めのカラメルが売りの、札幌発…
 スポンサーリンク


記事を書いている人

校倉

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

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

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

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

ページ上部へ戻る