CSSを直して保存したのに、ブラウザで見ると前の見た目のまま。
自分もこれで、よく悩みます。
たいていの原因はキャッシュです。
キャッシュとは何か、どう読みこみ直すか、自分のサイトでどう防いでいるかをまとめます。
先に結論です。
キャッシュは、一度読みこんだファイルを取っておいて、次から速く出す仕組みです。
取っておいたファイルが古いと、直した後も古い見た目が出ます。
まずはスーパーリロード(MacならCommand+Shift+R)で読みこみ直してみてください。
これで飛ばせるのは、主にブラウザのキャッシュです。
直したのに変わらないの、なんで？
ブラウザが、前に読んだ古いCSSを使ってるからだよ。
キャッシュとは？一度読んだファイルを取っておく仕組み
MDNのHTTPキャッシュの解説では、キャッシュはレスポンスを保存して、次のリクエストで使い回す仕組みとして説明されています。
サーバーまで取りに行かずに済むので、表示が速くなります。
サーバー側の負担も減ります。
たとえば、自分のサイトのCSS(style.css)は、サーバーからこう返ってきます。
cache-control: max-age=31536000, publicmax-age=31536000は秒数で、だいたい1年です。
「約1年間は、取っておいたものを新しいものとして使っていいよ」という意味になります。publicは、ブラウザだけでなく、CDNなどの共有キャッシュにも保存していい、という指定です。
CSSは毎回変わるものではないので、こうしておくと2回目からの表示が速くなります。
どんなときに出てくる？
- CSSや画像を直したのに、ブラウザの表示が変わらない
- サイトが遅いとき、高速化の方法として「キャッシュを効かせる」と言われる
- WordPressのキャッシュ系プラグインや、サーバーのキャッシュ機能の設定
キャッシュがある場所は、ブラウザだけではありません。
MDNでは、ブラウザが持つ「プライベートキャッシュ」と、プロキシやCDNなどで複数の人が共有する「共有キャッシュ」に分けて説明されています。
サーバーやプラグインのキャッシュは、また別の仕組みです。
直したのに変わらないときの、読みこみ直し方
まずはブラウザのキャッシュを飛ばして、読みこみ直します。
これを「スーパーリロード」と呼ぶことが多いです。
- Mac:
Command+Shift+R - Windows:
Ctrl+F5(またはCtrl+Shift+R)
それでも変わらなかったら？
ブラウザ以外のキャッシュか、そもそもファイルが上がってないかを疑うよ。
スーパーリロードで直らないときの確認は、最後の「迷ったときの確認ポイント」にまとめています。
自分のサイトでは、ファイルの後ろの番号で防いでいます
CSSを更新すると、番号が自動で変わる
自分のサイトのページを開くと、CSSはこう読みこまれています。
style.css?ver=1791938099後ろの?ver=の数字は、style.cssを最後に更新した日時です。
WordPressのテーマで、CSSを読みこむときに、ファイルの更新日時を番号として付けるようにしています。
この数字なら、10月14日の9時34分に更新したという意味です。
CSSを直すと、更新日時が変わるので、この番号も変わります。
URLが変わると、ブラウザは別のファイルとして扱い、新しく読みにいきます。
MDNでは、こうしてURLを変えて古いキャッシュを使わせない方法を「キャッシュバスティング」と呼んでいます。
1年取っておくのに、直したらすぐ変わるんだ。
番号が変わったら、別のファイルになるからね。
番号が変わらないときもある
番号が変わるのは、サーバーのstyle.cssが更新されたときだけです。
直したファイルがサーバーに上がっていなければ、番号は前のままです。
なので今でも、変わらないときはまずスーパーリロードして、それでもだめならファイルが上がっているかを見ます。
キャッシュでハマった例
CSSが効かないとき、原因はキャッシュだけとは限りません。
自分の場合、前のテーマ(Cocoon)の頃は、キャッシュではなく、CSSの強さ(詳細度)で負けていたこともありました。
スーパーリロードしても変わらないなら、ブラウザの開発者ツールで、そのCSSが打ち消し線になっていないかも見てみてください。
迷ったときの確認ポイント
- スーパーリロード(Macは
Command+Shift+R)で、ブラウザのキャッシュを飛ばす - ページのソース(Chromeなら右クリック→「ページのソースを表示」)で、CSSの
?ver=の番号が新しくなっているかを見る - そのCSSのURLを開いて、直した行が入っているかを見る(入っていなければ、アップロード漏れか、サーバー・CDN側のキャッシュを疑う)
- WordPressのキャッシュ系プラグインや、サーバー・CDNのキャッシュを使っているなら、そっちも消す
- それでもだめなら、キャッシュではなくCSSの書き方(詳細度など)を疑う
あわせて知っておきたい用語
- スーパーリロード
- キャッシュを使わずに、ページを読みこみ直す操作。Macは
Command+Shift+R。 - CDN
- 世界中のサーバーにファイルのコピーを置いて、近い場所から届ける仕組み。共有キャッシュの一つ。
- 子テーマ
- 親テーマとは別に、変えたいところだけを書いておくテーマ。詳しくはこちら。
- 詳細度
- CSSのルールがぶつかったとき、どれを優先するかを決める強さ。キャッシュではなくこれが原因で効かないこともある。
