CSS min-width 最小の幅を指定するサンプル

CSSのmin-widthプロパティで、最小の幅を指定するサンプルです。

目次

仕様 min-widthプロパティの仕様
サンプル min-widthのサンプル
  min-widthの使い所

min-widthプロパティの仕様

min-width : 値

min-widthプロパティは、最小の幅を指定を指定します。

説明
数値 + 単位   指定した単位で設定します。 
数値 + % 包括ブロックに対する割合で設定します。
none 制限しません。(初期値)
値を継承しない
  • 最小の幅を指定します。widthプロパティの値より小さくなることを防ぎます。
  • 主に画面とスマホでの見え方の調整などのレスポンシブデザインで使用します。
    →例:PC画面では丁度良く見えるがスマホで見ると小さくなりすぎてしまう。
       最低限の幅を確保したい。
  • 以下はMDNのmin-widthプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/min-width

min-widthのサンプル

min-widthのサンプルです。

<style>
#box1{
	width:200px;
	border:1px solid #000;
}
#box2{
	width:30%;
	min-width:120px;
	border:1px solid #000;
	background-color:pink;
}
</style>

<div id="box1">box1
	<div id="box2">box2のテスト</div>
</div>

8行目は、min-width:120pxを指定しています。

min-widthの使い所

1.以下のレイアウトがあるとします。

親のbox1は、widthプロパティで500pxを指定しています。
子のbox2は、widthプロパティで30%を指定しています。
box2は、pxになおすと500☓0.3=150pxです。

 

2.携帯で見た場合などで、親のbox1のwidthが小さくなったとします。

box1のwidthプロパティが300pxになると、box2は、widthは30%なのでpxになおすと300☓0.3 = 90pxとなります。
box2の幅が狭くなり、150pxぴったりで文章があった場合は、改行されてしまいます。

 

3.意図しない改行を直すため、box2にmin-widthプロパティで150pxを追記します。

box2の最小の幅が150pxとなり、150pxを想定した文章は影響を受けず表示できます。

min-widthは、最小限確保する幅です。

関連の記事

CSS width 幅を指定するサンプル
CSS max-width 最大の幅を指定するサンプル
CSS box-sizing paddingとborderの表示方法を指定
CSS padding 要素の内側の余白を指定する
CSS margin 要素の外側の余白を指定する
CSS border ボーダーの表示方法を指定する

△上に戻る