CSSが当たらない主な理由
書いたCSSが反映されない原因は大きく分けて、同じ要素に対してより強いセレクタが当たっている（詳細度の問題）、後から同じ強さの宣言で上書きされている（記述順の問題）、そしてセレクタ自体がそもそも対象に一致していない、の三つです。
見た目が変わらないときに反射的に!importantを付けると、その場は直っても後で別の場所が直せなくなる悪循環に陥ります。まずはなぜ当たっていないのかを切り分けることが重要です。
詳細度（specificity）の基本
詳細度とは、複数のルールが競合したときにどれを優先するかを決める強さの指標です。おおまかに、IDセレクタが最も強く、次にクラス・属性・擬似クラス、最後に要素・擬似要素という順で強くなります。インラインスタイルはさらに強く、!importantは別枠で最優先になります。
たとえば.card .titleで指定した色が、#sidebar .titleの色に負けるのは、IDを含む後者のほうが詳細度が高いためです。意図した色を当てたいなら、勝てるだけの詳細度を持たせるか、競合している強いセレクタ側を見直す必要があります。
症状別チェック表
書いたCSSが別のスタイルに上書きされて当たらないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
記述順とカスケードの影響
詳細度が同じ場合は、後に書かれたルールが勝ちます。これはカスケードと呼ばれる仕組みで、CSSファイルの読み込み順や、同じファイル内での記述位置が効いてきます。ライブラリのCSSを自分のCSSより後に読み込むと、自分の指定が上書きされることがあります。
また、Shadow DOMやスコープ付きCSS、ユーティリティ系の仕組みを使っている場合は、思っているのと違う優先順位になることがあります。当たらないときは、開発者ツールのスタイルパネルで、実際にどのルールが効いてどれが取り消し線で打ち消されているかを確認すると一目で分かります。
当たらない原因を切り分ける手順
次の順に確認すると、原因を素早く特定できます。
- 開発者ツールで対象要素を選択し、適用中のルールと打ち消されたルールを見る
- 自分のルールが一覧に出ていなければ、セレクタが一致していない可能性を疑う
- 打ち消されていれば、勝っているルールの詳細度や記述順を比べる
- 詳細度が足りなければ、必要最小限だけセレクタを具体化する
- 記述順が原因なら、読み込み順や記述位置を調整する
- !importantは最終手段とし、まず構造で解決できないか検討する
切り分け結果を共有して相談する
詳細度の問題は、実際のページ全体のCSSが絡み合った状態で起きるため、抜き出したコードだけでは再現しないことがあります。問題が起きている状態そのものを共有できると、相談がスムーズです。
切り分け中のHTMLやZIPをギガサイト便にドロップすると共有URLが発行され、同僚やレビュアーが実際の画面で開発者ツールを開いて一緒に原因を探せます。同じURLのまま中身を差し替えられるので、セレクタを直すたびに最新版を確認してもらえます。確認用ページにはnoindexが付いて検索結果に出ず、社内限定にしたいときは会社ドメイン認証などを併用できます。
よくある質問
!importantを付ければ確実に当たりますか。
!important同士で競合すると、結局は詳細度と記述順で優劣が決まり、後から上書きしづらくなります。短期的には当たりますが保守性を下げるため、まずはセレクタの詳細度や記述順での解決を試し、!importantは限定的に使うのが望ましいです。
セレクタが一致しているか確認する方法はありますか。
開発者ツールで要素を選択し、スタイルパネルに自分のルールが表示されるか見てください。表示されていなければセレクタが対象に当たっていない可能性が高く、クラス名のタイポや、子孫関係の誤りを確認すると見つかります。
詳細度を上げずに優先させる方法はありますか。
同じ詳細度なら後に書いたルールが勝つため、記述順や読み込み順を調整するのが一つの手です。また、レイヤー機能を使うとレイヤー間の優先順位を明示的に管理でき、詳細度の競合を避けやすくなります。
ライブラリのスタイルに勝てません。どうすればよいですか。
ライブラリのCSSを自分のCSSより前に読み込み、同じか少し高い詳細度で上書きするのが基本です。ライブラリが!importantやインラインスタイルを使っている場合は、提供されているカスタマイズ用のクラスや変数を使うほうが安全です。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。