CSS

【CSS】CSSが反映されない時の解決策であるスーパーリロードショートカットキーまとめ

本日は、CSSが反映されない時の解決策であるスーパーリロードについて解説に加えて、ショートカットキーの紹介です。

スーパーリロードとは

一度読み込まれたCSSはブラウザのキャッシュに保存されます。2回目以降アクセスすると、このキャッシュが残ったまま新規のCSSが反映されないことがあります。

これを解消するための手段がスーパーリロードです。

キャッシュとは

ブラウザには、キャッシュという機能があります。

一度読み込まれたサイトは、ブラウザがキャッシュを残しているため、2回目以降はいちいちサーバまで情報をとりにいかなくても表示ができます。

これにより、読み込み速度の高速化が図られているのです。

しかし、Webサイト開発を行っていると「CSSが反映されない…」といったことが起こります。

他にも原因は考えられますが、このキャッシュが影響している可能性が高いです。これを解消するための手段が、先ほど紹介したスーパーリロードです。

ショートカットキーまとめ

PC版ブラウザでは、以下の通りです。

Windows

Chrome

  1. Shift + 更新ボタン
  2. Ctrl + 更新ボタン
  3. Shift + F5
  4. Ctrl + F5
  5. Ctrl + Shift + R

FireFox

  1. Shift + 更新ボタン
  2. Ctrl + F5
  3. Ctrl + Shift + R

Edge

  1. Ctrl + 更新ボタン
  2. Ctrl + F5

IE11

  1. Ctrl + 更新ボタン
  2. Ctrl + F5

MacOS

Chrome

  1. Shift + 更新ボタン
  2. Command + Shift + R

FireFox

  1. Shift + 更新ボタン
  2. Command + Shift + R

Safari

  1. Shift + 更新ボタン

CSSが反映されない時は、スーパーリロードをしてみましょう。

スマホでのスーパーリロードに関しては、以下の記事にまとめてあります。

もし、スーパーリロードでも反映されない場合は、クラス名の誤字や、CSSセレクタが正しく指定できていない可能性があるので、コードを読み返してみてください。

 

最後までお読みいただき、ありがとうございました。

ABOUT ME
ProgRiro
エンジニアとして働きながら、プログラミングスクールの講師も務めています。 趣味はプログラミング、映画鑑賞、読書、ギター。 将来、フルスタックエンジニアとなり起業を目指して勉強中。 発信力をつけるためにブログやってます。 プログラミング初心者の方を全力でサポートします。