スーパーリロードできないスマホでcssを更新する方法

今まで作ったサイトのcssをそんなガッツリ変更することがなかったんですが、ガラッと見た目を変えた場合は、見てくれてる方の各端末ごとにスーパーリロードしてほしいですよね。

じゃないとデザインがガタガタに…。んでPCだとスーパーリロードってシフトかコントロールどっちか忘れましたが、その状態でF5キー押せばいいだけ、なんですがスマホ（アンドロイド、アイフォン）の場合ってそもそもスーパーリロード機能がない、んですよね。

なのですでに稼働させてるWEBサイトのcssをガラッと変えたら、スマホで表示がぐちゃぐちゃになる、んですよね。ていうか私の作ったサイトでそうなっていました。

今回はアンドロイドやアイフォン、それからパソコンであっても、そもそもスーパーリロードなしで変更後のcssを自動で各端末に読み込ませる方法を紹介しますね。

1. 「○○.css?ver=1.1」と「?ver=1.1」を付けるだけ！
2. 「クエリ」って言います
3. ちなみに
4. まとめ

「○○.css?ver=1.1」と「?ver=1.1」を付けるだけ！

いきなり解決方法から。

htmlのhead部分でcssを読み込んでいますよね。そのcssのファイル名の末尾に「?△△△」（△は数字でもアルファベットでもなんでもOK）を付けるだけ。これだけでスーパーリロードをしなくても変更後のcssに各端末が自動で更新してくれます。

例えば、style.cssを変更したなら、htmlのheadで<link href="css/style.css" rel="stylesheet">こんな感じで読みこんでると思いますが、これを…、

• <link href="css/style.css?ver=1.1" rel="stylesheet">
• <link href="css/style.css?20230213" rel="stylesheet">
• <link href="css/style.css?atarashiiyo" rel="stylesheet">

とかにする。

3つの例ではそれぞれ△のところを「ver=1.1」「20230213」「atarashiiyo」にしています。こんな感じで何でもOK。

すんごく簡単ですね。

「クエリ」って言います

とりあえずこれで変更後のcssがスーパーリロードなしで各端末に自動で反映され、問題はばっちり解決したんですが、なんなのこの「?△△」はっていうのサクッと。

これ、クエリっていうらしくて、付いててもついてなく”てもいいもの、なんです。ただブラウザはこの「?」の後ろも含めてファイル名と判断するので、ここが変わってると同じ「style.css」でも「あれ？なんか新しいcssだな。んじゃ今までキャッシュしてたのをそのまま使うのは辞めてこの新しいstyle.css?ver=1.1を取ってこなくちゃ！」と動いてくれるってワケ。

確かになんか大きめのウェブサイトとか見てるとcssやjavascriptのファイル名の後ろにバージョンとか律儀にふってありますよね。「ふーん、大規模開発だから後から見て分かるようにしてるのかなー」と思ってたんですが、それだけでなくて、ブラウザの動きにも一役買っていたんですね。知りませんでした。

ちなみに

ちなみにこのクエリをcssを更新するたびに自分でバージョン増やすの面倒、っていう場合は、よく用いられる方法として、

<link href="css/style.css?<?php echo filemtime('css/style.css')); ?>" rel="stylesheet">

ていうのがあります。

phpのfilemtimeという関数はそのファイルの更新日時を取得できる関数。これでstyle.cssの更新日時を取得して、それをクエリに設定しちゃう、と。こうしておけばcssを変更した後に手動でバージョンを変えなくても、勝手に更新日時が新しい日付に変わるのでお手軽です。

さらにちなむと…

あと中にはheadのスタイルシート読み込みの所で「type="text/css"」を入れてる人もいるハズ。「type="text/css"」ある方がいいの？なくてもいいの？っていうのを。

結論からいうとなくていいです。今はHTML5っていうルールでホームページが作られてるんですが、このルール内だと「type="text/css"」は不要、とされているためです。あってもいいとは思いますが、わざわざいらないものを書く必要もないので私は書いていません。

まとめ

今回はスーパーリロードなしで更新後のcssを各端末に自動で読み込ませる方法について紹介しました。アンドロイドやアイフォンなどスーパーリロード機能のない端末で特に大事、ですよね。

まさかあの律儀だなーと思ってたバージョン表記（クエリ）にそんな便利な効果があったなんて。参考にしてみてくださいね。ていうか自身の不勉強さに軽くめまいが…。ま、いいや。