何をやってもCSSが反映されない時はスーパーリロードを試してみよう！！
とあるサイトを制作中の話。
制作期間が途中で中断したりしてちょっと長引いている状況でした。
作業を再開し、修正指示に従ってCSSを変更して更新してもサイトに更新されないという現象が起こりました。
結論から言いますと、原因はキャッシュだったようです。
今回も自分への備忘録がてら書いてみます。
CSSが反映されない原因が突き詰める
指示通りCSSを修正してFTPでアップロードし、ブラウザで更新して確認する。
いつもならこれで変更されるのですが、なぜか修正指示が反映されていない・・・
あれ、なんか間違ったかな！？
そう思って、Chromeのデベロッパーツールなども使っていくつか確認してみました。
CSSに書き込んだ内容のチェック
そもそも記述が間違っていないかをチェック。
よくある「；」の抜けとか、全角スペースが入ってないか、コメントアウトが変に効いてないかなどを確認しました。
結果、問題は見られず。
CSSを読み込んでいるか
そもそもちゃんとCSSファイルを読み込んでいるかを疑ってみました。
head内のCSSへのパスを確認したけど問題なし。
念のため、CSSへのパス自体を削除してみたところレイアウトが崩れたので、ちゃんとCSSは
読み込んでいることを確認しました。
CSSの優先順位をチェック
CSSは後に書いた記述が優先されるので、同じ記述がないか再度確認。
さらに複数のCSSを読み込んでいたので、他のCSSも確認。
念のため、head内のCSSへのパスの記述の順序を変えて変更したCSSを一番最後に読み込むようにしてみましたが、これも反映されません。
キャッシュの確認
まさかこれが原因か？と思ったのがキャッシュでした。
実は一番最初に疑ったので、いつも確認しているブラウザとは別のブラウザを使って更新したところ、そちらでも更新されなかったので、キャッシュの問題ではないと思っていました。
が、もうこれはキャッシュじゃないかと思い出し、いろいろと試してみたところ・・・
更新された！！
原因はキャッシュなのでした。
CSSが反映されない時の対処方法
キャッシュクリアにはスーパーリロードがオススメ
なぜキャッシュが原因か分かったのは、とある方法でキャッシュをクリアして確認出来たからに他なりません。
それは・・・
スーパーリロード！！
なにこれ、カッコいい（笑）
スーパーリロードとは、ハード再読み込みとも言われる機能で、通常のブラウザの更新ボタンでのリロードのさらに上をいく機能といいますか。
まあ、そのページを対象にキャッシュをクリアしてくれる機能なわけです。
これを試したところ、無事に解決したのでした。
スーパーリロードの方法
ボクはMacを使用していて、メインブラウザはChrome、Firefox辺りです。
この2サイトについてのスーパーリロードは次の通りです。
・Mac版Chrome
Shift + 更新ボタン
Cmd + Shift + R
・Mac版Firefox
Shift + 更新ボタン
Cmd + Shift + R
シフトを押しながら左上の更新ボタンを押せばスーパーリロードになります。Safariでも同じ。
Winに関してもほぼ同じで、Shift + 更新ボタンもしくはCtrl + 更新ボタンでスーパーリロードされます。
まとめ
いやあ、一番最初に疑うべきキャッシュでつまずくとは思いませんでした・・・
でもこれで対処方法も分かったし、悩んだ時間は無駄にならないと思いたい（笑）
・CSSが反映されない時はキャッシュを疑う
・スーパーリロードで確認しよう
本日のポイントです。
今回も最後までお読みいただいてありがとうございました。