min-widthプロパティ

min-widthプロパティは、要素の最小幅を設定します。プロパティの値は、サイズ単位のいずれか、または値を指定しないことを意味するキーワード noneです。

通常、可変幅の要素（幅がパーセンテージで指定されているか、まったく指定されておらず、要素の幅がその内容によって拡張される）に対して設定されます。要素の幅がパーセンテージで指定されている場合、ブラウザウィンドウを縮小すると、幅はmin-widthの値に達するまで縮小します。

構文

セレクタ {
	max-width: 値;
}

例

この例では、幅は親要素の幅のパーセンテージで指定されています。ブラウザウィンドウの幅を縮小すると、コンテナもブラウザウィンドウの幅に合わせて縮小します。ただし、min-widthで定義された値、つまり400pxまでしか縮小しません。コンテナの幅がこの値に達すると、それ以上は縮小しなくなります:

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

例

この例では、コンテナの幅は両側で制限されています: 900pxより大きくも、400pxより小さくもなりません:

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	max-width: 900px;
	height: 100px;
	border: 1px solid black;
}

min-widthプロパティ

構文

例

例

関連項目