min-width
は CSS のプロパティで、要素の最小幅を設定します。これは width
プロパティの使用値が、min-width
で指定した値を下回ることを防ぎます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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>)ここで
<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 |
---|---|
適用対象 | 置換要素でないインライン要素、テーブルの行、行グループを除くすべての要素 |
継承 | なし |
パーセント値 | 包含ブロックの幅に対する相対値 |
計算値 | 指定されたパーセント値または絶対的な長さ |
アニメーションの種類 | length または パーセント値, calc(); |
ブラウザーの互換性
BCD tables only load in the browser