# resize

> ユーザーが要素のサイズを変更できるかどうかを指定するプロパティです。none、both、horizontal、verticalの値があり、textareaのリサイズ動作を制御できます。

- カテゴリ: インタラクション・UX
- URL: https://www.css-dictionary.com/property/resize/

## 構文

```css
resize: none | both | horizontal | vertical
```

## Tailwindでは

- `resize` → resize: both
- `resize-y` → resize: vertical
- `resize-none` → resize: none

## ブラウザ対応

- 対応が限定的
- Chrome 1+ / Firefox 4+ / Safari 3+ / Edge 79+

## コード例

### 例1: 縦方向のみリサイズ可能（textareaのデフォルト）

```css
resize: vertical;
```

### 例2: 横方向のみリサイズ可能

```css
resize: horizontal;
```

### 例3: 縦横両方向にリサイズ可能

```css
resize: both;
```

### 例4: リサイズ不可

```css
resize: none;
```

## TIPS

textareaのリサイズを制御する際によく使う。overflowが visible 以外である必要がある。

## よくある間違い

overflow: visible;では効果がない。overflow: auto;やhidden;などと組み合わせる。

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

resizeはoverflowがvisible以外の要素にしか効きません——この前提条件をAIは省略しがちです。またtextareaの自動サイズ調整（内容に応じて伸びる）はresizeではなくfield-sizing: contentの領域で、手動リサイズと自動リサイズの区別が必要です。方向はboth/horizontal/verticalを選べます。

## AIへの依頼文例

- チャット欄のtextareaを「手動リサイズは縦のみ許可、内容でも自動で伸びる」ようにresizeとfield-sizingで設計して

## 関連プロパティ

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