要素の最大幅を指定するプロパティです。widthと組み合わせてレスポンシブなデザインが可能です。コンテンツが指定幅を超えないように制限し、大画面での可読性を保つのに役立ちます。
max-width: <length> | <percentage> | none| max-w-md | max-width: 28rem（448px） |
| max-w-full | max-width: 100% |
| max-w-none | max-width: none |
一般形: max-w-{size}（xs〜7xl）
任意値: max-w-[720px]
max-width: 600px;最大幅を600pxに制限
max-width: 100%;親要素の幅を超えないようにする
画像やコンテンツの横スクロール防止に便利。
widthとmax-widthを併用した場合、max-widthが優先される。
min-widthとmax-widthが矛盾する場合はmin-widthが勝つ、という優先規則をAIは説明し忘れます。またコンテナの定番はwidth: 100% + max-widthではなく、widthは初期値autoのままmax-width + margin-inline: autoで十分なことが多いです。
本文コンテナを「最大720px・小画面では左右16px余白」にする定番パターンをmax-widthで書いて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。