Min-Width プロパティ

最終更新：2026-09-13

min-width Min-Width プロパティ

min-width プロパティは要素の最小幅を設定し、コンテナが狭くなったときに要素が小さすぎるまで圧縮されるのを防ぎます。初期値の 0 は下限がないことを意味します。これは width や max-width と組み合わせて使われることが多く、レスポンシブレイアウトで可読性を守るための重要な道具です。

カテゴリ
初期値	0
継承	いいえ
適用対象	non-replaced
アニメーションタイプ	length
CSS バージョン	CSS2
状態	標準

📝 構文

min-width: auto | <length> | <percentage> | min-content | max-content | fit-content;

⚙️ 値

値	タイプ	説明
`0`	キーワード	最小幅の制限なし。
`<length>`	タイプ	固定された最小幅。
`<percentage>`	タイプ	包含ブロックに対するパーセンテージ。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
min-width	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： min-width は width や max-width より優先され、要素がこの値より小さくなることは決してありません。

❓ よくある質問

Qmin-width と width の両方を設定した場合、どちらが優先されますか？

Amin-width は width より優先度が高いです。width が min-width より小さいときは min-width で描画され、大きいときは width で描画されます。min-width は max-width さえ上書きできます。CSS のサイズ制約の順位は min-width → max-width → width なので、min-width は三つの中で最強であり、狭い画面でコンテンツが押しつぶされるのを防ぎます。同じ優先順位は min-height による高さにも当てはまります。

Qflex アイテムが縮小するために min-width:0 が必要なのはなぜですか？

Aflex アイテムの既定の min-width は auto で、これはコンテンツ（例えば最長の単語）の最小幅と同じように振る舞うためです。コンテナのスペースが足りなくなると、アイテムはそれ以下には縮まず、溢れやレイアウトの崩れを引き起こします。min-width:0 を設定するとアイテムは自由に縮小できるようになり、text-overflow:ellipsis によるテキスト切り捨てや flex レイアウト内の均等分割リストでよく使われます。

Qmin-width と max-width の違いは何ですか？

Amin-width は要素の幅の下限を設定し、設定値より狭く圧縮されるのを防ぎます。max-width は上限を設定し、設定値より広く引き伸ばされるのを防ぎます。両方を同時に使え、ブラウザーは min-width → max-width → width の優先順位で最終幅を決めます。両者でレスポンシブレイアウトにおける幅の範囲を定義します。

Qmin-width のパーセンテージは何に対するものですか？

Aパーセンテージは包含ブロックの幅に対して計算されます。例えば min-width:50% は、要素が親のコンテンツ領域の幅の半分より狭くなることは決してないことを意味します。絶対配置の要素では、基準が最も近い配置済み祖先の padding box になる点に注意してください。そのため、計算された比率に依存する前にどの包含ブロックが適用されるか確認してください。通常フローでは、その包含ブロックはほぼ必ず親のコンテンツ領域です。