# AI生成CSSレビューチェックリスト

> ChatGPTやClaudeが生成したCSSをレビューするための観点集。AIがよく間違えるポイントをプロパティ別に全127項目収録。AI生成コードに登場するプロパティと突き合わせて使う。

- URL: https://www.css-dictionary.com/ai-review/

## アニメーション・エフェクト

- **backdrop-filter**（https://www.css-dictionary.com/property/backdrop-filter.md）: AIはfilterとbackdrop-filterを混同しがちです（filterは要素自身、backdrop-filterは要素の背後）。またAI生成のガラス風UIでよくある「効いていない」原因は、要素の背景が不透明（背後が見えない）ことです。背景は必ず半透明（rgba/color-mix）にする必要があります。ぼかし半径が大きいとスクロール時の負荷が高い点も指摘されにくい注意点です。
- **filter**（https://www.css-dictionary.com/property/filter.md）: 影の付与でAIはbox-shadowを選びがちですが、切り抜き画像（透過PNG/SVG）にはfilter: drop-shadow()が正解です（形状に沿った影になる）。またfilterを指定した要素は新しいスタッキングコンテキストを作り、子孫のposition: fixedがビューポートでなくその要素基準になる、という重大な副作用をAIはほぼ言及しません。
- **opacity**（https://www.css-dictionary.com/property/opacity.md）: opacityは子要素も道連れに透過します。「背景だけ半透明にしたい」ならopacityではなく背景色のアルファ値（rgba/色 + 透明度）が正解で、この取り違えはAIにも頻発します。またopacityが1未満の要素は新しいスタッキングコンテキストを作るため、z-indexの挙動が変わる副作用があります。
- **transition**（https://www.css-dictionary.com/property/transition.md）: AIはtransition: all を多用しがちですが、意図しないプロパティまでアニメーションしパフォーマンスも悪化するため、対象プロパティの明示が原則です。またdisplayやheight: autoは従来transitionできない代表格で、現在はtransition-behavior: allow-discreteやinterpolate-sizeという解決策があります（AIの知識にはないことが多い）。
- **transform**（https://www.css-dictionary.com/property/transform.md）: transformは1プロパティなので、hover時にtransform: scale()だけ書くと既存のtranslate()が消える上書き事故が定番です。現在はtranslate/rotate/scaleが個別プロパティとして独立しており（全ブラウザ対応）、AIはこの新しい書き方を知らないことがあります。
- **animation**（https://www.css-dictionary.com/property/animation.md）: animationショートハンドの値の順序（最初の時間がduration、2つ目がdelay）はAIも間違えます。またprefers-reduced-motion（視差効果を減らす設定）への配慮をAIは省略しがちなので、アニメーション実装時は必ずセットで要求してください。
- **@keyframes**（https://www.css-dictionary.com/property/keyframes.md）: AIは今でも-webkit-プレフィックス付きの@keyframesを出すことがありますが、現在は不要です。また同名の@keyframesは後の定義が完全に上書きします（マージされない）。0%/100%とfrom/toは同義で、複数セレクタ（0%, 50% { ... }）でキーフレームをまとめられます。
- **@starting-style**（https://www.css-dictionary.com/property/at-starting-style.md）: AIは「display: noneからフェードイン」の要望にJavaScript（クラス付替え+requestAnimationFrame）やkeyframesハックを提案しがちですが、2024年以降は@starting-style + transition-behavior: allow-discreteでCSSのみで実装できます。AIの生成コードでallow-discreteが抜けてdisplayが補間されず動かない、というのが最頻の失敗パターンです。
- **view-transition-name**（https://www.css-dictionary.com/property/view-transition-name.md）: AIは画面遷移アニメーションにFLIPテクニックやアニメーションライブラリ（Framer Motion等）を提案しがちですが、view-transition-name + startViewTransition()なら数行で済みます。クロスドキュメント（MPA）対応の@view-transitionはChrome 126+/Safari 18.2+でFirefox未対応（2026年7月時点）という段階差があり、AIはこの差を混同して全部使える/全部使えないと誤答しがちです。
- **animation-timeline**（https://www.css-dictionary.com/property/animation-timeline.md）: AIはスクロール連動の実装にscrollイベント+JSやIntersectionObserverを提案しがちですが、CSSのanimation-timelineで完結する場面が増えています。AI生成コードの最頻バグは「animationショートハンドの後にanimation-timelineを書かずリセットされる」順序ミスです。Firefox未対応（limited）という対応状況もAIの知識では古いことが多く、必ず現在の対応状況を確認してください。
- **interpolate-size**（https://www.css-dictionary.com/property/interpolate-size.md）: AIはアコーディオンの高さアニメーションにmax-heightハック（適当な大きい値へのtransition、速度が不自然になる欠陥あり）やgrid-template-rows: 0fr/1frテクニック、JSのscrollHeight実装を提案しがちです。Chrome系ではinterpolate-size: allow-keywordsが最も素直な解ですが、2026年7月時点でChrome限定（limited）のため、フォールバック前提の設計をAIに求めてください。

## インタラクション・UX

