🎨

field-sizingで自動リサイズするテキストエリアをお手軽に

2025/07/10に公開

 TLDRChromium系ブラウザでは field-sizing: content; が使えるようになっている！

lh単位などと組み合わせれば、最小行数を指定しつつ可変高のテキストエリアをJSなしで作れる
リセットCSS使っているときはちょっと注意

 field-sizingが来た！2025年7月10日現在、Chromium系のブラウザではfield-sizingが使えるようになっている。

https://developer.mozilla.org/ja/docs/Web/CSS/field-sizing
気軽に使えるというわけではないが、使える環境なら強い味方になってくれる。

 これまではJSが必須だったテキストエリアを入力内容にあわせて自動リサイズしたいケースは結構あると思うが、これまではJavaScriptを使っていろいろ制御が必要だった。

コンテンツ量に合わせて自動調整するJS実装を自作したり、何かしらライブラリを導入してなんとかしてみても挙動と自アプリとの噛み合わせが悪く上手く動作しないことがあったり… などと大変だ。
これからは（将来FirefoxやSafariも対応すればきっと）HTML+CSSのみで簡単にできる。

field-sizing: content; を使えば、入力内容にあわせた自動リサイズが簡単にできる。

 実装例以下は、初期状態が2行分の高さのテキストエリアの場合。
.example-1 {
  field-sizing: content;
  box-sizing: content-box;
  min-height: 2lh; /* 2lh で2行の高さをシンプルに規定できる */
  padding: 0.5rem;
  width: stretch;
}
リセットcssでborder-boxになっていることが多いので、実装ではpaddingやborderのサイズも考慮に入れる必要があるだろう。
/* border-box の場合 */
.example-2 {
  field-sizing: content;
  box-sizing: border-box;
  min-height: calc(2lh + 1rem + 2px); /* 2行の高さ + 余白や罫線の幅 */
  padding: 0.5rem;
  width: stretch;
}

 Stackblitz前述の参考CSSの実働サンプル

TLDR

field-sizingが来た！

これまではJSが必須だった

実装例

Stackblitz

Discussion