max-width プロパティ

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

通常、このプロパティは可変幅の要素（幅がパーセンテージで指定されているか、全く指定されておらず、要素がその内容に応じて幅を広げる）に対して設定されます。要素の幅がパーセンテージで指定されている場合、ブラウザウィンドウを大きくすると、その幅は max-width の値に達するまで増加します。

構文

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

例

この例では、幅は親要素の幅に対するパーセンテージで指定されています。ブラウザウィンドウの幅を広げると、コンテナもブラウザウィンドウの幅に合わせて大きくなります。ただし、max-width（この場合は 900px）で定義された値までしか大きくなりません。コンテナがこの幅に達すると、それ以上は大きくなりません：

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

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

例

この例では、コンテナの幅は両側から制限されています：900px より大きく、また 400px より小さくすることはできません：

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

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

max-width プロパティ

構文

例

例

関連項目