CSS（スタイルシート ）を変更しても反映されないときの対処法

このページでは CSSファイル（スタイルシート）を変更しても、ページ表示にその変更内容が反映されないときの対処方法について解説します。

対処法１：スーパーリロードで強制再読み込み

CSS ファイルの変更が反映されない時にまず試すと良いのが「スーパーリロード」です。

とにかく早く試してみたい方は、「Shift キー」を押しながらウェブブラウザの更新ボタンを押してみましょう！

おそらく大半の方は、これだけで CSS の変更が反映されるはずです。

スーパーリロードとは

スーパーリロードとは「ブラウザキャッシュのデータを利用せずにページを更新する」操作になります。

キャッシュとは

ページを表示する際、ウェブブラウザはウェブサーバーから HTML や CSS、画像などのページ表示に必要なデータをダウンロードし、それに基づいてページの表示を行います。

この際、ウェブブラウザはダウンロードしたデータ（おそらく全種類のファイルではない）を PC 上に保存します。この保存されたデータがブラウザキャッシュです。

ブラウザキャッシュにデータが残っている状態で、再度ウェブブラウザで同じページを表示する際には、ブラウザキャッシュのデータを利用して表示が行われます。

つまりブラウザキャッシュにデータがある場合、ウェブサーバーからのファイルのダウンロードは行われません。

これによりウェブサーバーからのデータのダウンロードを省略できるので、ページ表示が早く＆データ通信量を少なくする事ができます。

ただし、ブラウザキャッシュのデータが残っている限り、ウェブサーバー上のデータを変更したとしてもページ表示にはその変更が反映されないことになります。

このブラウザキャッシュはページ表示が早く＆データ通信量を少なくできるメリットがありますが、頻繁に CSS 等を変更し、すぐに表示を確認する必要のあるウェブサイトやウェブアプリの開発ではちょっと不便です。

スーパーリロードではキャッシュを利用しない

で、本題の「スーパーリロード」とは、このブラウザキャッシュのデータを利用せずにページを更新する操作になります。

ブラウザキャッシュのデータを利用しないため、一度表示したページを表示する際にも、必ずウェブサーバーから再度 HTML や CSS 等をダウンロードしてページ表示が行われます。

ですので、ウェブサーバー上の CSS ファイルを変更後にスーパーリロードを行えば、変更後の CSS がページ表示に反映されるようになります。

スポンサーリンク

スーパーリロードの実行方法

このスーパーリロードは OS やウェブブラウザによって実行方法が異なります。

ですが、基本的に下記のどちらかで実行できるのではないかと思います。

• 「Shift キー」を押しながらブラウザの「更新ボタン」をクリック
• 「Ctrl キー」を押しながらブラウザの「更新ボタン」をクリック

ひとまず MacOSX では「Safari」と「Chrome」で前者のやり方でスーパーリロードを行う事ができます。

「スーパーリロード　実行方法」などでググれば、より詳細な方法を確認する事ができます。上記でスーパーリロードできない場合はググってみてください。

対処法２：検証ツールで適用されているスタイルを確認して修正

スーパーリロードしたのにまだ CSS が反映されない！という場合は、変更した CSS ファイルに問題があると考えられます。

CSS ファイルと睨めっこして問題点を探すのでも良いのですが Google Chrome の「検証」を利用すれば楽に問題点を確認する事ができます。

スタイル設定を適用する要素（見出しや画像など）にマウスカーソルを合わせ、右クリックのコンテキストメニューから「検証」を選択すれば、その要素の検証を行う事ができます。

具体的には、画面右側に検証画面が表示され、その要素に適用されているスタイル設定を全て確認する事ができます。

下記ではこの検証画面で特に確認すべき２つのポイントについて説明します。

確認ポイント１：設定したスタイルが表示されているか

まず確認すべきは検証画面に「設定したスタイルが表示されているか」どうかです。

スタイル設定を変更した要素の検証画面を表示してみましょう。

そして、変更後のスタイル設定が検証画面に表示されているかどうかを確認してみてください。

もし表示されていないのであれば、セレクタの指定が間違っていると考えて良いです。

セレクタではスタイル設定を行う要素を特定するために、タグ名や class 名、id 名を正しく指定する必要があります。

この記述が正しくないと、CSS にスタイル設定を記述したとしても、そのスタイル設定がどの要素にも適用されず、CSS を変更したのにページ表示に反映されないように見えてしまいます。

スポンサーリンク

確認ポイント２：設定したスタイルが取り消しされていないか

変更したスタイル設定が検証画面に表示されている場合、次に確認すべきポイントは、その設定したスタイルに取り消し線が付いていないかどうかです。

取り消し線が付いている場合、下記が原因でスタイル設定が適用されません

• スタイル設定の書き方が間違っている
• スタイル設定が上書きされている

スタイル設定の書き方が間違っている

この場合、そのスタイル設定の前に警告マークが表示されています。

この時は変更したスタイル設定の「プロパティ名」と「プロパティの設定値」に誤りがないかどうかを確認し、修正をしてください。

スタイル設定が上書きされている

CSS では「同じ要素の同じプロパティ」に対して複数のスタイルが設定されている場合、その中で最も優先度が高いものが適用されるようになっています。

優先度は基本的に下記のルールで設定されるようです。

• !important が付加されたスタイル設定は最優先
• より具体的にセレクタを指定したスタイル設定の方が優先度が高い
  • id で指定 ＞ class で指定 > タグ名で指定 > 全称セレクタで指定
• 同じ優先度の場合、最後に読み込まれたスタイル設定が適用される

例えば下記の HTML 要素に対して、

<h2 class="heading" id="post_list">投稿記事一覧</h2>

下記のようにスタイル設定した場合、文字の色は青色になります。

#post_list {
    color : blue
}

.heading {
    color : red
}

h2 {
    color : green
}

下記のようにスタイル設定した場合は文字の色は赤色になります。

#post_list {
    color : blue
}

.heading {
    color : red !important
}

h2 {
    color : green
}

あなたが変更したスタイル設定をページ表示に反映するためには、現在適用されているスタイル設定の優先度よりも高くしてやる必要があります。

この優先度を考慮してスタイル設定の書き方を変更する事で、CSS の変更がページ表示に反映されるようになります。

例えばセレクタ指定をより具体的に、スタイル設定の記述場所をより後ろ側に変更するなど試してみてください。

まとめ

このページでは CSS の変更が反映されてないときの対処法について解説しました。

まず試すことは「スーパーリロード」です。これにより大半の方はこの問題を解決できるのではないかと思います。

スーパーリロードをしてもダメな場合は CSS の変更が正しいかどうかを確認する必要があります。

この確認は Google Chrome の「検証」を使えば楽に行えますので、是非この機能を利用してみてください！