TAGS :,

Webページ上にあるテキストエリアに文字を入力する場合、デフォルトだと決められた高さ以上のテキストが入ると、スクロールバーが表示され、その後テキスト全体を確認するにはスクロール制御になります。

テキストエリアの高さが短かったりすると、このスクロール制御が使いづらくなったりしますが、中に入力される文字数によってテキストエリアの高さを可変できるプロパティ「field-sizing: content;」が便利なので備忘録メモとして紹介してみます。

field-sizing: content;

CSSでテキストエリアの高さ可変にするには「field-sizing」プロパティを使用します。

この「field-sizing」プロパティはデフォルトでは「fixed」の値が入っていますが、この値を「content」にすることで、入力された内容によって高さを可変させることが可能になります。

textarea {
	field-sizing: content;
}

「field-sizing: content;」プロパティを設定したテキストエリアの動作サンプルは以下です。
左はデフォルトの「field-sizing: fixed;」で入力されたテキストが高さを超えるとスクロール制御になり、右が「field-sizing: content;」で入力されたテキストの量によって高さが可変になります。

See the Pen
CSS [ field-sizing: content; ] by BLACKFLAG (@BlackFlag)
on CodePen.

この「field-sizing: content;」では、「max-height」と併用することで、無限に高さを伸ばすのではなく、高さの最大値を設定することも可能です。

textarea {
	field-sizing: content;
	min-height: 5lh;
	max-height: 10lh;
}

高さの最大値をせて地した場合の動作サンプルは以下です。

See the Pen
CSS field-sizing: content; [2] by BLACKFLAG (@BlackFlag)
on CodePen.

「field-sizing: content;」プロパティの対象ブラウザについては以下です。
※現時点（2024年11月）ではSafariやFirefoxは未対応です。

まだChromeやEdgeのみの対応ですが、「field-sizing: content;」によってテキストエリアの使い勝手がよくなる場面は多くあるので、プログレッシブエンハンスメントの設計として活用していくと良いと思います。

「field-sizing: content;」プロパティで高さ可変のテキストエリアを設置する際にぜひ。。。