- **cursor**（https://www.css-dictionary.com/property/cursor.md）: AIは「クリックできる感」を出すために非インタラクティブ要素にまでcursor: pointerを付けがちですが、押せないものをポインターにするのはUX上の嘘になります。またカスタムカーソル画像には必ずフォールバック値が必要（cursor: url(...), pointer;）で、これを省略した無効構文が生成されることがあります。
- **visibility**（https://www.css-dictionary.com/property/visibility.md）: display: none（領域ごと消える・読み上げ対象外）、visibility: hidden（領域は残る・読み上げ対象外）、opacity: 0（領域も操作性も残りフォーカス可能）の3択の使い分けはAIの説明が雑になりがちです。visibilityはdiscreteながらtransition可能（遅延切替に使える）という中級知識も役立ちます。
- **user-select**（https://www.css-dictionary.com/property/user-select.md）: AIはUI装飾の一環でuser-select: noneを広範囲に付けがちですが、本文まで選択不能にするのはユーザーの引用・コピー・翻訳を妨げる悪手です。ボタンラベルやドラッグUIなど限定的に使うもの。逆にuser-select: allは「クリックで全選択」でコード片やIDのコピーUXに便利です。
- **pointer-events**（https://www.css-dictionary.com/property/pointer-events.md）: pointer-events: noneはクリックを下の要素へ素通しさせる（無効化ではなく透過）点の理解が重要です。オーバーレイ装飾を透過させつつ、中の特定ボタンだけpointer-events: autoで復活させる、という組み合わせ技はAIが自発的に出しにくい定番パターンです。noneの要素はhoverもtitleも効かなくなる点にも注意。
- **content-visibility**（https://www.css-dictionary.com/property/content-visibility.md）: content-visibility: autoには contain-intrinsic-size の併用がほぼ必須です（未描画部分の想定サイズを与えないとスクロールバーが暴れる）。AIはこの相棒を省略しがちです。またAIの知識では「Chrome限定の実験的機能」と古いことがありますが、現在は全ブラウザ対応（Baseline）です。
- **scroll-behavior**（https://www.css-dictionary.com/property/scroll-behavior.md）: html { scroll-behavior: smooth }はページ内リンクを滑らかにしますが、ページ内検索やアンカー着地まで常時スムーズになるのを嫌う場合はJS側のscrollIntoView({behavior})で個別制御します。またprefers-reduced-motion環境ではautoに戻す配慮（メディアクエリで打ち消し）をAIは省略しがちです。
- **scroll-snap-type**（https://www.css-dictionary.com/property/scroll-snap-type.md）: mandatoryとproximityの選択は重要で、AIは安易にmandatoryを選びがちです。mandatoryはスナップ点の間に長いコンテンツがあると「どこにも止まれず読めない」事故を起こすため、内容の高さが読み切れる保証がない縦スクロールではproximityが安全です。スナップ位置は子側のscroll-snap-alignとセットで機能します。
- **scroll-snap-align**（https://www.css-dictionary.com/property/scroll-snap-align.md）: スナップの吸着位置を決めるのは「子要素側」のscroll-snap-alignで、コンテナに書いても効きません——コンテナ側(type)と子側(align)の役割分担はAIの生成コードでも崩れがちです。startとcenterの使い分け（一覧はstart、ギャラリーはcenter）が定番です。
- **overscroll-behavior**（https://www.css-dictionary.com/property/overscroll-behavior.md）: モーダル内スクロールが端に達すると背面ページまでスクロールする「スクロール連鎖」を止めるのがoverscroll-behavior: containです。AIはこの問題にbodyのoverflow: hidden切替（JS）を提案しがちですが、CSSだけで解ける場面が多いです。ただしSafariは未対応のため、Safari要件があるなら従来法との併用が必要です。
- **resize**（https://www.css-dictionary.com/property/resize.md）: resizeはoverflowがvisible以外の要素にしか効きません——この前提条件をAIは省略しがちです。またtextareaの自動サイズ調整（内容に応じて伸びる）はresizeではなくfield-sizing: contentの領域で、手動リサイズと自動リサイズの区別が必要です。方向はboth/horizontal/verticalを選べます。
- **scroll-snap**（https://www.css-dictionary.com/property/scroll-snap.md）: scroll-snapはコンテナ側（scroll-snap-type）と子側（scroll-snap-align）の2点セットで初めて動きます。AIの生成コードは片側だけの指定になりがちです。JSカルーセルライブラリの多くはscroll-snap+少量のJSで置き換えられる、というモダン化の視点も有効です。
- **field-sizing**（https://www.css-dictionary.com/property/field-sizing.md）: AIはtextareaの自動リサイズにscrollHeightを使ったJavaScript実装やライブラリを提案しがちですが、field-sizing: contentならCSS1行です。2026年6月にBaseline入りしたばかりの新しい機能のため、ほとんどのAIの学習データに存在しません。「そんなプロパティはない」とAIが否定してきたら、このページを見せてください。

## スペーシング・サイズ

- **gap**（https://www.css-dictionary.com/property/gap.md）: AIは古い知識でmargin + :last-child打ち消しや負マージンハックを提案することがありますが、flexのgapも2021年から全ブラウザ対応済みで、現在はgap一択です。gapは「アイテム間」だけに効き、外周には効かない（そこはpadding）という役割分担も明確に伝わります。
- **padding**（https://www.css-dictionary.com/property/padding.md）: パーセンテージのpaddingは上下方向でも「親の幅」基準という直感に反する仕様があり、かつてはアスペクト比ハックに使われました。AIが古いpadding-topハックを出してきたら、現在はaspect-ratioプロパティが正解です。
- **margin**（https://www.css-dictionary.com/property/margin.md）: 縦方向のマージン相殺（collapsing）をAIは考慮せず、「余白が思ったより小さい/大きい」コードを出しがちです。また要素間の余白管理は個別marginよりも親のgapに寄せるのがモダンな設計で、AIには方針を明示すると一貫したコードになります。
- **width**（https://www.css-dictionary.com/property/width.md）: AIはwidth: 100%とwidth: 100vwを混同しがちです。100vwはスクロールバーの幅を含むため横スクロールが発生します。またインライン要素にはwidthが効かない、fit-content/min-content/max-contentという内在サイズキーワードの存在も、AIの提案から漏れがちです。
- **height**（https://www.css-dictionary.com/property/height.md）: height: 100%は親に明示的な高さがないと効かない点がAIコードの定番バグです。また100vhはモバイルのアドレスバーで実際の画面からはみ出すため、現在は100dvh（動的ビューポート単位）が推奨ですが、AIは古い知識で100vhを出しがちです。
- **max-width**（https://www.css-dictionary.com/property/max-width.md）: min-widthとmax-widthが矛盾する場合はmin-widthが勝つ、という優先規則をAIは説明し忘れます。またコンテナの定番はwidth: 100% + max-widthではなく、widthは初期値autoのままmax-width + margin-inline: autoで十分なことが多いです。
- **min-width**（https://www.css-dictionary.com/property/min-width.md）: flexアイテムのmin-widthの初期値はautoで「コンテンツの最小幅より縮まない」ため、長いテキストや画像を含むアイテムがはみ出す原因の筆頭です。処方箋はmin-width: 0（またはoverflow: hidden）。この知識はAIの「flexがはみ出す」系の回答から抜けがちなので明示的に確認してください。
- **box-sizing**（https://www.css-dictionary.com/property/box-sizing.md）: AIは「*, *::before, *::after { box-sizing: border-box }のリセットが既に入っている」前提で幅計算のコードを書くことがあります。プロジェクトにリセットがあるか確認してから使うこと。またborder-boxでもmarginは含まれない（含むのはpaddingとborder）点の誤解が混じることがあります。
- **scroll-margin**（https://www.css-dictionary.com/property/scroll-margin.md）: 固定ヘッダーのあるページでアンカーリンクの着地位置がヘッダーに隠れる問題——AIはpadding-top+負マージンの古いハックを出しがちですが、現在はscroll-margin-top: ヘッダー高さ の1行が正解です。scroll-padding（コンテナ側指定）との対の関係も覚えておくと使い分けられます。
- **margin-inline**（https://www.css-dictionary.com/property/margin-inline.md）: AIは国際化（RTL）対応の文脈でもmargin-left/rightを出しがちです。RTL・縦書き対応を求めるなら「論理プロパティで」と明示すると精度が上がります。逆にAIがmargin-inlineを使ったコードを古いブラウザ向けに書き直す際、start/endの対応（LTRでstart=左）を取り違えることがあります。
- **padding-inline**（https://www.css-dictionary.com/property/padding-inline.md）: AIはpadding-left/rightとpadding-inlineを無差別に混在させたコードを書くことがあります。コードベースの方針（物理か論理か）を伝えて統一させると保守性が上がります。縦書き文脈での軸の向き（inlineが上下になる）はAIもよく間違えるポイントです。

