フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更
Post on:2024年8月20日
CSSはどんどん便利になっていますね!
これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。
CSSのfield-sizing: content;
でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh
単位を使ったCSSのテクニックを紹介します。
![フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更](http://coliss.com/wp-content/uploads-202403/2024081001@2x.gif)
フォームのテキストエリアに使用するCSSのテクニックは、2つあります。
field-sizing: content;
で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。lh
単位で、テキストエリアの高さを行の高さで設定する。
HTMLは、textarea
を用意するだけです。
1 |
<textarea></textarea> |
CSSは、下記の通り。
field-sizing: content;
でテキストエリアを自動的にサイズ変更し、min-height: 3lh;
で行の高さで高さを設定します。
1 2 3 4 5 |
textarea { line-height: 1.5; field-sizing: content; min-height: 3lh; { |
field-sizing: content;
を使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、サイズが自動で拡張されるテキストエリアを簡単に実装できます。
また、min-height
やmax-height
を設定することで、下限上限のサイズも設定できます。その際にlh
単位で設定すると、便利です。
CSSのfield-sizing: content;
について詳しくは、下記をご覧ください。
![CSSの新しいプロパティ「field-sizing: content;」が便利! フォームのサイズを入力された文字量に合わせて自動変更](http://coliss.com/wp-content/uploads-202304/2023100710-03.gif)
CSSの新しいプロパティ「field-sizing: content;」が便利! フォームのサイズを入力された文字量に合わせて自動変更
※画像は、max-height
を4行分にしたものです。
CSSのlh
単位について詳しくは、下記をご覧ください。
![知っておくと便利なCSSの単位: フォントに基づく相対単位(em, rem, cap, ch, ex, ic, lhなど)の便利な使い方を解説](http://coliss.com/wp-content/uploads-202401/2024031701@2x.png)
フォントに基づく相対単位(em, rem, cap, ch, ex, ic, lhなど)の便利な使い方を解説
実際の動作は、下記でご覧ください。
1つ目は、テキストを複数行記述してもテキストエリアの高さは変わらず、3行目以降を入力すると最初の行が表示されなくなります。
2つ目は、field-sizing: content;
を設定してあるので、複数行を入力するとそれに合わせて自動的に高さが変更されます。
3つ目は、min-height: 3lh;
を設定してあるので、少ない行でも3行分の高さで表示されます。
4つ目は、max-height: 3lh;
で、たくさん入力しても3行分を超えることはありません。
See the Pen
textareas field-sizing: content; by coliss (@coliss)
on CodePen.
元ネタは、下記ポストより。
2 CSS tips for textareas:
1️⃣ Use
field-sizing: content
to make the textarea auto-resize to its content2️⃣ Use
lh
units to set the height in the font's computed line-height units pic.twitter.com/gdR0meDAmJ— StackBlitz (@stackblitz) August 5, 2024
sponsors