女性向けエンジニアスクール
3秒でわかる
要素の幅がそれ以上広がらない上限を決める CSS プロパティ。画面が広いときだけ効くので、レスポンシブな幅の調整に欠かせません。
もう少し詳しく
どういうものか
max-width は、要素の幅の上限を決めるプロパティです。計算された幅が指定値を超えたときだけ、その値まで押し戻します。指定値より狭い分にはいっさい干渉しません。
width が「常にこの幅」と言い切るのに対し、max-width は「ここまでなら伸びてよい」という条件です。この差が、画面幅が変わる環境で効いてきます。
なぜ必要か
本文の1行が長くなりすぎると、行末から次の行頭へ目が戻れず極端に読みにくくなります。日本語なら1行 40 文字前後が上限で、24 インチのモニタで幅いっぱいに流すとその倍を超えます。かといって width で固定すると、今度はスマートフォンで横スクロールが出ます。上限だけを決めれば、広い画面では読みやすい幅に収まり、狭い画面では自動的に縮みます。
具体例
画像のはみ出し防止と、記事本文の幅制御。この2つが実務での大半です。
/* 親より大きい画像を絶対にはみ出させない */
img {
max-width: 100%;
height: auto;
}
/* 本文は 720px までで頭打ちにし、狭い画面では余白だけ残す */
.article {
width: 100%;
max-width: 720px;
margin-inline: auto;
padding-inline: 16px;
<a href="/glossary/box-sizing" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">box-sizing</a>: border-box;
}つまずきやすいところ
box-sizing を border-box にしていないと、720px 指定でも実際は 752px になります似た用語との違い
| プロパティ | 役割 | 画面が狭いとき |
|---|---|---|
| width | 幅を固定する | はみ出す |
| max-width | 上限だけ決める | 一緒に縮む |
| min-width | 下限だけ決める | それ以上は縮まない |
表示が崩れたときは、ブラウザの開発者ツールで対象の要素を選び、計算後の幅がどこで決まったかを見ます。max-width が打ち消し線で表示されていれば、より優先度の高い指定に負けています。
覚え方
width は命令、max-width は約束。「これ以上は広げません」という約束だけを書く、と考えると使い分けに迷いません。
