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

目次

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

max-width

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

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

max-width : 値

値は以下を設定します。

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

 

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 最小の幅を指定する

△上に戻る