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

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

min-width プロパティ

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

1.min-widthのサンプル

この「1.min-widthのサンプル」から「3.min-widthを指定」まで連続した説明になります。

親のbox1は、widthプロパティで500pxを指定しています。(3行目)
子のbox2は、widthプロパティで30%を指定しています。(7行目)
box1の中にbox2が入る形になります。

<style>
#box1{
	width:500px;
	border:1px solid #000;
}
#box2{
	width:30%;
	border:1px solid #000;
	background-color:pink;
}
</style>
<body >
<div id="box1">box1
	<div id="box2">box2のテスト</div>
</div>
</body>

上記コードのサンプルです。

2.親要素のwidthを小さくする

親のbox1のwidthプロパティを200pxに小さくしました。(3行目)

box2は、widthプロパティが30%です。(7行目)
%指定は、包括ブロックに対する割合になるので60pxとなり幅も狭くなります。
その結果文字が改行されてしまいました。

<style>
#box1{
	width:200px;
	border:1px solid #000;
}
#box2{
	width:30%;
	border:1px solid #000;
	background-color:pink;
}
</style>
<body >
<div id="box1">box1
	<div id="box2">box2</div>
</div>
</body>

上記コードのサンプルです。

3.min-widthを指定

ここでmin-widthプロパティを使用します。

box2の8行目に、min-widthプロパティの120pxを追加しました。

box2の最小の幅が120pxとなります。
その結果文字が改行されずに表示されました。

<style>
#box1{
	width:200px;
	border:1px solid #000;
}
#box2{
	width:30%;
	min-width:120px;
	border:1px solid #000;
	background-color:pink;
}
</style>
<body >
<div id="box1">box1
	<div id="box2">box2のテスト</div>
</div>
</body>

上記コードのサンプルです。

関連の記事

CSS 幅と高さを指定するサンプル(widthとheight)
CSS 最大の幅を指定するサンプル(max-width)
CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)
CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS ボーダーの表示方法を指定するサンプル(border)



△上に戻る