CSS ・ 余白・サイズ
max-width
最大の幅
要素の幅がそれ以上広がらない上限を指定します。画面の大きさに合わせて伸縮するレイアウトの基本です。
01
サンプルコード
HTML
1<div class="container">
2 max-width: 360px の箱。親が広くても360pxまでしか広がらず、狭い画面では親に合わせて縮みます。
3</div>
CSS
1.container {
2 max-width: 360px;
3 margin: 0 auto;
4 padding: 12px 16px;
5 background: #f6ead8;
6 border: 1px solid #b68235;
7}
02
実行結果
ブラウザでの表示
03
解説
max-width は、要素がそれ以上広くならない上限の幅です。width と違い、親が狭いときは自然に縮むため、画面の大きさが違っても崩れにくくなります。
ページの内容を一定の幅に収める「コンテナ」は、max-width と margin: 0 auto の組み合わせで作るのが定番です。
画像に max-width: 100% を指定すると、親からはみ出さずに縮小されます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
none | 上限なし（初期値） |
960px | 固定の上限 |
100% | 親要素の幅まで |
40em | 文字数を基準にした上限（読みやすい行の長さ） |
画像をはみ出させない
レスポンシブなページでは、ほぼすべての画像に指定する定番の指定です。
CSS
1img {
2 max-width: 100%;
3 height: auto;
4}
注意点
- 01width と max-width の両方を指定した場合、小さいほうが優先されます。
- 02本文は1行が長くなりすぎないよう、40em前後に制限すると読みやすくなります。