CSS max-width 最大の幅を指定する

サンプル	max-width
	max-widthの使い所
	max-widthのサンプル

max-width

max-widthは、最大の幅を指定を指定します。widthの値より大きくなることを防ぎます。

使う場面としては画面とスマホの見え方の調整です。
→例：PC画面では丁度良く見えるがスマホで見ると横にはみ出してしまう。最大限の幅を指定したい。レスポンシブデザインです。

max-width : 値

値は以下を設定します。

数値 + 単位	指定した単位で設定します。
数値 + %	包括ブロックに対する割合で設定します。
auto	制限しません。デフォルト。

max-widthの使い所

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

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

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

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

３．はみ出しを直すため、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%を指定しています。