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

CSSのmax-widthプロパティで、最大の幅を指定するサンプルです。

目次

仕様 max-widthプロパティの仕様
サンプル max-widthのサンプル
  max-widthの使い所

max-widthプロパティの仕様

max-width : 値

max-widthプロパティは、最大の幅を指定を指定します。

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

max-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 id="box1">box1
	<div id="box2">box2</div>
</div>

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

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プロパティの値より大きくなることを防ぎます

関連の記事

CSS width 幅を指定するサンプル
CSS min-width 最小の幅を指定するサンプル
CSS box-sizing paddingとborderの表示方法を指定
CSS padding 要素の内側の余白を指定する
CSS margin 要素の外側の余白を指定する
CSS border ボーダーの表示方法を指定する

△上に戻る