field-sizing: contentが地味に便利。入力欄を中身に合わせて可変させる

はじめに

フォームUIを作っていると、入力欄の幅や高さをどこまで固定するかで毎回ちょっと悩みます。タグ入力は短く見せたいのに空欄だと広すぎる、コメント欄は最初は小さくていいのに入力が増えると狭い、といった小さな違和感が積み重なりがちです。

そんな場面で効くのが、field-sizing: contentです。1行のCSSで、inputやtextarea、selectを内容に合わせて伸び縮みさせられます。2026年3月31日時点ではMDNでLimited availabilityですが、対応ブラウザではかなり素直に効くので、フォームの使い心地を軽く底上げしたいときに試しやすい機能です。

機能やライブラリの概要

field-sizingは、フォームコントロールの既定サイズの扱いを変えるCSSプロパティです。初期値はfixedで、contentを指定すると内容に合わせてサイズが変わるようになります。

Chrome for Developersでは、以前はJavaScriptで文字数を数えたり、入力ごとに高さを調整したりしていた場面を、1行のCSSで扱えると紹介されています。効く要素は主に次のとおりです。

  • input type="text"やemailなどのテキスト入力
  • textarea
  • select
  • select[multiple]

見た目の派手さはありませんが、管理画面や検索UIのように「入力欄が多い画面」ほど効きやすいタイプの改善です。

基本の使い方

最初はかなりシンプルです。このコードでは、ユーザーが入力した内容に合わせてinputとtextareaのサイズを変えています。

HTML
<label class="field">
  タグ名
  <input type="text" placeholder="JavaScript" />
</label>

<label class="field">
  メモ
  <textarea placeholder="補足メモを入力"></textarea>
</label>
CSS
.field {
  display: grid;
  gap: 8px;
}

.field input,
.field textarea {
  field-sizing: content;
  min-inline-size: 12ch;
  max-inline-size: 48ch;
  padding: 0.6rem 0.8rem;
  border: 1px solid #c8d0da;
  border-radius: 10px;
  font: inherit;
}

.field textarea {
  min-block-size: 4lh;
}

やっていることは単純で、field-sizing: contentを付けたうえで、縮みすぎや伸びすぎをmin-inline-sizeやmax-inline-sizeで抑えています。Chrome for Developersの解説でも、この「そのままでは小さすぎたり大きすぎたりしやすいので、上下限を一緒に置く」考え方が勧められています。

便利な使いどころ

実務で特に相性がいいのは、固定幅の入力欄だと窮屈に見えやすいUIです。

  • タグ編集やラベル編集のような短文入力
  • 絞り込み検索バーのselectやキーワード欄
  • CMSや管理画面の設定フォーム
  • ちょっとした補足メモ欄やコメント欄

たとえば、記事一覧の絞り込みバーを作るとき、カテゴリーselectが常に最長項目に合わせて横幅を取りすぎることがあります。field-sizing: contentを使うと、選択中の項目に寄せた自然な幅になりやすく、横並びUIが詰まりにくくなります。

textareaでも便利です。従来はscrollHeightを見ながらJavaScriptで高さ調整する実装がよくありましたが、軽い用途ならCSSだけでかなり見た目を整えられます。

応用コード

ここでは、管理画面の絞り込みバーを少し扱いやすくする例を見てみます。このコードでは、inputとselectを内容に合わせつつ、ツールバー全体では崩れすぎないように上限も付けています。

HTML
<form class="filters">
  <label>
    キーワード
    <input type="search" placeholder="記事タイトルで検索" />
  </label>

  <label>
    カテゴリー
    <select>
      <option>すべて</option>
      <option>JavaScript</option>
      <option>CSS</option>
      <option>WebGL / Three.js</option>
    </select>
  </label>

  <label>
    ステータス
    <select>
      <option>公開中</option>
      <option>下書き</option>
      <option>レビュー待ち</option>
    </select>
  </label>
</form>
CSS
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.filters label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 0.95rem;
}

.filters input,
.filters select {
  field-sizing: content;
  min-inline-size: 10ch;
  max-inline-size: min(100%, 36ch);
  min-block-size: 2.75rem;
  padding-inline: 0.85rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  font: inherit;
}

@supports not (field-sizing: content) {
  .filters input {
    inline-size: 18rem;
  }

  .filters select {
    min-inline-size: 12rem;
  }
}

このくらいの使い方なら、未対応ブラウザ向けにも崩れにくいです。対応ブラウザでは中身に合った軽い見た目になり、未対応ブラウザでは固定幅寄りにフォールバックします。

特にフィルターツールバーやタグ編集のようなUIでは、「最初から全部広い」よりも、「必要なぶんだけ広がる」ほうが密度を上げやすいです。地味ですが、管理画面の触り心地に効いてきます。

注意点

  • field-sizing: contentだけを入れると、空欄時にかなり小さく見えることがあります。min-inline-sizeを一緒に付ける前提で考えたほうが安全です。
  • textareaは内容が増えるとかなり大きくなります。レイアウトを壊さないようにmax-inline-sizeや親要素の幅制約も持たせたいです。
  • プレースホルダーや選択中の項目に引っ張られて、想像より広がることがあります。見た目優先のUIでは上限値を早めに決めておくと安定します。
  • 2026年3月31日時点で、MDNではLimited availabilityです。つまり全主要ブラウザで安定して使える段階ではありません。@supportsで段階的に入れるのが現実的です。

まとめ

field-sizing: contentは、派手な新機能ではありませんが、フォームの見え方と使い心地をCSSだけで改善しやすい機能です。特に、短い入力欄が多い管理画面や、横並びのフィルターUIでは効果が分かりやすいと思います。

いきなり全面採用するというより、タグ入力、検索バー、メモ欄のような「この入力だけ少し自然にしたい」場所から入れるのがおすすめです。実装コストが軽いわりに、見た目の窮屈さを減らしやすいのがいいところです。

ポイント

  • inputやtextarea、selectを内容に合わせて自然に伸び縮みさせやすい
  • min-inline-sizeとmax-inline-sizeをセットで考えると実務で安定する
  • 互換性はまだ限定的なので、@supports前提の段階的導入が向いている

参考リンク

read next