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

目次 min-widthとは
min-widthの使い所
  min-widthのサンプル

min-widthとは

min-widthは、最小の幅を指定を指定します。widthの値より小さくなることを防ぎます。
使う場面としては画面とスマホの見え方の調整です。
→例:PC画面では丁度良く見えるがスマホで見ると小さくなりすぎてしまう。最低限の幅を確保したい。レスポンシブデザインです。   

書き方 min-width : 値
数値 + 単位・・・指定した単位で設定します。 
数値 + %・・・包括ブロックに対する割合で設定します。
none・・・制限しません。
初期値 none
継承 しない
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/min-width

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は、最小限確保する幅です。

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 class="box1">box1
  <div class="box2">box2のテスト</div>
</div>

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

関連の記事

CSS width 幅を指定するサンプル
CSS max-width 最大の幅を指定するサンプル

△上に戻る