CSS詳細度の競合

Diagnosis

この所見が意味すること

同じ要素・プロパティに複数の宣言が一致し、強い詳細度または後の宣言が勝っています。

所見は断定ではありません。表示された根拠と設計意図を照合してから本番コードを変更してください。

Detection

CSS Doctorの判定方法

1. 貼り付けたHTML・CSSをネットワーク遮断したiframe内で隔離表示します。
2. 静的ルールはソース構造を、表示ルールは実際の寸法や計算済みスタイルを確認します。
3. 目的、重要度、確度、影響範囲、修正安全度の順で所見を並べます。

Before / After

最小コード例

.card { color: #222; }
.page .content .card { color: #666; }

.feature-card { color: #222; }
/* 専用クラスで対象を明確にする */

例は出発点であり、万能な修正ではありません。Tier A・Bは適用前に差分を表示し、Tier Cは自動適用しません。

Limitations

検出の限界と手動確認

意図した宣言は自動で断定せず、勝敗の根拠を確認してから選びます。

• ツールへ貼っていない本番CSSは取得・比較しません。
• 入力したJavaScriptは実行しません。
• すべての画面幅とキーボード操作で最終確認してください。