WEBサイトを作っている人であれば一度は経験した事のあるCSSが反映されない問題。
私もこのブログを含め様々なWEBサイトのカスタマイズを行なって来たのですが、何度も悩まされました。
そこで、今回は私自身の備忘録というより、同じ悩みを持った新人WEBデザイナーさんの役に立てばと思い、記事にして見ました。
反映されない原因とは
まず初めに反映されない原因を解説します。
みなさんもご存知の通りブラウザーにはキャッシュというものが存在ます。
このキャッシュは一度開いたWEBサイトの読み込み時間短縮のために、一部のデータを一定期間パソコン内に保存をして、そのデータを表示するものです。
CSSは読み込みに時間がかかり、更新頻度もそれほど多くないので多くのサイトでキャッシュされるようになっています。
その結果、 CSSファイルを更新しても、その内容が反映されないという事なのです。
キャッシュをクリアすれば解決
感の良い方であれば、キャッシュをクリアすれば解決するのではと思った方もいるでしょう。
その通りです。
ブラウザーの設定からキャッシュをクリアすれば、CSSファイルを再読み込みするので、修正内容が反映されます。
キャッシュクリアの方法は各ブラウザーのマニュアルにありますのでご参照ください。
毎回キャッシュを消すのは面倒
プロのデザイナーの方であれば、CSSを完璧に理解されていると思いますので、いちいち実際の画面をチェックすることは少ないと思いますが、私のような趣味程度の人間は、一つ変更をすると、確認しなければ、本当にあっているのか心配になることもあります。
そんな方は、きっと毎回のようにキャッシュを消す作業は正直面倒になってくる事でしょう。
また、キャッシュを消しても反映されないことも度々あり中々、作業が捗らないのではないでしょうか。
そんな方の悩みを解決してくれるのが、スーパーリロードです。
ブラウザーによって方法は異なるのですが、ほとんどのブラウザーでは「Ctrlキー（Macの場合はcommandキー）」を押しながら「更新ボタン」をクリックすることでスーパーリドードとなり、全ての情報を新たに読み込んでくれます。
また、スマホの場合は、URLバーの横にある更新ボタンをタップすることで、キャッシュデータを利用せず新たに読み込みを開始するはずです（一部のブラウザーを除く）
ブラウザーの仕様によって異なるのですがクロームでは実証済みですので、IEやFirefoxで無理な場合はクロームをお試しください。
ブラウザーの仕様が日々変わっておりますので、情報が古い場合もございます。
予めご了承下さい。
