CSS

【CSS】スマホでスーパーリロードをして、確実にCSSを反映させる

本日は、CSSが反映されない時の解決策であるスーパーリロードを、スマートフォンで行うための手順を解説します。

簡単な解説

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

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

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

詳しい解説と、PC版スーパーリロードのショートカットキーはこちらの記事にまとめてあります。

以降では、スマートフォンではスーパーリロードをどのように行うのかを解説していきます。

スマートフォンでスーパーリロードをする手順

本記事はiPhoneでの解説をしていきます。

Safariでスーパーリロード

①「設定」->「Safari」を選択する

②「履歴とWebサイトデータを消去」を選択する

これを実行すると、キャッシュだけでなくCookieまで消去されます。Cookieは簡単に言うとサーバ側で保存している、ログインした状態を保持などユーザデータのことです。Cookieだけでなく、開いているタブなどもすべて消えてしまうため、重要なタブは別ブラウザで開いておいたり、ブックマークに登録するなどしてください。

Google Chrome でスーパーリロード

① 画面右下の「設定」を選択する

②「プライバシー」を選択する

③「閲覧履歴データの削除」を選択する

④「閲覧履歴」と「キャッシュされた画像とファイル」を選択して「閲覧履歴データの削除」を選択する

これを実行すると、キャッシュだけでなくCookieまで消去されます。Cookieは簡単に言うとサーバ側で保存している、ログインした状態を保持などユーザデータのことです。Cookieだけでなく、開いているタブなどもすべて消えてしまうため、重要なタブは別ブラウザで開いておいたり、ブックマークに登録するなどしてください。

まとめ

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

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

 

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

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