## テキスト・フォント

- **color**（https://www.css-dictionary.com/property/color.md）: AIが見落としがちなのはcurrentColorの活用です。SVGアイコンやborderにcurrentColorを指定しておけば、colorを変えるだけで一括追従します。またリンク色をcolorで上書きする際、:visited/:hover等の状態まで面倒を見ない生成コードが多いので、状態込みで依頼すると質が上がります。
- **font-size**（https://www.css-dictionary.com/property/font-size.md）: AIはfont-sizeをpxで直書きしがちですが、ユーザーのブラウザ設定やズームを尊重するならremが原則です。「html { font-size: 62.5% }で1rem=10pxにするハック」をAIは今でも出すことがありますが、ユーザー設定の前提を崩すため現在は非推奨とする意見が主流です。
- **font-weight**（https://www.css-dictionary.com/property/font-weight.md）: 指定したウェイトがフォントに存在しない場合、ブラウザが機械的に太らせる「合成ボールド」になり、特に日本語フォントでは著しく汚くなります。AIはWebフォントの読み込みウェイトと指定ウェイトの対応を確認しないことが多いので、使うウェイトを読み込んでいるかをセットで確認してください。可変フォントなら100〜900の任意値が使えます。
- **line-height**（https://www.css-dictionary.com/property/line-height.md）: line-heightは単位なし（例: 1.7）で書くのが原則です。em や % で書くと「計算後の値」が子に継承され、フォントサイズの違う子要素で行間が破綻します。AIは1.5emのような単位付きを出すことがあるので注意。日本語本文は英語より広めの1.7〜1.9が読みやすい目安です。
- **letter-spacing**（https://www.css-dictionary.com/property/letter-spacing.md）: letter-spacingは最後の文字の後ろにも付くため、中央寄せテキストがわずかに左にずれて見えます（見出しで顕著）。AIはこの相殺（text-indentやpadding調整）まで気が回りません。日本語の見出しでは0.02〜0.08em程度の字間がよく使われますが、本文への広い字間は可読性を下げます。
- **text-align**（https://www.css-dictionary.com/property/text-align.md）: text-alignが配置するのは「インラインコンテンツ」であり、ブロック要素自体の中央寄せ（margin-inline: auto）とは別物です。この混同はAIにも頻発します。またtext-align: justify（両端揃え）は日本語では約物や英単語の周りで不自然な空きを生みやすく、扱いが難しい指定です。
- **text-decoration**（https://www.css-dictionary.com/property/text-decoration.md）: AIは下線のカスタマイズにborder-bottomを使いがちですが、現在はtext-decoration-color / -thickness / text-underline-offsetで下線自体を細かく制御できます（複数行でも正しく機能するのが利点）。リンクの下線を消すだけの提案（アクセシビリティ低下）にも注意が必要です。
- **white-space**（https://www.css-dictionary.com/property/white-space.md）: 「改行文字を反映したい」という要望にAIはJSでの<br>変換を提案しがちですが、white-space: pre-line（改行は反映・連続スペースは畳む）で済みます。pre-wrapとの違い（スペースも保持するか）、nowrapが省略記号の三点セット（overflow: hidden + text-overflow: ellipsis）の一角である点もセットで押さえると精度が上がります。
- **text-overflow**（https://www.css-dictionary.com/property/text-overflow.md）: text-overflow: ellipsisは単独では動きません。overflow: hidden + white-space: nowrapとの三点セットが必須で、AIはこのセットを崩した不完全なコードを出すことがあります。複数行の省略は別の仕組み（-webkit-line-clamp）で、これもdisplay: -webkit-box等との定型セットが必要です。
- **word-break**（https://www.css-dictionary.com/property/word-break.md）: AIは「はみ出し対策」にword-break: break-allを多用しがちですが、英単語がぶつ切りになる副作用があります（多くの場合overflow-wrapが正解）。また日本語の見出しにはword-break: auto-phrase（文節改行、Chrome限定）という新しい選択肢があり、AIの知識にはまだ無いことが多い機能です。
- **writing-mode**（https://www.css-dictionary.com/property/writing-mode.md）: 縦書き（vertical-rl）にすると、幅と高さ・上下左右の意味が入れ替わるため、物理プロパティ（width, margin-left等）で書かれたスタイルは破綻します。縦書き対応は論理プロパティ（inline/block系）とセットが原則です。数字や英字を正立させるtext-orientationやtext-combine-upright（縦中横）の存在もAIは出し忘れがちです。
- **caret-color**（https://www.css-dictionary.com/property/caret-color.md）: 入力欄の点滅カーソル（キャレット）の色だけを変えるプロパティで、ブランドカラーの入力UIの仕上げに効きます。AIはこのプロパティの存在自体を出さないことが多く、カーソル色が背景に溶けて見えない（ダークUIで黒キャレット）問題の解として覚えておく価値があります。transparentにして独自キャレットを描く上級技もあります。
- **vertical-align**（https://www.css-dictionary.com/property/vertical-align.md）: vertical-alignはインライン要素とtable-cellにしか効きません。ブロック要素の上下中央に使おうとするのは最頻出の誤用で、それはflex/gridの仕事です。実務での主な出番は2つ: 画像の下にできる隙間の解消（vertical-align: bottom等）と、テキスト横のアイコンの微調整（middleや数値指定）です。
- **text-transform**（https://www.css-dictionary.com/property/text-transform.md）: text-transformは見た目だけの変換で、コピーされるテキストやスクリーンリーダーが読む内容は元のままです（略語が大文字化で1字ずつ読まれる等の影響はあり得ます）。「データ自体を大文字にしたい」ならJSやサーバー側の仕事で、この責任分界をAIは曖昧にしがちです。日本語には効果がないため英字UIラベル向けです。
- **text-wrap**（https://www.css-dictionary.com/property/text-wrap.md）: AIはtext-wrap自体を知らない（2024年普及のため学習データにない）か、逆にどこにでもbalanceを付ける過剰提案をしがちです。balanceは短いテキスト向け・prettyは段落向けという使い分け、そしてprettyは2026年時点でFirefox未対応（limited）という対応状況の差をAIはよく間違えます。
- **overflow-wrap**（https://www.css-dictionary.com/property/overflow-wrap.md）: AIは「テキストのはみ出し」に対してword-break: break-allを提案しがちですが、多くの場合overflow-wrap: break-wordが正解です（英単語の可読性を壊さない）。また旧名のword-wrapを出すことも多いです。flex内で効かない問題にはmin-width: 0の併用が必要という文脈をAIはよく落とします。
- **text-spacing-trim**（https://www.css-dictionary.com/property/text-spacing-trim.md）: AIは日本語約物の空き調整に、手動のletter-spacing負値指定やJSライブラリ（約物半角化処理）を提案しがちですが、text-spacing-trimがネイティブの解です。日本語組版特有の機能のため英語圏中心のAIは存在自体を知らないことが多く、「text-spacing-trimを使って」と明示するのが有効です。

