:nth-child(2)を書いたのに狙った要素に当たらない——原因は「nth-childが要素の種類を見ていない」ことに集約されます。Chromium 141でnth-childとnth-of-typeの一致要素、display:noneの要素が数に入ること、暗黙のtbody、グリッドの行末が取れない理由、先頭挿入の再計算コストまで実測。奇数偶数・3n+1・範囲指定の書き方と、of S記法による正解まで整理します。
vertical-align:middleを書いたのに中央に来ない——原因は「適用対象」と「基準線」の2つに分かれます。Chromium 141で全13値をピクセル単位で実測し、centerという値が存在しないこと、block要素では1pxも動かないこと、基準が親の高さではなくベースラインであること、flex/grid/float/absoluteでは無視されることを数値で検証。上下中央の正解と、原因を1発で切り分ける診断スニペットまで整理します。
transitionを書いたのにアニメーションしない、モーダルは閉じるときだけ効く、初回だけ効かない——原因は「display:noneからの表示では補間の開始値が存在しない」という一点にほぼ収束します。従来のrequestAnimationFrame二重呼び出しによる回避から、@starting-styleとtransition-behavior:allow-discreteを使う現在の正攻法まで、切り分けの順番・そのまま貼れるコード・原因を3分で特定するコンソールスニペットを実務手順で整理します。
text-overflow: ellipsisや-webkit-line-clampが効かない原因を、Chromium 141の実測値で切り分け。flex/gridの中で省略されない理由、white-space:nowrapが要る条件、padding-bottomで3行目が覗く現象まで、コピペで使える診断スニペット付きで解説します。
margin-topが親の外に飛び出す、指定した余白が合計されない、空divで余白が消える——原因はすべてマージンの相殺です。どのCSSで相殺が止まるのかをChromium 141で実測し、overflow:clipは止まらない・padding-top:0.01pxは丸められて無効といった実務で踏む落とし穴まで、コピペで使える診断スニペット付きで解説します。
長いURLがカードからはみ出してスマホに横スクロールが出る、長音符「ー」が行頭に来る、見出しの最後に1文字だけ残る——日本語サイトの改行トラブルを、Chromium 141で実描画して切り分けます。overflow-wrap:break-wordが効かない理由（min-content幅303px→縮まない）、word-break:break-wordとの決定的な違い、line-break:strictの効果、text-wrap:balanceの実測値まで、コピペで使う指定と診断スニペット付き。
CSSを書いたのに::beforeが出ない——原因はほぼ3つです。contentを書き忘れてボックスが生成されていない、imgやinputなどの置換要素に付けている、displayがinlineのままでwidth/heightが無視されている。Chromium 141で実際に描画してピクセル単位で検証し、background-imageのアイコンが消える理由、absoluteの基準が親にならない条件、疑似要素がコピーされないのに読み上げられる挙動まで、診断スニペット付きで整理します。
子要素に height:100% を書いても高さが伸びない——原因はほぼ1つで、親の高さが「不定」だからです。親に min-height:200px を付けても子の100%は解決されず24pxのまま、flexの子に height:100% を書くと逆に stretch が壊れて縮む、といった挙動をChromium 141で実測しました。html/bodyの連鎖、absoluteの基準、padding込みで40pxはみ出すbox-sizing、そして今書くべき flex/grid の代替形まで、コピペできる数値付きで整理します。
見えているボタンが押せない——原因の大半は「透明な何かが上に乗っている」です。opacity:0 のオーバーレイは当たり判定が残る、visibility:hidden なら消える、::after が犯人のときDevToolsには親のdivしか出ない、負のマージンで重なった要素は position:relative を足した瞬間にクリックを奪う。この6ケースをChromium 141で実測し、犯人を30秒で特定する1行スニペットと犯人別の直し方をまとめました。
var()が効かないとき、CSSは「ひとつ前の宣言」に戻ってくれません。宣言ごと無効化されて継承値か初期値に落ちます。未定義・スコープ外・単位なし・url()の中・メディアクエリの条件部・定義済みだがfallbackが使われないケースなど、実務で踏む9パターンをChromium 141で実測し、@propertyで型を付けたときに壊れ方がどう変わるかまで検証しました。
