min-width

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

解説

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

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

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

構文は以下になります。

min-width: 値;

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

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

太字の値は初期値です。


.sample01 {
  min-width:500px;
}


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

最小幅500px

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

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