# 入力に合わせて伸びるテキストエリアのCSS実装

> field-sizing: contentだけで、入力量に応じて高さが自動で伸びるテキストエリア。従来JSが必須だった挙動がCSS1行になりました。

- カテゴリ: フォーム
- URL: https://www.css-dictionary.com/recipes/auto-grow-textarea/

## HTML

```html
<label class="field-label" for="comment">コメント</label>
<textarea id="comment" class="grow" rows="2" placeholder="入力すると高さが自動で伸びます"></textarea>
```

## CSS

```css
.field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
}

.grow {
  width: 280px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #cbbfa5;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
  field-sizing: content; /* 内容に合わせてサイズが変わる */
  min-height: 2lh;       /* rows相当の最低高さ */
  max-height: 10lh;      /* 伸びすぎ防止。超えたらスクロール */
  resize: none;          /* 手動リサイズは無効化（自動と競合するため） */
}

.grow:focus-visible {
  outline: 2px solid #b0413e;
  outline-offset: -1px;
}
```

## 仕組みの解説

field-sizing: content は「フォーム部品のサイズを内容に合わせる」プロパティで、これまで scrollHeight を監視するJSで実装していた自動リサイズがCSSだけで済みます。最低・最大の高さは min-height / max-height で制御し、単位に lh（1行の高さ）を使うと「2行分〜10行分」と直感的に書けます。上限を超えた分は通常どおりスクロールします。

## 実装のポイント

未対応ブラウザでは普通のtextareaとして動くため、そのまま出しても壊れません（プログレッシブエンハンスメント）。対応状況はBaselineバッジを確認してください。

## AIに依頼するときの文例

入力に合わせて高さが自動で伸びるテキストエリアを作ってください。JSではなくfield-sizing: contentを使い、min-height/max-heightをlh単位で指定、resize: noneで手動リサイズを無効化してください。

## 使っているプロパティ

- [field-sizing](https://www.css-dictionary.com/property/field-sizing.md)
- [resize](https://www.css-dictionary.com/property/resize.md)
- [line-height](https://www.css-dictionary.com/property/line-height.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)