CSS のフィールド サイズ設定

編集可能なコンテンツを含む要素のサイズを自動調整する 1 行のコード。

Adam Argyle

field-sizing がないと、適切なサイズの入力フィールドを作成するには、テキスト フィールド入力の平均サイズを推測するか、JavaScript を使用して文字数をカウントし、ユーザーがテキストを入力するにつれて要素の高さまたは幅を増やす必要がありました。つまり、ユーザーが入力したコンテンツを追跡するのは簡単ではなく、エラーが発生しやすいものでした。

field-sizing を使用すると、1 行の CSS でコンテンツに基づくサイズ設定を有効にできます。このコンテンツベースのサイズ設定スタイルは、textarea 以外でも機能します。

textarea, select, input {
  field-sizing: content;
}

クイックリンク

仕様 | 説明

ショート動画は好きですか？

Wes Bos と Jhey が、それぞれ field-sizing を紹介する素晴らしい動画を X（旧 Twitter）に投稿しています。

field-sizing の影響を受ける要素

field-sizing が機能する <form> 要素と、各要素に及ぼす影響の概要を以下に示します。

<textarea>

入力は min-inline-size に縮小されるか、プレースホルダに合わせて縮小されます。

ユーザーが入力すると、入力はインライン方向に最大インライン サイズに達するまで拡大します。この時点でテキストが折り返され、入力のブロックサイズが新しい行に合わせて拡大します。

<select>、<select multiple>

選択したオプションに合わせて、選択要素が縮小されます。

multiple 属性を持つ選択は、最も幅の広いオプションに合わせて拡大し、オプションの数に合わせて必要な高さになります。

<input type="text">、<input type="email">、<input type="number">

入力は min-inline-size に縮小されるか、プレースホルダに合わせて縮小されます。

ユーザーが入力すると、入力は max-inline-size に達するまでインライン方向に拡大し、その時点でオーバーフローによって入力値がクリップされます。

<input type="file">

入力はボタンと事前入力されたファイル名のテキストに折りたたまれます。

ファイルをアップロードすると、入力はボタンとファイル名のテキストを合わせた幅になります。

結果の確認、テスト、比較

以下に、field-sizing の影響を受ける各フォーム要素の動作の前後を示すインタラクティブな最小限の例を示します。

詳しく検証しています

[placeholder] を使用すると、プレースホルダがコンテンツになります。これは前述しましたが、フォームのスタイルを設定する際に重要であるため、ここで再度説明します。長いプレースホルダまたは短いプレースホルダは、field-sizing: content を使用して入力の固有サイズを変更します。

空のスタイルとオーバーフローするスタイルの処理

field-sizing を使用すると、追加の作業が必要になります。Ahmad Shadeed はこれを「防御的 CSS」と呼んでいます。この場合、目標は必ずしも動作や外観を正確に指定することではなく、望ましくない視覚的な状態にならないように保護することです。以前は、入力にはかなりの量の固定サイズがありましたが、field-sizing: content を適用すると、入力が小さすぎたり大きすぎたりする可能性があります。

次のスタイルから始めることをおすすめします。これらは、要素が小さすぎるボックスに縮小されないようにし、textarea の場合は大きくなりすぎないようにします。

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

この CSS では、サイズ設定に相対単位を使用しています。新しい lh 単位はブロックサイズに最適で、ch はインライン サイズに適しています。

field-sizing のデフォルト値は何ですか？

field-sizing のデフォルト値は fixed で、fixed または content の 2 つの値のみを受け入れます。