CSSが反映されない時にキャッシュを消去する理由と対処法を現役エンジニアが解説【初心者向け】

初心者向けにCSSが反映されない時にキャッシュを消去する理由と対処法について解説しています。正しい記述を行っているのに反映が行われない際、キャッシュを削除することで解決することがあります。キャッシュのクリアの手順を覚えておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSが反映されない時にキャッシュを消去する理由と対処法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSが反映されない時にキャッシュを消去する理由と対処法について詳しく説明していくね!

大石ゆかり

お願いします!

 

CSSが反映されない現象

CSSの記述にて誤字や文法の違反がある場合、ブラウザが装飾のための指示をCSSから解釈できず、CSSが反映されないという結果になります。

しかし、CSSの記述に誤字や文法の違反が無いにも関わらず、CSSが反映されない場合は、ブラウザのキャッシュのデータが最新ではないことが考えられるでしょう。

 

キャッシュとは

キャッシュは過去に閲覧したWebサイトのファイルデータ(htmlファイルやcssファイル、画像など)をパソコンの容量として一時的に保存してから、ブラウザに再利用させる機能です。

英語名は現金の「cash」ではなくて、隠し場所の「cache」と表します。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

キャッシュとブラウザの関係

キャッシュはインターネットの通信回線に、ダイヤルセットアップで接続するのが一般的だった頃、従量課金制による使用料金を抑えるための要の機能でした。

また、キャッシュにデータが保存されていれば、インターネットの通信回線に接続不良があっても、ブラウザを立ち上げてタイミングで過去のデータとしてWebサイトの閲覧が可能だったという過去があります。

過去のデータの再利用には、有効期限が設定されており、この期限を過ぎるまでは最新のデータに更新されません。

また、キャッシュはパソコンだけでなく、スマートフォンにも搭載されてあります。

 

キャッシュを消去するのはなぜ

更新頻度の高いWebサイトや開発中のWebサイトを最新の状態のブラウザに表示させるためには、キャッシュのデータを常に最新のデータに上書きしなければなりません。

そのため、キャッシュのデータを削除したり、キャッシュの機能や有効期限を無効化する場合が多く、この一連の操作を「キャッシュのクリア」と呼びます。

 

実際にキャッシュを消去してみよう

ブラウザがGoogle Chromeの場合、パソコンのキーボードの「Shift」キーを押しながら、ブラウザの「再読み込み(更新)」ボタンを押下(クリック)します。

もしくは、Macのキーボードのショートカットキーでは、「Shift」 + 「command」 + 「r」です。

OS(オペレーティングシステム)やブラウザの種類によって、ショートカットキーの割当てが異なります。

そのため、利用中のOSとブラウザでのショートカットキーをご確認ください。

また、キーボードのショートカットキーを操作できない場合は、各種のブラウザの「設定」からメニューとしてもキャッシュのクリアは可能です。

なお、スマートフォンの場合もアプリの設定から「過去のデータ」を消去することで、キャッシュをクリアすることができるでしょう。

 

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

CSSが反映されない時にキャッシュを消去する理由と対処法がよく良かったのでよかったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。