カスケード・セレクター
詳細度の競合、重複宣言、広すぎるセレクター、WordPressテーマCSSとの競合を確認します。
devs Tools / Paste Lab 0.4.0
CSS Doctor：CSSが効かない・崩れる原因を診断
HTMLとCSSをブラウザ内だけで解析し、カスケード、横はみ出し、sticky、z-index、WordPress追加CSSなどの原因を根拠付きで診断します。
- 貼り付けたソースはこのブラウザ内だけで処理
- URL・端末保存・アクセス解析にソースを含めない
- 外部URL取得・入力JavaScript実行なし
隔離診断画面を準備しています…
Workflow
「CSSが効かない」を、根拠のある所見へ
- 01
最小再現を貼る
問題が再現するHTMLとCSSだけを貼ります。URLやJavaScriptは入力対象にしません。
- 02
ソースと表示を照合
CSS構文木で構造を確認し、隔離iframeで寸法、カスケード、フォーカスを実測します。
- 03
小さく安全な修正を比較
根拠、副作用、適用前差分を確認します。Tier Cの候補は自動適用しません。
Coverage
調べられる問題と、調べられない問題
レイアウト・レスポンシブ
横はみ出し、固定幅、Flex最小幅、画像サイズ、sticky、重なり、viewport単位を確認します。
アクセシビリティ・動き
重複id、キーボードフォーカス、動きを減らす設定の有無を確認します。
対象外・最終確認が必要
本番サイトの取得、入力JavaScriptの実行、コードに問題がないことの保証は行いません。
Transparent rules
21の公開ルールと判定限界
CSS-CASCADE-002
CSS詳細度の競合
HYBRID · Tier B
CSS-CASCADE-003
同一ブロック内の重複宣言
STATIC · Tier A
CSS-CASCADE-006
影響範囲が広いセレクター
STATIC · Tier B
LAYOUT-001
ページ全体の横はみ出し
RUNTIME · Tier C
LAYOUT-002
表示領域外へ出ている要素
RUNTIME · Tier C
LAYOUT-003
固定幅がコンテナを超える
HYBRID · Tier B
LAYOUT-004
Flexアイテムが縮められない
HYBRID · Tier A
LAYOUT-006
改行できない文字列のはみ出し
RUNTIME · Tier B
LAYOUT-007
画像・SVG・動画のはみ出し
HYBRID · Tier A
POSITION-001
stickyの開始位置がない
HYBRID · Tier A
POSITION-002
stickyを制限するoverflow親
RUNTIME · Tier C
POSITION-003
stickyが動ける範囲がない
RUNTIME · Tier C
STACK-001
祖先の重なり順に閉じ込められている
RUNTIME · Tier C
STACK-002
z-indexが効く条件を満たしていない
HYBRID · Tier B
VIEWPORT-001
モバイルの100vhリスク
HYBRID · Tier B
A11Y-001
キーボードフォーカスが見えない
RUNTIME · Tier B
A11Y-004
重複したHTML id
STATIC · Tier C
MOTION-001
動きを減らす代替がない
STATIC · Tier B
WP-001
Gutenbergクラス欄の先頭ドット
STATIC · Tier A
WP-002
WordPressコアブロックへの広い上書き
STATIC · Tier B
WP-004
WordPressテーマCSSとの競合
HYBRID · Tier B
Glossary
診断結果に出てくる言葉の意味
- Cascade（カスケード）
- 複数のCSS宣言が一致した時に、どれを適用するか決める仕組みです。
- Specificity（詳細度）
- セレクターの強さを比較するための優先度です。
- Runtime probe（表示実測）
- 安全化したコードを表示した後に、幅や計算済みスタイルを測る確認です。
- Safety Tier（修正安全度）
- Aは限定的で戻しやすい候補、Bは要確認、Cは自動適用しない手順です。
- Confidence（確度）
- 表示された根拠が、その所見をどれだけ直接支えているかを示します。
- Stacking context（重なりのまとまり）
- 子要素のz-indexが外側と直接比較できなくなる、重なり順のまとまりです。
FAQ
利用前によくある質問
貼り付けたコードはサーバーへ送られますか？
送りません。解析、表示、修正、ZIP作成はブラウザ内で行い、アクセス解析とJSONレポートからもソースを除外します。
公開URLを直接診断できますか？
できません。任意URLの取得は安全上対応せず、最小再現のHTML・CSSを貼る方式です。
「所見なし」なら問題ありませんか？
保証ではありません。選択した条件で、現在対応しているルールによる問題を確認できなかったという意味です。
WordPress出力をそのまま貼れますか？
クラスの範囲と修正前後を先に確認してください。ブロックの追加CSSクラス欄には先頭ドットなしで入力します。