max-width

スペーシング・サイズ

要素の最大幅を指定するプロパティです。widthと組み合わせてレスポンシブなデザインが可能です。

構文

Syntax
max-width: <length> | <percentage> | none

コード例

1

max-width: 600px;
実行結果
max-width: 120px
最大幅120px(親要素幅300px)

最大幅を600pxに制限

2

max-width: 100%;
実行結果
max-width: 100%
width: 400px
親要素幅300pxを超えない(width:400pxでもmax-width:100%で制限)

親要素の幅を超えないようにする

💡 TIPS

画像やコンテンツの横スクロール防止に便利。

⚠️ よくある間違い

widthとmax-widthを併用した場合、max-widthが優先される。

関連プロパティ

ブラウザサポート

全ブラウザ対応