min-width

min-width は CSS のプロパティで、要素の最小幅を設定します。これは width プロパティの使用値が、min-width で指定した値を下回ることを防ぎます。

min-width の値が max-width および width の値より大きい場合は、min-width の値が要素の幅になります。

構文

/* <length> 値 */
min-width: 3.5em;

/* <percentage> 値 */
min-width: 10%;

/* キーワード値 */
min-width: max-content;
min-width: min-content;
min-width: fit-content(20em);

/* グローバル値 */
min-width: inherit;
min-width: initial;
min-width: unset;

値

<length>
min-width を絶対的な値で定義します。
<percentage>
min-width を包含ブロックの幅に対するパーセント値で定義します。
auto
ブラウザーが指定された要素の min-width を計算して選択します。
none
ボックスの寸法を制限しません。
max-content
内容物が推奨する min-width です。
min-content
内容物の最小の min-width です。
fit-content(<length-percentage>)
利用可能な空白をして死された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。

形式文法

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)
where 
<length-percentage> = <length> | <percentage>

例

table { min-width: 75%; }

form { min-width: 0; }

仕様書

仕様書 状態 備考
CSS Box Sizing Module Level 4
min-width の定義		 編集者草案
CSS Box Sizing Module Level 3
min-width の定義		 草案 キーワード max-content, min-content, fit-content を追加。
CSS Flexible Box Layout Module
min-width の定義		 勧告候補 キーワード auto を追加し、初期値として使用する
CSS Level 2 (Revision 1)
min-width の定義		 勧告 初回定義
初期値auto
適用対象all elements but non-replaced inline elements, table rows, and row groups
継承なし
パーセンテージ包含ブロックの幅
計算値指定されたパーセンテージ値または絶対的な長さ
アニメーションの種類length または percentage, calc();

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
min-widthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 CSS 2.1 leaves the behavior of min-width with table undefined. Firefox supports applying min-width to table elements.
IE 完全対応 7Opera 完全対応 4
補足
完全対応 4
補足
補足 CSS 2.1 leaves the behavior of min-width with table undefined. Opera supports applying min-width to table elements.
Safari 完全対応 1WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 CSS 2.1 leaves the behavior of min-width with table undefined. Firefox supports applying min-width to table elements.
Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
autoChrome 完全対応 21
補足
完全対応 21
補足
補足 Chrome uses auto as the initial value for min-width.
Edge 完全対応 12
補足
完全対応 12
補足
補足 Edge uses auto as the initial value for min-width.
Firefox 完全対応 34
完全対応 34
未対応 16 — 22
補足
補足 Firefox 18 and later (until the value was removed), used auto as the initial value for min-width.
IE 未対応 なしOpera 完全対応 12.1
補足
完全対応 12.1
補足
補足 Opera uses auto as the initial value for min-width.
Safari 未対応 なしWebView Android 完全対応 37
補足
完全対応 37
補足
補足 Chrome uses auto as the initial value for min-width.
Chrome Android 完全対応 25
補足
完全対応 25
補足
補足 Chrome uses auto as the initial value for min-width.
Firefox Android 完全対応 34
完全対応 34
未対応 16 — 22
補足
補足 Firefox 18 and later (until the value was removed), used auto as the initial value for min-width.
Opera Android 完全対応 14
補足
完全対応 14
補足
補足 Opera uses auto as the initial value for min-width.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 1.5
補足
完全対応 1.5
補足
補足 Samsung Internet uses auto as the initial value for min-width.
fit-contentChrome 完全対応 46
完全対応 46
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 79
完全対応 79
完全対応 79
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 3
接頭辞付き 補足
完全対応 3
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
IE 未対応 なしOpera 完全対応 33
完全対応 33
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 11
完全対応 11
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 46
完全対応 46
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 46Firefox Android 完全対応 4
接頭辞付き 補足
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
Opera Android 完全対応 33Safari iOS 完全対応 11
完全対応 11
完全対応 7
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 5.0
代替名
完全対応 5.0
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
max-contentChrome 完全対応 46
完全対応 46
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 79
完全対応 79
完全対応 79
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 66
完全対応 66
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 33
完全対応 33
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 11
完全対応 11
完全対応 2
代替名
代替名 非標準の名前 intrinsic を使用しています。
WebView Android 完全対応 46
完全対応 46
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 46Firefox Android 完全対応 66
完全対応 66
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 33Safari iOS 完全対応 11
完全対応 11
完全対応 1
代替名
代替名 非標準の名前 intrinsic を使用しています。
Samsung Internet Android 完全対応 5.0
min-contentChrome 完全対応 46
完全対応 46
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 25 — 48
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Edge 完全対応 79
完全対応 79
完全対応 79
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 66
完全対応 66
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 33
完全対応 33
完全対応 ≤15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 ≤15 — 35
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Safari 完全対応 11
完全対応 11
完全対応 2
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
WebView Android 完全対応 46
完全対応 46
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 ≤37 — 48
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Chrome Android 完全対応 46
完全対応 46
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 25 — 48
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Firefox Android 完全対応 66
完全対応 66
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 33
完全対応 33
完全対応 ≤14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 ≤14 — 35
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Safari iOS 完全対応 11
完全対応 11
完全対応 1
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Samsung Internet Android 完全対応 5.0
完全対応 5.0
完全対応 1.5
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 1.5 — 5.0
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
stretch
実験的
Chrome 完全対応 22
代替名
完全対応 22
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Edge 完全対応 79
代替名
完全対応 79
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Firefox 未対応 なしIE 未対応 なしOpera 完全対応 15
代替名
完全対応 15
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Safari 未対応 なしWebView Android 完全対応 4.4
代替名
完全対応 4.4
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Chrome Android 完全対応 25
代替名
完全対応 25
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Firefox Android 未対応 なしOpera Android 完全対応 14
代替名
完全対応 14
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Safari iOS 未対応 なしSamsung Internet Android 完全対応 1.5
代替名
完全対応 1.5
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報