防御的（Defensive）CSS

特定のCSS問題が起きないようにするためのスニペット集

• Flexboxの折り返し → flex-wrap: wrap;

• 余白を持たせる → margin-right: 1rem;

• 折り返してはいけない長いコンテンツ → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;

• 画像の引き伸ばし／つぶれ防止 → object-fit: cover;

• スクロール連鎖の抑止 → overscroll-behavior-y: contain;

• CSS変数にフォールバック値を設定 → max-width: calc(100% - var(--actions-width, 70px));

• 高さを固定する場合 → height より min-height を使う

• 幅を固定する場合 → width より min-width を使う

• 背景の繰り返しを無効化 → background-repeat: no-repeat;

• 縦方向メディアクエリの活用 → position:sticky のようなものを使うときは、一定以上の縦サイズでのみ適用 @media (min-height:600px) {}

• Flexboxでアイテムを並べるときは justify-content: space-between; の代わりに gap: 1rem; を使う

• 画像の上に白いテキストを載せるとき、画像の読み込み失敗に備える → background-color: grey; を使う

• CSS Grid上で固定値を使うのは要注意 → 常にメディアクエリを使うこと

• 必要なときだけスクロールバーを表示 → overflow-y: auto;

• スクロールバー出現時のレイアウト変化を防ぐ → scrollbar-gutter: stable;

• Flexboxで最小コンテンツサイズを指定 → min-width: 0; （デフォルト値が auto のため overflow が発生）

• CSS Gridで最小コンテンツサイズを指定 → minmax() を使う

• CSS Grid使用時の Auto Fit vs. Auto Fill → ほとんどの場合 auto-fill のほうがよい

• 画像の最大幅を指定 → max-width: 100%

• グリッドコンテナの子要素に position: sticky を使うときは align-self: start を適用

• グループセレクタ指定は他のブラウザでは動かないことがあるため、それぞれ個別に分けること