## レイアウト・配置

- **display**（https://www.css-dictionary.com/property/display.md）: AIはflexとgridの選択理由を説明せずにどちらかを使いがちです（目安: 1方向の並び=flex、行と列の2次元=grid）。またdisplay: noneはスクリーンリーダーからも完全に消える点を省略しがちで、視覚的にだけ隠したい場合の代替（sr-onlyパターン等）を確認する必要があります。
- **display: flex**（https://www.css-dictionary.com/property/display-flex.md）: AIの定番ミスはflex-direction: columnにしたときにjustify-contentとalign-itemsの軸が入れ替わる点の混同です（justify-contentは常に主軸方向）。「縦中央にしたいのに効かない」場合はまず方向と軸の対応を疑ってください。
- **display: grid**（https://www.css-dictionary.com/property/display-grid.md）: AIはgrid一発で組める場面でflexの入れ子を量産しがちです。カード一覧や2次元配置はgrid+gapの方が簡潔です。またgrid-template-areasによる視覚的なレイアウト定義をAIはあまり提案しないので、明示的に求めると保守しやすいコードになります。
- **order**（https://www.css-dictionary.com/property/order.md）: AIは「表示順を変えたい」という要望にorderを気軽に使いますが、orderが変えるのは見た目だけで、スクリーンリーダーの読み上げ順やTabキーのフォーカス順はHTML順のままです。順序が本質的に違うならHTML自体を変えるのが正解で、orderはレスポンシブでの限定的な並び替えに留めるべきです。
- **container-type**（https://www.css-dictionary.com/property/container-type.md）: AIはinline-sizeとsizeの違いを曖昧に説明しがちです。通常はinline-size（幅のみ監視）が正解で、size（高さも監視）は要素自身に明示的な高さが必要になるため、安易に使うと子のコンテンツで高さが決まるレイアウトが壊れます。またcontainer-typeを指定した要素自身のサイズはコンテナクエリで参照できません（参照できるのは子孫から）。
- **subgrid**（https://www.css-dictionary.com/property/subgrid.md）: AIは学習時期によって「subgridはFirefox限定」と古い情報を答えますが、Chrome 117（2023年9月）以降全ブラウザ対応済みです。またsubgridは行・列それぞれ個別に継承指定でき（grid-template-columns: subgridなど）、gapも親から継承されます（上書き可能）。「カード内の要素の高さを揃える」定番問題の最も正しい解です。
- **aspect-ratio**（https://www.css-dictionary.com/property/aspect-ratio.md）: AIは古い知識でpadding-top比率ハック（padding-top: 56.25%）を提案しがちですが、現在はaspect-ratio: 16 / 9の1行で済みます。またimg要素はwidth/height属性からアスペクト比が自動計算されるため、CLS（レイアウトシフト）対策には属性指定＋aspect-ratioの理解が重要です。両方の寸法を明示すると aspect-ratio は無視される仕様も見落とされがちです。
- **place-items**（https://www.css-dictionary.com/property/place-items.md）: place-items: centerはgridの完全中央寄せ最短コード（align-items + justify-itemsの一括指定）ですが、AIはこれをflexコンテナに書くことがあります。flexにはjustify-itemsが存在しないため半分しか効きません（flexならalign-items + justify-content）。2値指定の順序はalign→justifyです。
- **place-content**（https://www.css-dictionary.com/property/place-content.md）: place-itemsが「各セル内のアイテム」の配置なのに対し、place-contentは「トラック群全体」の配置です。AIはこの2つを混同した説明をよくします。コンテンツ全体をコンテナ中央に置くのがplace-content、各セルの中でアイテムを中央に置くのがplace-itemsです。
- **flex-direction**（https://www.css-dictionary.com/property/flex-direction.md）: row/columnを切り替えると主軸が変わり、justify-content（主軸）とalign-items（交差軸）の意味が入れ替わります。AIはレスポンシブでcolumnに切り替えた際に、中央寄せ指定を追従させ忘れることが多いです。
- **justify-content**（https://www.css-dictionary.com/property/justify-content.md）: space-betweenは最終行で要素がまばらに広がる問題があり、AIは一覧グリッドに安易にspace-betweenを使いがちです（gap+flex-start、またはgridが正解のことが多い）。またjustify-contentは主軸方向にしか効かない点の混同も定番です。
- **justify-items**（https://www.css-dictionary.com/property/justify-items.md）: justify-itemsはgrid（とブロックレイアウト）専用で、flexコンテナでは無効です。AIはflexに書いて「効かない」コードを出しがちで、flexで同じことをするなら子側のmargin-inline: autoやコンテナのjustify-contentを使います。
- **align-items**（https://www.css-dictionary.com/property/align-items.md）: デフォルトがstretchのため「子要素の高さが勝手に揃う」ことをAIは説明せずに使いがちです。1行のアイテム配置はalign-items、複数行の行間配置はalign-contentという使い分けもよく混同されます。
- **align-content**（https://www.css-dictionary.com/property/align-content.md）: align-items（各行内のアイテム配置）とalign-content（行そのものの配置）の混同はAIの定番です。align-contentは複数行あるときだけ意味を持つため、flexではflex-wrap: wrapが前提になります（単一行では通常効きません）。「折り返したflexの行間を詰めたい」はalign-content: flex-startが答えです。
- **flex-wrap**（https://www.css-dictionary.com/property/flex-wrap.md）: AIは「一定幅で折り返すカード列」をメディアクエリで書きがちですが、flex-wrap: wrap + flex-basis（またはminmax付きgrid）ならブレークポイントなしで自動化できます。折り返し後の行間が広がって見える問題はalign-content、折り返しタイミングは子のflex-basisとmin-widthで制御する、という関連知識までセットで確認すると精度が上がります。
- **flex (grow/shrink/basis)**（https://www.css-dictionary.com/property/flex-grow-shrink-basis.md）: flex: 1はflex: 1 1 0%の省略で、basisが0になるため「コンテンツ量に関係なく均等分配」になります。一方flex-grow: 1だけ指定するとbasisはautoのままで「コンテンツ量に応じた分配」です。この違いはAIの説明でも頻繁に曖昧にされます。また「flexアイテムがつぶれる/はみ出す」問題の多くはflex-shrinkとmin-width: autoの相互作用で、flex-shrink: 0またはmin-width: 0が処方箋です。
- **grid-template-columns**（https://www.css-dictionary.com/property/grid-template-columns.md）: repeat(auto-fit, minmax(240px, 1fr))のレスポンシブグリッドは定番ですが、AIはauto-fitとauto-fillの違い（アイテムが少ないとき広がるか空トラックを残すか）を逆に説明することがあります。また%とfrの違い（frはgapを引いた残りを分配）も混同されがちです。
- **grid-template-areas**（https://www.css-dictionary.com/property/grid-template-areas.md）: AIはgrid-template-areasの制約（各行の列数が全行で一致、同名エリアは矩形のみ）を破った無効テンプレートを生成することがあります。1つでも規則違反があるとテンプレート全体が無効になり黙って崩れるので、行の列数と矩形性を必ず確認してください。空セルはピリオド（.）です。
- **grid-template-columns: repeat**（https://www.css-dictionary.com/property/grid-auto-fit-fill.md）: auto-fitとauto-fillの違いはAIも逆に説明しがちです: アイテムが少ないとき、auto-fitは空トラックを潰してアイテムを広げ、auto-fillは空トラックを残します。また定番のminmax(240px, 1fr)は、コンテナが240px未満になるとはみ出すため、minmax(min(240px, 100%), 1fr)としておくと小画面でも安全です（この防御はAIはまず出しません）。
- **position**（https://www.css-dictionary.com/property/position.md）: AIはposition: absoluteを使うとき基準となる祖先（position: relative等）の指定を忘れた壊れコードを出しがちです。またstickyは「親にoverflow: hidden等があると効かない」「top等の閾値指定が必須」という2大条件をよく落とします。
- **z-index**（https://www.css-dictionary.com/property/z-index.md）: AIは重なり問題に対して安易にz-index: 9999を出しがちですが、スタッキングコンテキストが違えば数値をいくら上げても勝てません。transformやopacity、filterが新しいスタッキングコンテキストを作る点はAIも人間も見落とす定番ポイントです。
- **overflow**（https://www.css-dictionary.com/property/overflow.md）: overflow: hiddenが祖先にあるとposition: stickyが効かなくなる副作用は、AIが原因究明で見落とす定番です。単に「はみ出しを切りたい」だけならスクロールコンテナを作らないoverflow: clipという新しい選択肢もあります。
- **inset**（https://www.css-dictionary.com/property/inset.md）: insetはtop/right/bottom/leftの一括指定で、値の順序もmarginと同じ時計回りです。inset: 0による全面配置（オーバーレイの定番）が最頻出ですが、position指定がないと何も起きない点はtop等と同じです。書字方向対応が必要ならinset-inline/inset-blockという論理版があります。
- **align-self**（https://www.css-dictionary.com/property/align-self.md）: コンテナのalign-items（全員）に対する個別上書きがalign-self（自分だけ）です。AIは「1つだけ配置を変えたい」場面でコンテナ側をいじる遠回りをすることがあります。flexの交差軸・gridのブロック軸という対象軸の違い、stretchを解除して固有サイズに戻す用途も押さえておくと便利です。
- **justify-self**（https://www.css-dictionary.com/property/justify-self.md）: justify-selfはgrid（とブロック）用で、flexアイテムには効きません——flexで「自分だけ右へ」はmargin-left: auto（margin-inline-start: auto）が定石です。この振り分けはAIも間違えるポイントで、「gridならjustify-self、flexならauto margin」と覚えるのが確実です。
- **grid-column**（https://www.css-dictionary.com/property/grid-column.md）: span構文（grid-column: span 2）と負の線番号（grid-column: 1 / -1で全幅）はグリッドの生産性を大きく上げますが、AIは負番号の便利さ（列数を知らなくても端まで届く）を活かさないことがあります。線番号は「線」であり「セル」ではない（1 / 3は2セル分）点の混乱も定番です。
- **grid-row**（https://www.css-dictionary.com/property/grid-row.md）: grid-columnと同じ線番号・span構文が行方向にも使えます。注意点は暗黙グリッド: 明示した行数を超える配置はgrid-auto-rowsのサイズで自動生成され、意図しない行高になりがちです。Pinterest風の段組はgrid-rowのspanとdense配置で近似できますが、真のMasonryは別仕様という区別もAIは曖昧にしがちです。
- **position: sticky**（https://www.css-dictionary.com/property/position-sticky.md）: stickyが効かない三大原因は「祖先のoverflow: hidden/auto」「top等の閾値未指定」「親の高さ不足（貼り付く余地がない）」です。AIは症状からこの三択に絞り込めないことが多いので、原因調査はこの順で依頼すると速いです。table のヘッダー行（th）にも使える点は意外と知られていません。
- **Logical Properties**（https://www.css-dictionary.com/property/logical-properties.md）: 論理プロパティ（inline/block系）と物理プロパティ（left/right系）の混在は、上書き関係が読めない保守困難なCSSを生みます。AIはプロジェクトの方針を確認せず混ぜてくるので、「論理で統一」等の方針を最初に伝えるのが有効です。RTL・縦書き要件がなくても、margin-inline: autoなど記述が短くなる場面は多くあります。
- **inset-inline**（https://www.css-dictionary.com/property/inset-inline.md）: AIは絶対配置でtop/left/right/bottomを使いがちで、論理版のinset-inline/inset-blockの存在を出してこないことが多いです。RTL対応が要件にあるなら明示的に論理プロパティを指定させてください。inset: 0とinset-inline: 0の違い（前者は4方向）もAIが混同しやすい点です。
- **アンカーポジショニング**（https://www.css-dictionary.com/property/anchor-positioning.md）: AIはツールチップ実装にFloating UI（Popper.js）やgetBoundingClientRect()でのJS位置計算を提案しがちですが、2026年からはCSSアンカーポジショニングがBaseline入りしています。AIの知識では「Chrome限定の実験的機能」と古い認識のことが多い点、またanchor-nameの--プレフィックスを落とす生成ミスに注意してください。

