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

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

max-widthとは

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

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

max-widthの使い所

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

親のbox1のwidthは、500pxです。
子のbox2のwidthは、400pxです。

 

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

子のbox2のwidthは400pxなのでbox1の枠からはみ出します。

 

3.はみ出しを直すため、box2にmax-widthの90%を追記しました。

box2は、box1の幅に対する90%の長さになり(270px)、box1の枠内に表示されます。

親のbox1のwidthを500pxにすると、box2は、400pxに戻ります。

max-widthは、widthの値より大きくなることを防ぎます

max-widthのサンプル

<style>
  .box1 {
    width: 300px;
    border: 1px solid #000;
  }
  .box2 {
    width: 400px;
    max-width: 90%;
    border: 1px solid #000;
    background-color: pink;
  }
</style>
<div class="box1">box1
  <div class="box2">box2</div>
</div>

8行目は、max-width:90%を指定しています。

関連の記事

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

△上に戻る