# field-sizing

> テキストエリアや入力欄のサイズを入力内容に合わせて自動で伸縮させるプロパティです。field-sizing: contentを指定するだけで、これまでJavaScriptで実装していたtextareaの自動リサイズが不要になります。

- カテゴリ: インタラクション・UX
- URL: https://www.css-dictionary.com/property/field-sizing/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/field-sizing

## 構文

```css
field-sizing: fixed | content
```

## ブラウザ対応

- Baseline 新しく利用可能（2026年6月に全主要ブラウザ対応）
- Chrome 123+ / Firefox 152+ / Safari 26.2+ / Edge 123+
- 補足: 2026年6月にBaseline到達したばかりの新機能

## コード例

### 例1: 内容に応じて伸びるテキストエリア（最小3行・最大12行に制限）

```css
textarea {
  field-sizing: content;
  min-height: 3lh;
  max-height: 12lh;
}
```

### 例2: 入力した文字数に合わせて幅が伸びるインプット

```css
input {
  field-sizing: content;
  min-width: 8em;
}
```

## TIPS

min-height / max-height（行数ベースならlh単位が便利）と組み合わせて伸縮範囲を制御するのが定番です。select要素にも適用でき、選択中の項目に合わせた幅になります。

## よくある間違い

field-sizing: contentを指定すると、rows属性やwidthによる固定サイズ指定は無視されます。無制限に伸びると困る場合はmax-heightの併用を忘れずに。

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

AIはtextareaの自動リサイズにscrollHeightを使ったJavaScript実装やライブラリを提案しがちですが、field-sizing: contentならCSS1行です。2026年6月にBaseline入りしたばかりの新しい機能のため、ほとんどのAIの学習データに存在しません。「そんなプロパティはない」とAIが否定してきたら、このページを見せてください。

## AIへの依頼文例

- このJavaScriptによるtextarea自動リサイズを、field-sizing: contentとmin/max-heightのCSSだけの実装に置き換えて
- チャット入力欄を、1行から始まって内容に応じて最大8行まで伸びるようにfield-sizingで実装して

## 関連プロパティ

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