## レスポンシブ・関数

- **@container**（https://www.css-dictionary.com/property/container-queries.md）: AIはレスポンシブ対応を反射的に@media（画面幅基準）で書きますが、コンポーネント単位なら@container（親要素基準）が正解の場面が増えています。AI生成コードの最頻バグは親へのcontainer-type指定漏れで、これがないと@containerは一切動きません。cqw/cqi等のコンテナクエリ単位もAIの知識が浅い領域です。
- **clamp()**（https://www.css-dictionary.com/property/clamp.md）: AIの生成するclamp()は中央値がvwのみ（例: clamp(1rem, 2vw, 2rem)）になりがちで、これはブラウザのズームや文字サイズ設定に追従しにくいアクセシビリティ上の問題があります。中央値はrem+vwの混合（例: clamp(1rem, 0.8rem + 1vw, 2rem)）が推奨です。最小値と最大値を逆に書く単純ミスもAIにはよくあります。
- **min() / max()**（https://www.css-dictionary.com/property/min-max-functions.md）: min()とmax()は直感と逆に働くためAIも人も混乱します: min(100%, 600px)は「最大600pxまで」という上限指定、max(50%, 300px)は「最低300pxを確保」という下限指定です。AIが逆の関数を選んでいないか、境界値で必ず確認してください。
- **linear-gradient()**（https://www.css-dictionary.com/property/linear-gradient.md）: 角度の基準はAIも混同します: 0degは「下から上」、90degは「左から右」で、to right等のキーワード構文と角度の対応を取り違えた生成コードが出がちです。また同位置に2つの色を置くハードストップ（#fff 50%, #000 50%）でストライプや分割背景が作れることは、知っていると指示の幅が広がります。
- **radial-gradient()**（https://www.css-dictionary.com/property/radial-gradient.md）: 構文の順序（形状 サイズ at 位置, 色...）をAIは崩しがちで、特にat句の位置ミスで無効になるコードが出ます。closest-side/farthest-corner等のサイズキーワードの違いも曖昧に説明されがちです。スポットライト風の演出や、複数のradial-gradientを重ねたメッシュ風背景が定番用途です。
- **@media (prefers-color-scheme)**（https://www.css-dictionary.com/property/prefers-color-scheme.md）: prefers-color-schemeが検知するのはOS/ブラウザの設定のみで、サイト内の手動テーマ切替ボタンは別途仕組み（クラス切替+保存）が必要です。AIは「メディアクエリだけでテーマ切替ボタンも実現できる」かのような混同をすることがあります。現在はlight-dark()+color-schemeの上書きで手動切替も簡潔に書けます。
- **@media (prefers-reduced-motion)**（https://www.css-dictionary.com/property/prefers-reduced-motion.md）: AIはアニメーション実装時にこの配慮自体を忘れるのが最大の問題です。前庭障害などで動きに敏感なユーザーのための設定で、「アニメを全部消す」のではなく「動きを減らす（フェードに置き換える等）」のが良い設計です。@media (prefers-reduced-motion: reduce)での上書きをアニメ実装の定型に組み込んでください。
- **color-mix()**（https://www.css-dictionary.com/property/color-mix.md）: AIはSassのdarken()/lighten()やrgba()の手計算、JavaScriptでの色操作を提案しがちですが、2023年以降はcolor-mix()でCSSのみで完結します。またAIは色空間の指定（in srgb / in oklch）を省略したり深く考えずにsrgbを選びがちですが、混色の自然さが大きく変わる重要な選択です。相対色構文（rgb(from ...)）との混同にも注意。
- **light-dark()**（https://www.css-dictionary.com/property/light-dark.md）: AIはダークモード実装に「@media (prefers-color-scheme: dark)で変数を再定義する」冗長パターンを提案しがちですが、2024年以降はlight-dark()で1行に集約できます。AIが生成したlight-dark()が効かない場合、ほぼ確実にcolor-scheme: light darkの指定漏れです。また色以外の値に使おうとする誤生成にも注意してください。
- **oklch()**（https://www.css-dictionary.com/property/oklch.md）: AIは色指定にhexやhsl()を使いがちで、OKLCHの知覚均一性を活かしたパレット設計は知識が浅い領域です。また相対色構文（oklch(from ...)）の文法をAIはよく間違えます（from句の位置、l c hチャンネル名の書き方）。Tailwind CSS v4がOKLCHを採用するなど、実務でも標準になりつつあります。

