スマホ版Chrome(Android)でCSSの設定が反映されない場合の対処方法

CSSでサイトのデザインを調整しているのですがリロードしてもスマホだけ反映されません…　記述の仕方が間違っているのでしょうか？？

Taka

他の人のスマホで試して反映されていたのなら、原因はおそらくキャッシュでしょう。

ブラウザはWEBサイトの表示速度を上げるために、一度取得したファイルをキャッシュとしてデバイスに蓄積しています。

前回と同じデータの場合はそのデバイスに保存されたキャッシュから読み込み、WEBサイトを開くたびにサーバからデータを読み込まなくても良いようにしています。

とても効率的な機能なのですが、WEBサイトの更新作業を行う際にそのキャッシュが読み込まれることで、更新したサーバ上のデータが読み込まれず、設定が反映されなくなってしまう場合があります。

このような状況の場合はキャッシュのクリアという作業が必要です。

今回はAndroid版Chromeのキャッシュクリアの方法を3つご紹介いたします。

どの方法も設定画面から行えるのでとても簡単です。もちろん専門的な知識は必要ありません。

では早速やってみましょう。

その①：AndroidのChromeのライトモードをオフにする方法

この方法は所要時間10秒で完了します。

右上のメニューボタンからメニューを表示させ、設定をタップします。

ライトモードをタップし、設定をオフにして完了です。

非常に簡単な方法ですが、残念なことに私のスマホでは効果がありませんでした。

この方法で改善できなかった場合は、次の方法をお試しください。

その②：AndroidのChromeの設定からクリアする方法

先ほどと同じように、Android版Chromeを開き、画面右上のメニューボタンからメニューを開き設定をタップします。

次に基本設定のプライバシーとセキュリティをタップ。

次に閲覧履歴データの削除をタップします。

今回はキャッシュのクリアが目的なので、キャッシュされた画像とファイルの項目にチェックを入れます。

最後にデータを削除をタップして完了です。

ページをリロードして、CSSの設定が反映されているか確認してみましょう。

その③：Androidのアプリの設定からクリアする方法

Androidの設定を開き、アプリと通知をタップします。

最近開いたアプリにChromeがあれば直接タップ、なければアプリをすべて表示をタップ。

標準のアプリからも開けます。

Chromeをタップしアプリ情報を開きます。

アプリ情報を開いたら、ストレージとキャッシュをタップします。

キャッシュを削除ボタンをタップしキャッシュクリアを実行します。

使用済み容量のキャッシュが0Bと表示されればキャシュクリア完了です。

これでキャッシュクリアは完了しました。

外廊するページをリロードして、正しく表示されているか確認しましょう。

まとめ

スマホのChromeではスーパーリロードができないためキャッシュのクリアにやや手間がかかりますが、方法さえ覚えておけば困ることはありません。

ですがCSSを変えるたびにこの手間が発生するのはやや面倒ですね。Android版Chromeにもスーパーリロード機能が実装されることを望みます。

今回はこれで終了です。