ブラウザを更新してもCSSが反映されない!?そんな時は「スーパーリロード」をお試しください。

HTML・CSS

ホームページやブログのカスタマイズ後に、ページを更新して再読み込みをしてもカスタマイズ内容が反映されていない、ということがよくあります。

特にCSSまわりの修正を行った場合に多く見られるのですが、これは「ブラウザキャッシュ」が有効になっていることが原因です。

通常ならブラウザの「更新」ボタンや「F5」キーでページの更新をしますが、これではブラウザキャッシュが読み込まれてしまい、修正後の新しいファイルが読み込まれないことが多いのです。

ブラウザキャッシュとは、アクセスしたことのあるサイトのデータ(HTMLやCSS、画像など)をブラウザで一時的に保管しておく仕組みのことを言います。

通常は、WEBサーバーからファイルをダウンロードして表示させるのですが、一度訪問したことのあるサイトデータをブラウザキャッシュに保管しておくことで、再訪問時にページの読み込み速度を速くすることができます。

ブラウザキャッシュを有効にすることでサイトの表示速度が上がるなどメリットが大きいのですが、サイトの修正を行った直後は修正前の古いファイルを読み込んでしまうことがあります。

そのため、カスタマイズ直後にCSSの変更が反映されていない、ということが起こるのです。

このような場合にはブラウザキャッシュではなく、WEBサーバーから直接ファイルをダウンロードしてあげる必要があります。

それが「スーパーリロード」です。

「フルリロード」や「強制再読み込み」と呼ばれることもあります。

ブラウザごとのスーパーリロードのやり方

ここでは、ブラウザごとのスーパーリロードのやり方をご説明します。

各ブラウザごとにいくつかの方法がありますので、1つ試して変化がなければ次の方法を試してみてください。

Google Chrome(グーグルクローム)

Google Chromeでは以下の方法でスーパーリロードできます。

Windows

① CtrlF5

② Ctrl更新ボタン

③ ShiftF5

④ Shift更新ボタン

Mac(Macintosh)

① ⌘(Command) + Shift + R

② ⌘(Command)更新ボタン

Microsoft Edge(マイクロソフト エッジ)

Microsoft Edgeでは以下の方法でスーパーリロードできます。

① CtrlF5

② Ctrl更新ボタン

Mozilla Firefox(ファイヤーフォックス)

Firefoxでは以下の方法でスーパーリロードできます。

Windows

① CtrlF5

② Shift再読み込みボタン

③ CtrlShiftR

Mac(Macintosh)

① ⌘(Command) + Shift + R

Safari(サファリ)

Safariでは以下の方法でスーパーリロードできます。

Windows

① CtrlShiftR

② Shift再読み込みボタン

③ CtrlR

④ CtrlF5

Mac(Macintosh)

① ⌘(Command) + Shift + R

② ⌘(Command) + 再読み込みボタン

③ ⌘(Command) + R

Opera(オペラ)

Operaでは以下の方法でスーパーリロードできます。

ただし、バージョンv11.62以降のみ。

Windows

① CtrlF5

② ShiftF5

Mac(Macintosh)

① ⌘(Command) + R

IE / Windows Internet Explorer(インターネットエクスプローラー)

Internet Explorerでは以下の方法でスーパーリロードできます。

① CtrlF5

② Ctrl更新ボタン

スーパーリロードのまとめ

以上がブラウザごとのスーパーリロードのやり方です。

カスタマイズ後にスタイルシートが反映されていない場合や、画像が差し変わっていないといった場合には、ブラウザキャッシュが残っている可能性が極めて高いのでスーパーリロードをお試しください。

コメント