## 擬似クラス

- **:hover**（https://www.css-dictionary.com/property/pseudo-hover.md）: タッチデバイスでは:hoverがタップ後に貼り付く（sticky hover）ため、素の:hoverだけで書くとスマホで不自然になります。AIはこの配慮を省略しがちで、@media (hover: hover)で「ホバーできる環境だけ」に限定するのが現代の定石です。ホバーでしか到達できない情報を作らない（キーボード・タッチ代替）ことも重要です。
- **:nth-child()**（https://www.css-dictionary.com/property/pseudo-nth-child.md）: :nth-child()は「親の中での位置」で数え、型は無関係です（型で数えるのは:nth-of-type()）。混在した子要素があるとAIもこの2つを取り違えます。また比較的新しいof構文（:nth-child(2 of .item)）を使うと「特定クラスの中でn番目」が選べ、従来JSが必要だった選択がCSSで書けます。
- **:nth-of-type()**（https://www.css-dictionary.com/property/pseudo-nth-of-type.md）: :nth-of-type()が数えるのは「同じ要素型（タグ）」の中での順番で、クラスは考慮されません。「.item の3番目」のつもりで div.item:nth-of-type(3) と書くと、クラスのないdivも数に入るためズレます——これはAIの生成コードでも頻出のバグです。クラス基準なら:nth-child(n of .item)が正解です。
- **:first-child**（https://www.css-dictionary.com/property/pseudo-first-child.md）: :first-childは「親の最初の子」であり、「その型の最初」ではありません。前に別のタグ（例: 見出しの前のアイコンdiv）があると効かず、その場合は:first-of-typeが正解——この取り違えはAI・人間ともに定番です。「最初以外すべて」には li + li や :not(:first-child) のパターンがあります。
- **:focus-visible**（https://www.css-dictionary.com/property/pseudo-focus-visible.md）: AIは今でも「フォーカスの枠を消す」ためにoutline: noneを単独提案することがありますが、キーボード利用者への重大なアクセシビリティ破壊です。正解は:focus-visibleで「キーボード操作時だけ」表示する使い分け。マウスクリックでは出ず、Tab移動では出る、という理想の挙動がJSなしで手に入ります。
- **:has()**（https://www.css-dictionary.com/property/pseudo-has.md）: AIは学習時期によって「:has()は未対応ブラウザが多いのでJavaScriptで実装すべき」と古い提案をしがちですが、2023年12月に全主要ブラウザ対応済み（Baseline）です。逆にAIが生成した:has()が意図通り動かない場合、:has()内のネスト（:has(:has())は不可）や、擬似要素（::before等）を引数に書いている（無効）ケースが典型です。
- **:user-valid / :user-invalid**（https://www.css-dictionary.com/property/pseudo-user-valid.md）: AIはフォームバリデーションの見た目に:invalid直付け（初期表示から赤くなる欠陥UI）か、JSでtouched/dirtyフラグを管理する重い実装を提案しがちです。:user-invalidを知らないAIも多いので、「:user-valid/:user-invalidを使って」と明示すると質の高いコードが出ます。
- **:focus-within**（https://www.css-dictionary.com/property/pseudo-focus-within.md）: AIは「入力中に親要素を装飾」という要望にfocusin/focusoutイベントで親にクラスを付けるJavaScriptを提案しがちですが、:focus-withinで1行です。逆に:focus-visibleと:focus-withinを混同した説明をすることもあります（前者はキーボード判定、後者は子孫判定で直交する概念）。

