緊急事態!ChromeでCSSが反映されない場合に簡単な対処法をご紹介!

緊急事態!ChromeでCSSが反映されない場合に簡単な対処法をご紹介!

どうも、なぎです!

僕のこのブログでもよくあるのですが、ウェブサイトを運営していると「CSS」を変更することが少なからずあると思います。

MEMO
CSSとは、HTMLなどの要素をどのように装飾するのか指示するコードのことです。

「CSSについてもっと知りたい!」という方には以下の記事が参考になると思いますので、もしよかったらこちらの記事もご覧ください。

申し訳ございません。現在準備中です

ワードプレスやテーマを使用しないでサイトをカスタマイズしているという方はもちろんですが、テーマを使用している方でも「CSS」を追加・変更することがあるかと思います。

ですが、そんな時に「CSSに変更を加えてもデザインが反映されていない!」という現象が起きること、よくありませんか?

“なぎ”

実はこれ、ブラウザのキャッシュが原因で起きている事が多いんです!

「ブラウザが何かわからない」という方には以下の記事が参考になると思いますので、一度こちらをご覧になってください。

URLのwwwとは?ネット初心者でもわかるようにURLを読み解きます! URLのwwwとは?ネット初心者でもわかるようにURLを読み解きます!

ということで、今回の記事では【CSSが反映されない原因として多い「キャッシュについて」と、CSSが反映されない時の対処法について】を、初心者の方にもわかるよう解説していきます!

備考

なお、今回の記事は「Google Chrome」を使ってウェブデザインをしている方向けです。

それ以外のブラウザを利用している人には以下の記事が参考になるかと思いますので、こちらをご覧いただければと思います!

よく聞くキャッシュとは?パソコン初心者の方でもわかるように解説!※図解付き よく聞くキャッシュとは?パソコン初心者の方でもわかるように解説!※図解付き

キャッシュとは?

キャッシュとは?

キャッシュについての詳細は別の記事でまとめているのですが、分かりやすいようにここでも軽くお話ししたいと思います。

キャッシュとは、一度訪問したウェブサイトのデータをブラウザに一時保存する仕組みのことをいいます。

キャッシュの図解1
キャッシュの図解2

一度訪れたウェブサイトのデータを一時保存しておくことで、そのウェブサイトに再度訪れた時により早くデータを読み込んで、パッとすばやく表示させることができます。

キャッシュは一見とても便利な仕組みのように思えますが、ブラウザにデータが一時保存されることによって【CSSが反映されない】という事態が起きてしまうのです。

キャッシュが原因で起こる理由

なぜキャッシュによってCSSが反映されないの?

では、なぜ「ブラウザのキャッシュによってCSSが反映されない」という現象が起きてしまうのでしょうか?

“なぎ”

もうお分かりの方もいらっしゃるかもしれませんね^^

それは、ブラウザが「一時保存していたデータ」をCSSの変更後も読み込んでしまうからです。

つまり、CSSを変更した後でも、CSSの変更前に保存したデータをブラウザは読み込み続けてしまうということです。

ブラウザは、CSSを変更する前に保存したデータを読み込んでウェブサイトを表示しているわけですから、CSSを変更したとしても、もちろんそのウェブサイトには反映されません。

CSSが反映されない背景には、このような原因が隠れていたんですね!

CSSを反映させるためには?

CSSが反映されない理由が理解できたら、それを解決する方法について見ていきましょう!

この問題の解決策はシンプルかつ簡単で、「スーパーリロードをする」か「キャッシュを削除する」ことによって、すぐに解決することができます!

MEMO
スーパーリロードとは、キャッシュを読み込まずにウェブ上からデータを読み込むことです。ブラウザに保存されたデータは読み込まないので、常に最新のデータが反映されます。

今回のこの記事では【Google Chromeでスーパーリロードを行って最新のデータを表示させる方法】を解説します。

“なぎ”

Mac / Windowsの両方に対応していますので、どちらをお使いの方も参考にしていただけると嬉しいです^^

「キャッシュを削除する方法」や「Chrome以外のブラウザでスーパーリロードをする方法」については以下の記事が参考になるかと思いますので、興味のある方はぜひこちらもご覧ください。
よく聞くキャッシュとは?パソコン初心者の方でもわかるように解説!※図解付き よく聞くキャッシュとは?パソコン初心者の方でもわかるように解説!※図解付き

スーパーリロードする方法

Chromeでスーパーリロードする方法

それでは「Chromeでスーパーリロードをする方法」について、出来る限りわかりやすく解説させていただきます。

まず、Chromeでスーパーリロードする手順としては以下のような流れになります。

  • STEP.1
    デベロッパーツールを開く
  • STEP.2
    リロードボタンを右クリック
  • STEP.3
    キャッシュの消去とハード再読み込み
  • STEP.4
    完了!

少し難しい単語もありますが、作業内容としてはとても簡単ですので、一緒にひとつずつ見ていきましょう!

ステップ1.デベロッパーツールを開く

最初に、デベロッパーツールを開きます。

デベロッパーツールを開く

上記画像の右側がデベロッパーツールなのですが、MacとWindowsでデベロッパーツールの開き方が異なりますので、それぞれ解説していきたいと思います。

MEMO
デベロッパーツールとはChromeに付属していて、ソースコードが正しいかどうかなどを効率的に検証できるツールです。デベロッパーツールについては、そんなに理解しなくて大丈夫です!

Macの場合

どこでもいいので、画面上で【右クリック】を押してください。

Macの場合

すると上記画像のような小さなウィンドウが画面上に出ますので【検証】をクリックしてください。

これでディベロッパーツールが開きます!

Windowsの場合

F12キー】を押してください。Windowsの場合は、これでディベロッパーツールが開きます!

ステップ2.リロードボタンを右クリック

リロードボタンを右クリック

ディベロッパーツールを開いた状態でChrome上部にある【リロードボタン(画像赤丸部分)】を一度だけ右クリックしてください。

ステップ3. キャッシュの消去とハード再読み込み

キャッシュの消去とハード再読み込み

すると小さなウィンドウが出て「どのようにリロード(再読み込み)するか」3つの選択肢が表示されます。(上記画像参照)

そうしましたら、一番下に表示されている【キャッシュの消去とハード再読み込み】を、クリックしてください。

ステップ4.完了

これでスーパーリロードは完了です!

キャッシュを削除してハードを再読み込みしたので、完了後は最新のデータが表示されているはずです。

CSSも反映されていると思うので、デザインを確認してみてくださいね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です