CSSを書いたのに効かないのはなぜ？詳細度と上書きの仕組みを理解しよう

CSSを追加したのに、文字色や余白が変わらない。

同じ指定をファイルの一番下へ書き直したら反映されたものの、なぜ直ったのかは分からない。

Web制作では、このような問題がよく起こります。

CSSが効かない原因は、記述ミスやキャッシュだけではありません。複数の指定が同じ要素に適用され、優先順位の高い方に上書きされている場合もあります。

今回は、CSSの詳細度と上書きの仕組み、反映されないときの確認方法を初心者向けに解説します。

CSSには複数の指定が同時に適用される

一つの要素には、さまざまな場所からCSSが適用されます。

たとえば、見出しには次のような指定が重なる可能性があります。

すべての見出しを対象にした指定

特定のセクション内だけを対象にした指定

共通クラスに対する指定

ページ固有のクラスに対する指定

スマートフォン表示用の指定

WordPressテーマやプラグインが出力した指定

これらが異なる役割を持っていれば、同時に適用されても問題ありません。

しかし、複数の指定が同じ文字色や余白を変更しようとすると、ブラウザは決められたルールに従って採用するものを選びます。

この仕組みを理解していないと、反映されるまで指定を増やし続けることになります。

後に書いたCSSが必ず勝つわけではない

CSSでは、「後に書いた指定が優先される」と説明されることがあります。

これは完全な間違いではありませんが、いつでも当てはまるわけではありません。

後に書いた指定が優先されるのは、比較する指定の重要度や詳細度などが同じ場合です。

前に書かれた指定の方が、対象をより具体的に示していれば、後から追加した単純な指定では上書きできないことがあります。

ファイルの一番下へ追加すれば必ず直ると考えるのではなく、競合している指定同士の優先順位を確認する必要があります。

詳細度とは対象を指定する具体性のこと

詳細度とは、そのCSSが対象をどれくらい具体的に示しているかを表す考え方です。

一般的には、タグ名だけを使った指定より、クラスを使った指定の方が具体的です。さらに、IDを使った指定は強い優先順位を持ちます。

大まかには、次の順番で強くなると考えると理解しやすいでしょう。

タグ名による指定

クラス、属性、状態による指定

IDによる指定

HTMLへ直接設定されたスタイル

重要指定が付いたスタイル

ただし、単純に種類だけを見るのではなく、一つの指定内に何がいくつ含まれているかも関係します。

複数のクラスを組み合わせた指定は、一つのクラスだけを使った指定より具体的になる場合があります。

セレクターを長くすればよいわけではない

上書きできないとき、親要素のクラスを次々と追加し、長いセレクターを作ることがあります。

確かに、対象を具体的にすれば優先されやすくなります。

しかし、この方法を繰り返すと、さらに修正するときは、もっと長くて強い指定が必要になります。

その結果、次のような問題が起こります。

どの指定が効いているのか分かりにくい

HTMLの構造を少し変えただけで適用されなくなる

同じ部品を別のページで再利用しにくい

修正のたびにセレクターが長くなる

削除してよいCSSを判断できなくなる

CSSは強く書くことよりも、必要以上に強くしないことが重要です。

共通部品はクラスを中心に指定し、ページ固有の違いは追加のクラスで表すと管理しやすくなります。

継承と上書きは別の仕組み

CSSには、親要素に設定した内容が子要素へ引き継がれる「継承」という仕組みがあります。

文字色やフォントなどは継承されやすいため、親要素へ設定した内容が、その中の文章にも適用されることがあります。

ただし、子要素自身に文字色が設定されていれば、継承された値より子要素の指定が使われます。

この状態を見て、親要素のCSSが上書きされたと考えることがありますが、実際には子要素に直接設定された値が採用されています。

また、余白、横幅、背景など、基本的に継承されないプロパティもあります。

親へ設定したのに子要素へ反映されない場合は、優先順位だけでなく、そのプロパティが継承されるものかも確認します。

省略した指定による上書きにも注意する

CSSには、複数の内容をまとめて設定できる省略形式があります。

たとえば、背景や枠線、余白などは、関連する複数の値を一度に指定できます。

便利な一方で、すでに個別設定されていた値まで初期化してしまうことがあります。

一部だけを変更したつもりでも、まとめて設定する指定によって、画像、色、太さ、位置など別の値まで置き換わる可能性があります。

開発者ツールで確認すると詳細度の問題に見えないのに表示が変わっている場合は、関連する省略指定が後から適用されていないかも確認します。

状態によって適用されるCSSが変わる

通常時は正しく見えていても、マウスを重ねたときや入力欄を選択したときだけデザインが変わる場合があります。

これは、要素の状態に応じたCSSが適用されるためです。

ボタンやリンクでは、主に次の状態を確認します。

通常時

マウスを重ねた状態

キーボードで選択した状態

クリックしている状態

操作できない状態

訪問済みの状態

通常時の文字色を変更しても、マウスを重ねた状態に別の文字色が設定されていれば、操作中だけ元の色へ戻ることがあります。

一つの画面を静止した状態で見るだけでなく、実際にマウスやキーボードで操作して確認することが大切です。

