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

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

max-width プロパティ

max-width : 値

値	説明
数値 + 単位	指定した単位で設定します。
数値 + %	包括ブロックに対する割合で設定します。
none	制限しません。(初期値)
値を継承しない

最大の幅を指定します。widthプロパティの値より大きくなることを防ぎます。
主に画面とスマホでの見え方の調整などのレスポンシブデザインで使用します。
→例：画面では丁度良く見えるがスマホで見ると横にはみ出してしまう。
　　　最大限の幅を指定したい。
以下はMDNのmax-widthプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/max-width

max-widthの使い所

１．以下のboxがあるとします。

親のbox1は、widthプロパティで500pxを指定しています。
子のbox2は、widthプロパティで400pxを指定しています。

２．親のbox1のwidthを小さくします。

親のbox1のwidthプロパティを300pxにしました。
子のbox2は、widthプロパティが400pxなのでbox1の枠からはみ出します。

３．max-widthプロパティを追記します。
CSSでbox2に、max-widthプロパティの90%を追記しました。

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

max-widthプロパティがある状態で、親の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 id="box1">box1
	<div id="box2">box2</div>
</div>