比較でわかるCSS

似ていて混同しやすいCSSの「違い」を、比較表と使い分けの指針で整理しました。 AIに実装を頼む前の判断材料としても使えます。

word-break と overflow-wrap の違い

はみ出し対策の第一選択はoverflow-wrap: break-word。word-break: break-allは英単語もぶつ切りにする強い指定で、表の詰め込みなど限定的な場面用です。

1方向の並び（ナビ、ボタン列、中央寄せ）はflex、行と列を同時に制御するレイアウト（カード一覧、ページ骨格）はgrid。「デザインが表・格子に見えるならgrid」が目安です。

完全に消すならdisplay: none、領域を保ったまま隠すならvisibility: hidden、フェードで見せ隠しするならopacity（+visibility併用）。opacity: 0は見えないのにクリックできてしまう点に注意。

要素の「外」との距離がmargin、要素の「中」の余白がpadding。背景色を含めたい・クリック範囲を広げたいならpadding、隣との間隔を空けたいならmargin（またはgap）です。

hover・クラス切替など「状態の変化」に反応させるならtransition、読み込み時から自動で動く・ループする・多段階の動きならanimation（@keyframes）です。

祖先基準で自由配置がabsolute、画面に完全固定がfixed、「閾値まで通常・そこから貼り付き」がsticky。fixedはtransform等を持つ祖先がいると画面基準でなくなる罠があります。

ページ全体のレイアウト分岐は@media、置かれた場所の幅で変わるべき「部品」は@container。コンポーネント指向の開発では@containerが主役になりつつあります。

違いが出るのはアイテムが少ないとき。auto-fitは空きトラックを潰してアイテムを広げ、auto-fillは空きトラックを残してアイテム幅を保ちます。

flex/gridの「アイテム間」の等間隔はgap一択。外周には付かず、打ち消しも相殺もない。marginは外周の余白や個別の例外調整に使います。

「キーボード操作のときだけスタイルを出す」のが:focus-visible、「子孫にフォーカスがあるとき親に効かせる」のが:focus-within。判定軸が違う直交概念なので、:has(:focus-visible)で組み合わせることもできます。