max-width

max-widthは、幅の最大値を指定するスタイルです。

解説

要素幅の最大値を指定します。
ある一定の幅サイズ以上にはしたくない場合に使用します。

例えば、width:100%とするとブラウザのサイズに合わせた幅となりますが、ある一定の幅以上には広げたくないというような場合に使用します。

widthと併用する場合は、widthの値は割合指定（可変サイズ）としてください。

構文は以下になります。

max-width: 値;

max-widthには以下の値が指定できます。

値	説明
auto	要素の内容により自動で指定される（例）max-width:auto;
数値	px単位などで指定する（例）max-width:300px;
割合	割合で指定する（例）max-width:70%;

太字の値は初期値です。


.sample01 {
  max-width:500px;
}


<div class="sample01">最大幅500px</div>

最大幅500px

ブラウザサイズを変更すると500px以下のサイズにはリサイズされますが、500px以上のサイズにはなりません。

widthとmax-widthのサイズが競合する場合は、max-widthのサイズが優先されます。
（widthサイズよりも max-widthサイズの方が小さい場合など）