防御的（Defensive）CSS

<p>特定のCSS問題が起きないようにするためのスニペット集<br /> - Flexboxの折り返し → flex-wrap: wrap;<br /> - 余白を持たせる → margin-right: 1rem;<br /> - 折り返してはいけない長いコンテンツ → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;<br /> - 画像の引き伸ばし／つぶれ防止 → object-fit: cover;<br /> - スクロール連鎖の抑止 → overscroll-behavior-y: contain; <br /> - CSS変数にフォールバック値を設定 → max-width: calc(100% - var(--actions-width, 70px));<br /> - 高さを固定する場合 → height より min-height を使う <br /> - 幅を固定する場合 → width より min-width を使う <br /> - 背景の繰り返しを無効化 → background-repeat: no-repeat;<br /> - 縦方向メディアクエリの活用 → position:sticky のようなものを使うときは、一定以上の縦サイズでのみ適用 @media (min-height:600px) {}<br /> - Flexboxでアイテムを並べるときは justify-content: space-between; の代わりに gap: 1rem; を使う<br /> - 画像の上に白いテキストを載せるとき、画像の読み込み失敗に備える → background-color: grey; を使う <br /> - CSS Grid上で固定値を使うのは要注意 → 常にメディアクエリを使うこと <br /> - 必要なときだけスクロールバーを表示 → overflow-y: auto; <br /> - スクロールバー出現時のレイアウト変化を防ぐ → scrollbar-gutter: stable; <br /> - Flexboxで最小コンテンツサイズを指定 → min-width: 0; （デフォルト値が auto のため overflow が発生）<br /> - CSS Gridで最小コンテンツサイズを指定 → minmax() を使う <br /> - CSS Grid使用時の Auto Fit vs. Auto Fill → ほとんどの場合 auto-fill のほうがよい <br /> - 画像の最大幅を指定 → max-width: 100% <br /> - グリッドコンテナの子要素に position: sticky を使うときは align-self: start を適用 <br /> - グループセレクタ指定は他のブラウザでは動かないことがあるため、それぞれ個別に分けること</p>