# width

> 要素の横幅を指定するプロパティです。px、%、vw、em、remなど様々な単位が利用できます。auto、min-content、max-content、fit-contentなどの特殊な値も使用でき、レスポンシブデザインの基礎となります。

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

## 構文

```css
width: <length> | <percentage> | auto | min-content | max-content | fit-content
```

## Tailwindでは

- `w-full` → width: 100%
- `w-1/2` → width: 50%
- `w-fit` → width: fit-content
- `w-4` → width: 16px
- 一般形: `w-{n}（n×4px）`
- 任意値: `w-[52px]`

## ブラウザ対応

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

## コード例

### 例1: 幅を100pxに固定

```css
width: 100px;
```

### 例2: 親要素の50%の幅

```css
width: 50%;
```

### 例3: 内容に合わせて幅を自動調整

```css
width: fit-content;
```

## TIPS

autoはデフォルト値。fit-contentやmin/max-contentはモダンなレイアウトで便利。

## よくある間違い

親要素の幅に依存する場合、意図しないレイアウトになることがある。

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

AIはwidth: 100%とwidth: 100vwを混同しがちです。100vwはスクロールバーの幅を含むため横スクロールが発生します。またインライン要素にはwidthが効かない、fit-content/min-content/max-contentという内在サイズキーワードの存在も、AIの提案から漏れがちです。

## AIへの依頼文例

- 100vw指定で発生している横スクロールを修正して
- ボタンの幅を内容に合わせつつ最小幅を確保する指定をfit-contentとminmaxの考え方で書いて

## 関連プロパティ

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