【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. 桂林院
    真田信繁を主人公に、乱世を生き抜く真田家を描いた2016年の大河ドラマ「真田丸」。 第1話、第2話…
  3. FF14雑談LS運営
    ファイナルファンタジー14には、チャットチャンネルとして使えるLS(リンクシェル)という機能がありま…
  4. 正論怖い
    この社会には、仕事に就き、経済的に自立しており、また精神面でも誰かに不健全に依存することなくいたって…
  5. pixivfactoryのiphoneケース
    自分のイラストなどで、1個からオンデマンドでグッズが作れるサービス「pixivFACTORY」。 …
  6. FF14冒険録
    ファイナルファンタジー14「紅蓮のリベレーター」から導入された、「冒険録」。 (メインクエストコン…
  7. onebooksで同人誌印刷
    フルカラーでカバー付きの旅行記漫画の同人誌を、ONEBOOKSさん(http://www.red-t…
  8. 戦国大戦の足利成氏
    アーケードカードゲーム「戦国大戦 1477-1615日ノ本一統への軍記」において、カード化された「足…
  9. googlechromeでcssが反映されない
    最近のウェブブラウザには、HTMLやCSSのコードを確認したり調整するツールが付いていることがほとん…
  10. 同人誌の自家通販の発送方法
    自分の発行した同人誌を通販する際、どうやって送るのが一番安いのか。 買ってくれる人がいるのは嬉しい…
 スポンサーリンク


記事を書いている人

校倉

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

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

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

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

ページ上部へ戻る