# max-width

> 要素の最大幅を指定するプロパティです。widthと組み合わせてレスポンシブなデザインが可能です。コンテンツが指定幅を超えないように制限し、大画面での可読性を保つのに役立ちます。

- カテゴリ: スペーシング・サイズ
- URL: https://www.css-dictionary.com/property/max-width/

## 構文

```css
max-width: <length> | <percentage> | none
```

## Tailwindでは

- `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]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 最大幅を600pxに制限

```css
max-width: 600px;
```

### 例2: 親要素の幅を超えないようにする

```css
max-width: 100%;
```

## TIPS

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

## よくある間違い

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

## AIがよく間違えるポイント

min-widthとmax-widthが矛盾する場合はmin-widthが勝つ、という優先規則をAIは説明し忘れます。またコンテナの定番はwidth: 100% + max-widthではなく、widthは初期値autoのままmax-width + margin-inline: autoで十分なことが多いです。

## AIへの依頼文例

- 本文コンテナを「最大720px・小画面では左右16px余白」にする定番パターンをmax-widthで書いて

## 関連プロパティ

- [width](https://www.css-dictionary.com/property/width.md)
- [min-width](https://www.css-dictionary.com/property/min-width.md)