CSS3スタイル虎の巻

min-width

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

解説

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

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

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

構文

構文は以下になります。

min-width: 値;

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

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

太字の値は初期値です。

サンプル

要素の最小幅を500pxにする


.sample01 {
  min-width:500px;
}

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

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

備考

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

関連項目

  • height:要素の高さを指定する
  • width:要素の幅を指定する
  • max-width:幅の最大値を指定する
  • min-width:幅の最小値を指定する
  • max-height:高さの最大値を指定する
  • min-height:高さの最小値を指定する