メディアクエリによる上書きを確認する

パソコンでは修正が反映されるのに、スマートフォンでは変わらない場合、画面幅に応じたCSSが後から適用されている可能性があります。

レスポンシブ対応では、基本となる指定に加えて、特定の画面幅だけで有効になる指定を使用します。

どちらも同じプロパティを設定していれば、条件が成立したときだけ値が上書きされます。

修正時には、通常のCSSだけでなく、次の点も確認します。

スマートフォン用の指定がないか

タブレット向けの指定がないか

条件となる画面幅が重複していないか

画面の向きを条件にした指定がないか

印刷用など別の表示条件がないか

特定の画面幅だけで崩れる場合は、その幅でどの指定が有効になっているのかを見る必要があります。

重要指定を増やすと修正が難しくなる

通常の優先順位を強制的に変更するため、重要指定が使われることがあります。

外部サービスのスタイルを一時的に上書きするなど、必要になる場面はあります。

しかし、反映されないたびに重要指定を追加すると、CSSの優先関係が分かりにくくなります。

後から通常の指定で修正できなくなり、さらに別の重要指定を追加する状態になりがちです。

重要指定を使う前に、次の点を確認します。

対象のクラスがHTMLに付いているか

別のCSSが後から読み込まれていないか

より詳細度の高い指定が存在しないか

メディアクエリ内で上書きされていないか

HTMLへ直接スタイルが設定されていないか

WordPressやプラグインがスタイルを出力していないか

原因を把握せずに優先順位だけを強くすると、将来の修正が難しくなります。

WordPressではテーマとプラグインのCSSも重なる

WordPressでは、自分で作成したCSS以外にも、テーマやプラグインが多くのスタイルを読み込んでいます。

お問い合わせフォーム、目次、スライダー、ブロックエディターなどには、それぞれ専用のCSSが用意されていることがあります。

自分のCSSが効かない場合、テーマ側に強い指定があるだけでなく、プラグインのCSSが後から読み込まれている可能性もあります。

反対に、自分のCSSを広い範囲へ適用した結果、プラグインのボタンや入力欄まで変えてしまうこともあります。

WordPressで修正するときは、対象を必要な範囲へ絞り、別の部品に影響していないか複数のページで確認します。

開発者ツールで競合を確認する

CSSが効かないときは、記述を追加する前にブラウザの開発者ツールを確認します。

対象の要素を選択すると、どのCSSが適用されているか、どの指定が上書きされているかを調べられます。

取り消し線が付いている指定は、別の指定に負けている可能性があります。

あわせて、次の情報も確認できます。

どのファイルに書かれたCSSか

何行目の指定か

どのセレクターが優先されているか

継承された値か

メディアクエリが有効になっているか

プロパティ名や値が無効になっていないか

実際に計算された最終的な値は何か

目でCSSファイル全体を探すより、ブラウザが最終的に採用した結果を見る方が原因を早く見つけられます。

CSSが効かないときの確認順序

反映されない場合は、次の順番で確認すると切り分けやすくなります。

対象のCSSファイルが読み込まれているか

プロパティ名や値に記述ミスがないか

セレクターが目的の要素と一致しているか

開発者ツールで指定が表示されているか

別の指定に上書きされていないか

詳細度が必要以上に高い指定がないか

メディアクエリや状態別の指定がないか

HTMLへ直接スタイルが設定されていないか

キャッシュに古いCSSが残っていないか

修正によって別のページへ影響していないか

CSSが開発者ツールに表示されていなければ、詳細度より前の問題です。

ファイルが読み込まれていない、セレクターが一致していない、記述が無効になっているといった原因を先に調べます。

上書きしやすいCSSより整理しやすいCSSを目指す

実務では、一度デザインを完成させるだけでなく、公開後も修正や機能追加が続きます。

そのため、現在の表示を強引に変えられるCSSより、後から理由を説明できるCSSの方が重要です。

管理しやすくするには、次の点を意識します。

クラスを中心にスタイルを設定する

HTMLの階層へ依存しすぎない

IDをデザイン目的で多用しない

重要指定を安易に追加しない

同じ部品のCSSを複数箇所へ分散させない

共通部分とページ固有部分を分ける

不要になった指定を放置しない

追加する前に既存の指定を確認する

詳細度を理解する目的は、より強いCSSを書くことではありません。

必要以上に強い指定を避け、予測できる形でスタイルを管理することです。

まとめ

CSSが反映されないときは、記述ミスやキャッシュだけでなく、別の指定に上書きされている可能性があります。

複数のCSSが同じプロパティを設定している場合、ブラウザは重要度、詳細度、記述順などをもとに採用する値を決めます。

後に書けば必ず勝つわけではなく、セレクターを長くしたり重要指定を追加したりすれば解決というわけでもありません。

まずは開発者ツールを使い、どの指定が適用され、どの指定が負けているのかを確認します。

原因を理解してから必要な範囲だけを修正する。

この習慣を身につけることで、CSSを増やし続けなくても問題を解決でき、公開後も保守しやすいWebサイトを作れるようになります。