【CSS】スマホでキャッシュを消す方法【スーパーリロード】

以前CSSが聞かない方法について記事にしました。

ずばり6つ!! CSSが反映されない時にチェックすること
CSSでいろいろ作っていたら、ある時を境にまったく反応しなくなっていました。原因をググっても出なかったのですがとんでもない珍事が原因で解決しました。解決するまでに調べたことをまとめましたので同様に困った方は確認してみましょう。 キャッシュが残って...

でもスマホだとディベロッパーツールが開かないのでスーパーリロードできないのかなと…

スマホでもキャッシュを消すことができるんです!!

最初の部分はキャッシュの話なので、知っている人はスマホのところまでここからジャンプしてください。


キャッシュとは?

キャッシュについてはこちらで解説しています

ずばり6つ!! CSSが反映されない時にチェックすること
CSSでいろいろ作っていたら、ある時を境にまったく反応しなくなっていました。原因をググっても出なかったのですがとんでもない珍事が原因で解決しました。解決するまでに調べたことをまとめましたので同様に困った方は確認してみましょう。 キャッシュが残って...

簡単にいうと、ブラウザが次回同じページを開く時に、前回取得したページ情報を使うことで読み込みを早くする仕組みのことです。

キャッシュがないと…

キャッシュがある場合


スーパーリロードとは?

ふつうの再読み込みではキャッシュが残っているので、キャッシュ自体を消して最新の状態を反映させましょうというのがスーパーリロードです。

Chromeを例に話すと、ディベロッパーツールを開いた状態でリロードボタンを右クリックすると以下のように出るので「キャッシュの消去とハードの再読み込み」を押せば最新の状態に更新されます。

ちなみにショートカットはChrome、IE、Firefoxなら『ctrl + F5』、Safariなら『ctrl + shift + r』でスーパーリロードできるので覚えておきましょう。


スマホの場合

スマホの場合だとディベロッパーツールも開けなければ、キーボードもないのでショートカットもできません。どうすればいいのでしょう?


iPhoneでSafariスーパーリロード

iPhone使って実際にやってみましょう。

設定からSafariを選んでください。

下のほうの『履歴とWebサイトデータを消去』を押してください。

一応最後に注意点を書いてあるので、そこまでご確認ください。


iPhoneでChromeスーパーリロード

一番最初に言いたいのが、Chromeアプリでならできます。アイコンをよく確認してください。

Chromeアプリでページを開いたら、右下のアイコンから『設定』を選びます。

次の画面で『プライバシー』を選びます。

次に『閲覧履歴の消去』を選びます。

最後に『閲覧履歴』と『キャッシュされた画像とファイル』を選んで『閲覧履歴の消去』を押します。


スマホでやる場合の注意点

特にSafariですが、キャッシュだけでなくCookieまで消去されます。Cookieは簡単に言うとサーバ側で保存しているユーザデータです。(ログインした状態を保持など)

Cookieだけでなく開いているタブなどもすべて消えるので消去する前にブクマするなどしておきましょう。


まとめ

キャッシュに関してはWeb制作で躓く原因になるので、PC版・スマホ版ともに知識として覚えておきましょう。

CSSが反映されない場合は他にもあるので、併せて確認しておきましょう。

ずばり6つ!! CSSが反映されない時にチェックすること
CSSでいろいろ作っていたら、ある時を境にまったく反応しなくなっていました。原因をググっても出なかったのですがとんでもない珍事が原因で解決しました。解決するまでに調べたことをまとめましたので同様に困った方は確認してみましょう。 キャッシュが残って...