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

1.max-widthのサンプル

この「1.max-widthのサンプル」から「3.max-widthを指定」まで連続した説明になります。

親のbox1は、widthプロパティで500pxを指定しています。(3行目)
子のbox2は、widthプロパティで400pxを指定しています。(7行目)
box1の中にbox2が入る形になります。

<style>
#box1{
	width:500px;
	border:1px solid #000;
}
#box2{
	width:400px;
	border:1px solid #000;
	background-color:pink;
}
</style>
<body >
<div id="box1">box1
	<div id="box2">box2</div>
</div>
</body>

上記コードのサンプルです。

2.親要素のwidthを小さくする

親のbox1のwidthプロパティを300pxに小さくしました。(3行目)
子のbox2は、widthプロパティが400pxなのでbox1の枠からはみ出します。

<style>
#box1{
	width:300px;
	border:1px solid #000;
}
#box2{
	width:400px;
	border:1px solid #000;
	background-color:pink;
}
</style>
<body >
<div id="box1">box1
	<div id="box2">box2</div>
</div>
</body>

上記コードのサンプルです。

 

3.max-widthを指定

ここでmax-widthプロパティを使用します。

box2に、max-widthプロパティの90%を追加しました。(8行目)

%指定は、包括ブロックに対する割合になるので
box2は、box1の幅に対する90%の長さになり(270px)、box1の枠内に表示されます。

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

上記コードのサンプルです。

関連の記事

CSS 幅と高さを指定するサンプル(widthとheight)
CSS 最小の幅を指定するサンプル(min-width)
CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)
CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS ボーダーの表示方法を指定するサンプル(border)



△上に戻る