2024年11月6日(水)

入力文字数によってテキストエリアを高さを可変できるCSSプロパティ「field-sizing: content;」

• 0
• 6
• 1
• 2

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

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

field-sizing: content;

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

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

textarea { field-sizing: content; }

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