Note
Photo: flickr elmer.0

あれ?CSSが反映しない? そんなときはブラウザの強制再読み込み(スーパーリロード)を試してみて

ゴリゴリhtmlとcssと編集したのに、なぜか反映しない。。
たまにありますよね。

普通ならブラウザの更新ボタンを押せば画面は再読込されて新しくなります。
ボタンは押さずにキーボードで操作する方法もありますね。

Macなら「Commandr」、Windowsなら「Ctrlr」か「F5キー」を押せば再読込します。

でも、Wordpressや他のツールを使ってhtmlやcssを編集したはずなのに、再読込してもなぜか反映されないときがあります。

そんなときは、一度ブラウザの強制再読み込み(スーパーリロード)を試してみてください。

スポンサーリンク

強制再読み込み(スーパーリロード)とは

パソコンには、一度閲覧したページをパソコン上に保存し、次に開く際のスピードを早くするキャッシュという仕組みがあります。
この仕組みのために、今見ているページが実際のページより古いということが起こり得ます。
確実に最新のページを見るには、それぞれのブラウザーに設定されている方法でページを再読み込みする必要があり、この方法を、ブラウザーの「フルリロード」「スーパーリロード」「キャッシュクリア」「強制再読み込み」などとも呼ばれます。つまり、キャッシュを上書きしてページの再読み込みをするということです。
UPPER SYSTEM

そうなんです。PCに保存されているキャッシュ(画像やhtml、cssなど)のクリアが上手くいかず、情報が古いまま表示され続けてしまうことがたまにあるので、ブラウザによってはより確実にキャッシュをクリアする方法が用意されています。

ブラウザ別スーパーリロード方法

下記のキーコンビネーションはMacのもので表示しています。Windowsの場合はCommandCtrlと読み替えていただければ問題ないかと。

Safari

Shift を押しながら更新ボタンをクリック。

Safariの更新ボタンは、URLが表示されている箇所の右側にある、円形の矢印です。

Chrome

Shiftを押しながら更新ボタンをクリック。

または、
CommandShiftrの同時押しでもOK。

Firefox

Shift を押しながら更新ボタンをクリック。

Opera

Shift を押しながら更新ボタンをクリック。

まとめ

こうしてみると、基本はどのブラウザでもShift を押しながら更新ボタンをクリックでよく、ChromeだけCommandShiftrの同時押しが用意されているようです。

キーボードショートカットに慣れると、マウスで更新ボタンまでカーソルを動かすのが億劫になるので、Chrome以外のブラウザにも搭載してくれないかな? あ、でもそもそも普通の更新操作で確実にクリアしてくれるのが一番良いのですが、なにか事情があるんでしょうか?サーバー負荷の軽減とか。

タイトルとURLをコピーしました