## 背景・装飾

- **object-fit**（https://www.css-dictionary.com/property/object-fit.md）: coverとcontainの取り違えがAIにも頻発します（cover=領域を埋めて見切れる、contain=全体が見えて余白が出る）。またobject-fitはimg/video自身に指定するもので、親要素に書いても効きません。img側にwidth/height（またはaspect-ratio）でボックスサイズを与えないと効果が見えない点も生成コードの定番ミスです。
- **background-color**（https://www.css-dictionary.com/property/background-color.md）: backgroundショートハンドは指定しなかった項目をすべて初期値にリセットします。AIがbackground: url(...)と別の場所のbackground-colorを混在させると、順序次第で色が消える事故が起きます。ショートハンドと個別プロパティの混在は方針を決めて統一するのが安全です。
- **background-image**（https://www.css-dictionary.com/property/background-image.md）: 複数背景はカンマ区切りで「先に書いたものが上」に重なります。AIはこの重ね順を逆に説明することがあります（グラデーションオーバーレイ+写真の定番でよく間違える）。また意味のある画像をbackground-imageにするとalt相当がなく印刷やアクセシビリティで不利なので、コンテンツ画像はimg要素が原則です。
- **background-size**（https://www.css-dictionary.com/property/background-size.md）: coverとcontainの取り違えはobject-fitと同様にAIでも頻発します（cover=領域を埋めて見切れる、contain=全体表示で余白）。また%指定は「要素サイズに対する割合」で画像の縦横比を無視するため、意図せず歪んだ背景になる生成コードがあります。
- **background-position**（https://www.css-dictionary.com/property/background-position.md）: %指定の意味が特殊で、「画像の50%地点を要素の50%地点に合わせる」という基準点同士の対応です（pxのような単純オフセットではない）。この仕様はAIも誤って説明しがちです。人物写真の顔位置合わせなどはパーセンテージ基準の方が破綻しにくい、という実務知識も添えると良いコードが出ます。
- **border**（https://www.css-dictionary.com/property/border.md）: hover時にborderを追加するとその分レイアウトがずれる問題に対し、AIは気づかないことがあります。定番の対策は最初からborder: 2px solid transparentを敷いておき色だけ変える方法（またはoutlineやbox-shadowの利用）です。ショートハンドが3項目（幅・スタイル・色）を一括リセットする点も混在バグの元です。
- **border-radius**（https://www.css-dictionary.com/property/border-radius.md）: AIは「完全な丸ゴマ/ピル形」にborder-radius: 50%を使うことがありますが、50%は楕円になるため、ピル形には9999pxや calc(infinity * 1px) が正解です（正円なら50%でOK）。角丸の入れ子（親と子の半径調整）もAIが省略しがちな仕上げポイントです。
- **box-shadow**（https://www.css-dictionary.com/property/box-shadow.md）: AIの生成する影は不自然に濃い・硬いことが多いです。実務では「小さくて濃い影+大きくて薄い影」のカンマ区切り多重指定が自然に見える定番です。またborder代わりの1px影（0 0 0 1px）やinsetの活用も、明示すると質が上がります。
- **accent-color**（https://www.css-dictionary.com/property/accent-color.md）: チェックボックスやラジオの色変えにAIはappearance: noneからの完全自作を提案しがちですが、「色を変えたいだけ」ならaccent-color 1行で済みます（ネイティブのアクセシビリティを保てるのが利点）。形状まで変えたい場合に初めて自作を検討する、という段階の使い分けが重要です。
- **list-style**（https://www.css-dictionary.com/property/list-style.md）: list-style: noneを指定するとSafari（VoiceOver）はリストとして読み上げなくなるため、意味的にリストである場合はul側にrole="list"を付けるのが定石ですが、AIはこのアクセシビリティ知識を出し忘れます。マーカーの色や大きさだけ変えるなら::marker擬似要素が使えます。
- **clip-path**（https://www.css-dictionary.com/property/clip-path.md）: clip-pathで切り抜いた外側はクリックも当たらなくなる（ヒットテスト領域も切れる）点をAIは説明し忘れがちです。またpolygon同士のアニメーションは頂点数が同じでないと補間されません。切り抜きでなく「ぼかしマスク」が欲しい場合はmask-imageが適任、という使い分けも有効です。
- **object-position**（https://www.css-dictionary.com/property/object-position.md）: object-fit: coverでトリミングされる位置を調整するのがobject-positionです。AIは「人物の顔が見切れる」問題にimgの差し替えやJSを提案しがちですが、object-position: top（顔が上にある写真）などの1行で解決することが多いです。background-positionと同じ%基準の考え方が使えます。
- **mix-blend-mode**（https://www.css-dictionary.com/property/mix-blend-mode.md）: 「効かない」原因の多くは重なる相手が不透明な背景を持たないこと、または意図しない要素とまで混ざることです。混ざる範囲を区切るには親にisolation: isolateを指定します——このセット運用をAIは省略しがちです。白背景ではmultiply、黒背景ではscreenが基本、という選び方も添えると良いコードになります。
- **background-blend-mode**（https://www.css-dictionary.com/property/background-blend-mode.md）: mix-blend-mode（要素同士）とbackground-blend-mode（同一要素内の背景レイヤー同士）の混同はAIの定番です。「写真に色を被せるダブトーン」は背景画像+背景色をbackground-blend-modeで混ぜるのが正攻法で、要素を重ねる必要はありません。
- **isolation**（https://www.css-dictionary.com/property/isolation.md）: isolation: isolateは「副作用なしで新しいスタッキングコンテキストを作る」唯一の専用プロパティです。ブレンドモードの範囲区切りのほか、「子のz-indexが外部と干渉する」問題をコンポーネント境界で断ち切る用途にも有効——AIはz-index問題にこの解を出せないことが多いです。
- **appearance**（https://www.css-dictionary.com/property/appearance.md）: appearance: noneはOS由来の見た目を全て剥がすため、selectの矢印・checkboxの箱などが消えて「自分で全部作り直す」責任が発生します。色を変えたいだけならaccent-colorで済む——この段階の使い分けをAIは飛ばして、いきなり全自作の長いコードを出しがちです。剥がした後のフォーカス表示の再実装も忘れられがちです。
- **outline**（https://www.css-dictionary.com/property/outline.md）: outlineはレイアウトに影響しない（スペースを取らない）点がborderとの本質的な違いで、フォーカス表示に使われる理由です。outline: noneでフォーカスを消すのは禁じ手で、消したいならoutline-offsetや色の調整で「見やすくする」方向へ。border-radiusに追従する（現在は角丸に沿う）ようになった点はAIの知識が古いことがあります。

