Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

min-width プロパティは、要素の最小幅を指定する CSS プロパティです。width プロパティの使用値が、min-width で指定した値を下回らないようにします。

min-width の値は、max-width および width の値を上書きします。

初期値0
適用対象all elements but non-replaced inline elements, table rows, and row groups
継承不可
相対値の基準包含ブロックの幅
メディアvisual
計算値指定されたパーセンテージ値または絶対的な長さ
アニメーションの可否可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

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

/* キーワード値 */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

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

<length>
最小幅を固定します。使用可能な単位については <length> をご覧ください。負の値は無効です。
<percentage>
最小幅の固定値を、包含ブロックの幅に対する <percentage> で表します。負の値は無効です。
auto
flex アイテム向けの既定の最小サイズであり、他のレイアウトにおける既定値 0 よりも合理的な既定値を提供します。
max-content
コンテンツエリア固有の望ましい幅です。
min-content
コンテンツエリア固有の最小幅です。
fill-available
包含ブロックの幅から、それぞれ水平方向のマージン、ボーダー、パディングを取り除いたサイズです。一部のブラウザは、このキーワードの旧称である available を実装しています。
fit-content
min(max-content, max(min-content, fill-available) と定義されています。

形式構文

<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

table { min-width: 75%; }

form { min-width: 0; }

仕様

仕様書 策定状況 コメント
CSS Intrinsic & Extrinsic Sizing Module Level 3
min-width の定義
草案 キーワード max-content, min-content, fit-content, fill-available を追加 (以前は CSS3 Box および CSS3 Writing Modes の両方の草案でこれらのキーワードを定義していました。これらの草案は、本仕様書に置き換えられました)
CSS Flexible Box Layout Module
min-width の定義
勧告候補 キーワード auto を追加し、初期値として使用する
CSS Transitions
min-width の定義
草案 min-width がアニメーション可能として定義された
CSS Level 2 (Revision 1)
min-width の定義
勧告 最初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 1.0 (1.0) 7.0 4.0 2.0.2 (416)、これより前はバグあり
<table> への適用 [1] 未サポート (有) 未サポート (有) 未サポート
max-content, min-content, fit-content, fill-available 24.0 -webkit [3] 3.0 (1.9) -moz [2] 未サポート 未サポート 未サポート [3]
auto 21.0 [4] 16.0 (16.0) [4]
22.0 (22.0) で削除
仕様書で定義された新たな動作を 34.0 (34.0) で再導入
未サポート 12.10 [6] 未サポート
初期値 auto 21.0 18.0 (18.0)
22.0 (22.0) で削除
未サポート 12.10 未サポート
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? ? ? ?
<table> への適用 [1] ? ? ? ? ? ?
max-content, min-content, fit-content, fill-available ? ? ? ? ? ?
auto ? ? ? ? ? ?
初期値 auto ? ? ? ? ? ?

[1] CSS 2.1 では <table> における min-width の動作を、明示的に未定義としています。よってどのような動作も CSS2.1 に準拠します。新たな CSS 仕様書で動作を定義する可能性がありますので、Web 開発者は現在の特定の動作に依存すべきではありません。

[2] Gecko は CSS3 Basic Box で定義された内容を実験的に実装しています。これは fill-available ではなく available を定義しています。また fit-content の定義は、CSS3 本来のものよりシンプルです。

[3] WebKit は以前の提案である、キーワード intrinsic も実装しています。

[4] このキーワードは、若干シンプルな動作を実装しています。flex アイテムでは min-content を算出、その他すべてでは 0 を算出します。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Simplexible, Prinz_Rana, yyss, Sebastianz, ethertank, teoli, Mgjbot, Daigo
 最終更新者: Simplexible,