field-sizing: contentとは？入力内容に合わせて自動で伸びるテキストエリアをCSSだけで実装

こんにちは。静岡県浜松市でWEBデザイナーをしています小瀧です。
お問い合わせフォームやコメント欄を作るとき、こんな悩みを感じたことはありませんか。

テキストエリアの高さが固定されていて入力しづらい。
長い文章を書くとスクロールが発生して見づらい。

そのため、これまではJavaScriptを使って入力文字数に応じて高さを調整する。

といった処理を実装することが多くありました。

しかし最近のCSSでは、こうした処理をCSSだけで実現できる機能が登場しています。

それがfield-sizingです。

このプロパティを使うと、テキストエリアや入力フォームが入力内容に合わせて自動でサイズ調整field-sizingとは

field-sizingは、フォーム要素のサイズを内容に応じて自動調整するCSSプロパティです。

特に次の要素で効果を発揮します。

これにより、ユーザーが入力した内容の長さに応じてフィールドが伸びるようになります。

基本の書き方

使い方は非常にシンプルです。

textarea { field-sizing: content; }

これだけで、テキストエリアが入力内容に応じて高さを自動調整します。

JavaScriptは不要です。

テキストエリアの実装例

HTMLの基本構造はこちらです。

<textarea placeholder="メッセージを入力してください"></textarea>

CSSにfield-sizingを追加します。

textarea { 
　width: 100%; 
　min-height: 80px; 
　padding: 12px; 
　font-size: 16px; 
　field-sizing: content; 
}

これで、文章が増えるにつれてテキストエリアが自然に伸びていきます。

input要素でも使える

field-sizingはtextareaだけでなく、input要素でも利用できます。

input[type="text"] { field-sizing: content; }

この設定を行うと、入力された文字数に応じてinputの横幅が変化します。

タグ入力UIや検索ボックスなどで便利です。

実務での活用シーン

field-sizingは、次のようなUIで活躍します。

特にチャットアプリの入力欄これまでの実装との違い

従来の実装ではJavaScriptが必要でした。

field-sizingを使えば、これらの処理が不要になります。

CSSだけで自動サイズ調整注意点

field-sizingは比較的新しいCSS機能です。

実務では基本サイズを指定しておくと安全です。

まとめ

field-sizingは、フォームUIをより自然にするための新しいCSSプロパティです。

入力内容に応じてフィールドサイズを自動調整できるため、JavaScriptを使わずに快適な入力体験を提供できます。

コメントフォームやチャットUIなど、ユーザーが文章を入力する場面では特に効果的です。

CSSは今、レイアウトだけでなくUIの挙動までも担うようになっています。
field-sizingも、その進化を象徴する機能の一つと言えるでしょう。

satokotadesignキャンペーン実施中！