## その他

- **CSS変数 (--property)**（https://www.css-dictionary.com/property/css-custom-properties.md）: AIはSassの$変数とCSS変数を混同した説明をすることがあります。決定的な違いは、CSS変数は実行時に評価される（メディアクエリ内やJSからの変更で動的に変わる）点です。またvar(--x, フォールバック値)の第2引数、未定義時に「保証された無効値」となってプロパティ全体が initial/inherit になる挙動は、AIの生成コードでバグの温床になりがちです。
- **will-change**（https://www.css-dictionary.com/property/will-change.md）: AIは「アニメーションを滑らかに」という要望でwill-changeを無差別に振りかけがちですが、常時付与はメモリを浪費し逆効果です。原則は「問題が実測されたときに、アニメ直前に付けて終わったら外す」。多くの場合はtransform/opacityベースのアニメに直す方が先決です。
- **contain**（https://www.css-dictionary.com/property/contain.md）: containは「この要素の内部は外に影響しない」とブラウザに約束してレンダリングを分離する上級プロパティです。AIはcontent-visibilityとの関係（後者はcontainを内包する遅延描画）を混同しがちです。誤った値（strictなど）を広く付けるとレイアウトが実際に壊れる（サイズが0になる等）ため、効果測定なしの多用は危険です。
- **@media**（https://www.css-dictionary.com/property/media-queries.md）: AIは古いmin-width/max-width記法だけで書きがちですが、現在は範囲構文（@media (768px <= width < 1024px)）が全ブラウザで使え、境界の重複ミス（max-width: 767pxのような-1px調整）を根本から解消できます。また画面幅以外（hover: hover、prefers-*系）のクエリを組み合わせる発想もAIからは出にくいので明示すると良いです。
- **table-layout**（https://www.css-dictionary.com/property/table-layout.md）: table-layout: fixedにしないとtableのセルでtext-overflow: ellipsisは効きません（自動レイアウトは内容で列幅が決まるため）。「テーブルのセルで省略記号が効かない」問題の答えがこれで、AIはこの因果関係に辿り着かないことがあります。列幅は1行目（またはcol要素）で決まる点も重要です。
- **color-scheme**（https://www.css-dictionary.com/property/color-scheme.md）: color-schemeはフォーム部品・スクロールバー・システム由来のUIをまとめてダーク対応させるプロパティで、light-dark()関数の前提条件でもあります。AIはダークモード実装でこれを飛ばし、スクロールバーだけ白いまま等の中途半端な結果を出しがちです。:root { color-scheme: light dark } が現代のダーク対応の起点です。
- **CSSネスティング**（https://www.css-dictionary.com/property/css-nesting.md）: AIはSassの記法（@mixin、$variable、&-suffix による命名結合）とネイティブネスティングを混同しがちです。特に「&-item」のようなセレクタ名の文字列結合はネイティブCSSでは動きません。また2023年の初期実装にあった「ネスト側は&か記号で始める必要がある」制約を今も適用した冗長なコードを書くことがありますが、現在は要素セレクタも直接ネストできます。
- **@property**（https://www.css-dictionary.com/property/at-property.md）: AIは「CSS変数をtransitionで滑らかに変化させる」コードを@propertyなしで生成しがちで、そのままでは補間されずに動きません。変数のアニメーションが絡んだら@propertyの型登録が必要、とセットで覚えさせてください。またsyntax値の引用符（syntax: '<angle>'）を落とす生成ミスもよくあります。
- **@layer**（https://www.css-dictionary.com/property/cascade-layers.md）: AIは詳細度の競合に対して:where()での詳細度ゼロ化や!important、セレクタの詳細度引き上げを提案しがちで、@layerによる構造的な解決を出さないことが多いです。また「!importantはレイヤー順が逆転する」「レイヤー外がレイヤー内より強い」という2つの反直感ルールはAIも頻繁に間違えます。
- **@scope**（https://www.css-dictionary.com/property/at-scope.md）: AIはスタイルの衝突回避にBEM命名やCSS Modulesを前提としがちで、ネイティブの@scopeを提案に含めないことが多いです。AIの知識では「Chrome限定」と古い場合がありますが、Firefoxも2025年末に対応しBaseline入りしています。近接性（proximity）という新しい競合解決ルールはAIの説明が不正確になりやすい領域です。