CSSが効かない・反映されないときの対処法まとめ

サルワカではたくさんのCSSデザインサンプルを紹介しています。とはいえ「CSSをコピペしても効かない」「一部しかデザインが変わらない」ということもあるかと思います。今回はそんなときの対処法を初心者の方でも分かるように詳しく解説します。

検証モードでCSSが効かない原因をチェック

CSSを長く書いてきている人でも「あれ？反映されないな」ということはよくあります。そんなときにはブラウザの検証機能で何が原因なのかをチェックすることができます。

検証機能とは？

現在表示されているウェブページにHTMLやCSSなどのコードをチェックできるツールです。PCブラウザにはだいたい標準機能として搭載されています。

ここではChromeの開発者ツールを例にします。掲載した画面画像は記事公開当時のものですが、要素を選び「Styles」で適用ルールを調べる流れは今も使えます。現行画面はChrome DevTools公式のCSSガイドも参照してください。

手順1：CSSが反映されない部分を［検証］

まずデザインがうまく反映されない部分を右クリックします。

表示されるメニューの中から［検証］を選びます。

すると、上の画像のように右クリックした周辺のコードがずらっと表示されます。見慣れないうちは頭が痛くなるかもしれませんが、耐えてください。

このようにHTMLとCSSが分かれて表示されています。

HTML側で選択された要素に対応するCSSが「Styles」に表示されます。青い選択表示やパネルの位置は、ブラウザや表示設定によって異なります。

手順2：問題のありそうなHTMLを探る

検証部分はHTMLタグをクリックすれば変えることができます。ポチポチとクリックして問題のありそうな行にあわせましょう。

HTML側の「▶」をクリックすれば、HTMLが展開され、中のコード（子要素）まで見ることができます。

手順3：CSSをチェック

HTML側で問題のありそうなタグを選択できたら、CSS側を見てみましょう。

旧画面の「Styles」では、padding: 8px 0;に取り消し線が引かれています。取り消し線は、その宣言が最終的な値として採用されていないことを示します。まず同じプロパティを指定する別のルールや、無効な値がないかを確かめましょう。

では、なぜCSSが効いていないのでしょうか。以下の順にチェックしていきましょう。

他のスタイル指定より優先順位が低いとうまく反映されない

先ほどの画像では、同じ要素のpaddingに複数の宣言が一致しています。どれが最終的に使われるかは、出自・!important・レイヤー・セレクタの詳細度・記述順などで決まります。

意図した宣言より優先される別の宣言があると、画面には別の値が使われます。まず開発者ツールで、実際に採用された宣言とそのファイルを確かめましょう。

対処法1：適用されていない指定の優先順位を上げる

さきほどの例を一度整理してみましょう。CSSファイルには、以下のように、同じ部分に対する指定が複数書かれています。

.mkj a { padding: 8px 0; }
.sidemkj .mkj a { padding: 0; }

上の2つは同じレイヤー内の通常の宣言です。.sidemkj .mkj aの方がクラス指定を1つ多く含むため、padding: 0;が採用されています。一般的な判定の順序はMDNのカスケードの説明で確認できます。

対処法2：適用したくない方を削除する

複数のスタイル指定が重複してしまっているわけなので、ジャマになってしまっている方を消すというのも1つの手段です。しかし、そのスタイル指定は他のタグにも影響を与えている可能性があります。他の部分のデザインが崩れてしまう可能性があるため、よく分からないのであれば、やめておいた方が良いでしょう。

対処法3：!importantをつける

適用されないスタイル指定の末尾に!importantと書くと、優先的に適用されるようになります。

.example p {
  padding: 0 !important;
  margin: 0 !important;
}

!importantは通常の宣言より優先されますが、後で上書きしにくくなります。まず競合するルールを整理しましょう。例外的に必要な場合は、理由をCSSにコメントで残すと管理しやすくなります。MDNの注意点も参考にしてください。

キャッシュが残っているとCSSが反映されない

CSSを書き換えたのに開発者ツールにも新しい宣言が見つからないときは、まず読み込まれたCSSファイルとURLを確認します。古いファイルが表示されるなら、ブラウザや配信側のキャッシュを調べましょう。

ブラウザのキャッシュは、取得したCSSなどを保存して再利用する仕組みです。開発者ツールの「Network」で読み込み元と応答を確認できます。

あわせて読みたいブラウザのキャッシュとは？IT初心者でも分かるように解説

変更前のCSSがブラウザに残っている場合、更新しても見た目が変わらないことがあります。CDNなどの配信側にもキャッシュがあれば、そちらの設定も確認します。

対処法

Chromeなら開発者ツールの「Network」で「Disable cache」を有効にし、ツールを開いたままページを再読み込みすると、ブラウザキャッシュの影響を切り分けられます。詳しくはChrome DevTools公式のNetworkガイドを参照してください。通常のキャッシュ削除手順は次の記事で説明しています。

文法ミスがあるとCSSが効かない

文法ミスによりスタイル指定が反映されない場合もあります。ここでは、ありがちな文法ミスをまとめておきます。

【前提知識】以下で「セレクタ」や「プロパティ」などの用語が登場しますが、それぞれCSSのこの部分を表しています。

詳しくはこちらの記事をご覧ください。

セレクタの書き間違え

クラス名やタグ名の書き方を間違えて、結果として反映されないことはよく有ります。

HTML: <div class="example">...</div>
誤: #example { color: red; }
正: .example { color: red; }

classに対する指定は「#」ではなく「.」です。つまり「.example{~}」が正解です。

HTML: <p><a href="/">リンク</a></p>
誤: pa { color: red; }
正: p a { color: red; }

「pタグの中のaタグに対して」という場合は半角スペースを空けます。正しくは「p a {~}」ですね。

HTML: <div id="example"><a href="/">リンク</a></div>
誤: #xemple { color: red; }
正: #example { color: red; }

id名を間違えてしまっています。正しくは「#example {~}」ですね。

プロパティの書き間違え

誤: p { margn-bottom: 5px; }
正: p { margin-bottom: 5px; }

正しくは「margin-bottom」です。

プロパティ名の誤りは、開発者ツールがのような警告や取り消し線で示すことがあります。画像は公開当時のChromeでの表示例です。現在の表示文言はブラウザのバージョンで異なる場合があります。

値の書き間違え

誤: .example { display: blcok; }
正: .example { display: block; }

正しくはdisplay: block;です。無効な値を入力したときの警告表示は、ブラウザやバージョンによって異なります。

「;」の書き忘れ

複数の宣言を並べるときは、それぞれをセミコロン;で区切ります。最後の宣言の後のセミコロンは省略可能ですが、追記しやすいよう付けておくとよいでしょう。

このセミコロンを忘れていると、その後のCSSが正しく適用されなくなります。

「 } 」の閉じ忘れ

プロパティと値は波括弧で囲みます。特に閉じる側の波括弧はいつの間にか消えてしまいがちです。

閉じ忘れると、その後のCSSが正しく効かなくなります。念のためチェックしておきましょう。

コメントアウトが広範囲に適用されてしまっている

*/を書き忘れると、後続のCSSがコメントとして扱われ、意図した宣言が効かなくなります。開始と終了が対応しているか確認しましょう。

CSSが反映されないときは、まず開発者ツールで対象要素と読み込まれたCSSを確認しましょう。ルールの競合、キャッシュ、文法ミスを順に見ていくと原因を絞れます。