Max-Width プロパティ
最終更新：2026-09-13
max-width Max-Width プロパティ
max-width プロパティは要素の最大幅を設定し、大画面で広がりすぎて可読性を損なうのを防ぎます。初期値の none は上限がないことを意味します。これはレスポンシブデザインの中心的な道具であり、width:100% と組み合わせてメディア要素が本来のサイズを超えずに適応するようにすることがよくあります。
| カテゴリ | |
|---|---|
| 初期値 | none |
| 継承 | いいえ |
| 適用対象 | non-replaced |
| アニメーションタイプ | length |
| CSS バージョン | CSS2 |
| 状態 | 標準 |
📝 構文
max-width: none | <length> | <percentage> | min-content | max-content | fit-content;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
none | キーワード | 最大幅の制限なし。 |
<length> | タイプ | 固定された最大幅。 |
<percentage> | タイプ | 包含ブロックに対するパーセンテージ。 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| max-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： max-width は width より優先されます。width をより大きく設定しても、実際の幅が max-width を超えることはありません。
❓ よくある質問
Qmax-width:100% は何をするのですか？
Amax-width:100% は要素が親より広くなるのを防ぎ、height:auto と組み合わせることで画像を比率を保って拡縮し、はみ出さずに表示します。これがメディアをレスポンシブにする標準的な方法です。コンテナを埋めるよう小さな画像を引き伸ばす width:100% と違い、max-width:100% はコンテナが画像の本来のサイズより狭いときだけ縮小し、大きな画像は原本サイズで表示されます。
Q最大幅を制限しつつコンテンツを中央揃えにするにはどうすればよいですか？
Amax-width で幅の上限を設け、margin:0 auto で要素を水平方向に中央揃えにするのが最も一般的な方法です。例えば、本文に max-width:800px; margin:0 auto; とすると、狭い画面では自動的に縮み、広い画面では 800px で中央に保たれます。margin:auto が効くには、要素がブロックレベルで利用可能なスペースより狭い必要があります。これにより、デスクトップでは読みやすい行幅を保ちつつ、小さな画面でも完全に流動的に保てます。
Qmax-width と width の両方を設定した場合、どちらが優先されますか？
Amax-width が優先されます。width が max-width を超えるときは max-width で描画され、width が小さいときは width が適用されます。全体の優先順位は min-width → max-width → width なので、max-width は width の上限として機能し、min-width を下回ることはありません。このクランプ（制限）により、過度に大きな width 値がレイアウトを破壊するのを防ぎ、コンテンツが快適な読書幅に収まる理由でもあります。
Qmax-width にパーセンテージを使えますか？
Aはい。max-width は長さ、パーセンテージ、コンテンツキーワードを受け入れます。パーセンテージは包含ブロックの幅に対して計算されるため、例えば max-width:80% は親コンテナの幅の 80% を超えないことを意味します。また、上限をコンテンツ自身から求める min-content、max-content、fit-content などのキーワードもサポートしており、メディアクエリなしでレスポンシブな振る舞いを得られます。パーセンテージは流動的な親の中でパネルを囲い込むのに特に便利です。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
