max-width横幅の上限
要素の使用幅が指定値を超えないように制限します。初期値のnoneでは上限を設けません。
max-width
要素が広がれる横幅の上限を決めるプロパティ。画面が広くても箱が読みやすい幅を超えず、狭いときは柔軟に縮む様子を確かめます。
遊んでみよう
width: 100% の上限を変更
max-width
CSS
.element max-width: 180px;
値のパターン
max-widthの構成要素
<length> | <percentage>長さと割合
pxなどの長さは固定の上限、%は親となる包含ブロックの幅を基準にした上限です。
width → max-widthwidthより優先
widthで決まる幅が上限を超えると、max-widthの値まで小さくなります。
早見表
上限なしのnoneが初期値です。読みやすい文章幅にはch、親幅を超えたくない画像には100%も使えます。
01
none上限を設けない初期値02
720px長さで上限レイアウト幅03
100%親幅まで画像など04
65ch文字数を基準文章の幅よくある使い方
01
文章を読みやすい幅に収める
本文を画面いっぱいに広げず、widthとmarginを組み合わせて中央の読みやすい幅へ収めます。
width: 100%; max-width: 65ch; margin-inline: auto;02
画像を親要素からはみ出させない
元画像が大きくても親要素より広がらないようにし、縦横比を保ったまま縮小します。
max-width: 100%; height: auto;03
ダイアログの横幅に上限をつける
狭い画面では余白を残して縮み、広い画面では必要以上に大きくならない箱を作れます。
width: calc(100% - 32px); max-width: 560px;ポイント
widthを100%にしても、指定した上限より広がらない。
width: 100%とmax-widthを組み合わせると、狭い場所では縮み、広い場所では上限で止まるレイアウトになります。max-widthはwidthより優先されますが、min-widthはmax-widthより優先されます。置換要素ではないinline要素など一部には適用されず、通常は子要素へ継承されません。
関連するCSSも見てみよう。
max-width と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。