field-sizing
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
field-sizing
は CSS のプロパティで、フォームコントロール要素のような、既定の推奨サイズが指定された要素のサイズ設定を制御することができます。このプロパティを使用すると、既定のサイズ設定を上書きすることができ、あるフォームコントロールがそのコンテンツに合わせてサイズを調整できるようになります。
このプロパティは通常、テキスト <input>
や <textarea>
要素のスタイル設定に使用され、フォームコントロールにテキストが入力されたときに、コンテンツを縮小したり、大きくしたりすることができます。
構文
/* キーワード値 */
field-sizing: content;
field-sizing: fixed;
/* グローバル値 */
field-sizing: inherit;
field-sizing: initial;
field-sizing: revert;
field-sizing: revert-layer;
field-sizing: unset;
値
解説
field-sizing: content
とすると、フォーム要素の既定の推奨サイズ設定を上書きします。この設定は、テキスト入力欄を内容がちょうど収まるように縮小し、テキストが入力されるにつれて大きくなるように設定する簡単な方法を提供します。コンテンツを含む要素のサイズによって定義されるか、 CSS によって設定されます)最大サイズの制限に達すると展開されなくなり、この点ではすべてのコンテンツを表示するにはスクロールが要求されます。
field-sizing: content
の影響を受ける要素
具体的には、 field-sizing
を content
にすると以下の要素に影響します。
- ユーザーから直接テキスト入力を受け入れるフォーム入力型。これには
email
、number
、password
、search
、tel
、text
、url
型があります。- コントロールに最小幅が設定されていない場合は、テキストカーソルと同じ幅になります。
placeholder
属性を持つコントロールは、プレースホルダーテキストを表示できるだけの大きさで表示されます。size
属性は、そのような<input>
要素の既定の推奨サイズを変更します。結果として、size
はfield-sizing: content
が設定されている<input>
要素には効果がありません。
file
入力型に対応しています。しかし、ユーザーがアップロードする新しいファイルを選択すると、表示されるファイル名が変わります。field-sizing: content
が設定されている場合、コントロールはファイル名がちょうど収まるようにサイズを変更します。<textarea>
コントロールを制御します。field-sizing: content
を設定した<textarea>
要素は、以下の追加を除いて、単一の行テキストコントロールと同じように動作することは注目に値します。<select>
コントロールです。これらは、field-sizing: content
を設定した場合の動作とは少し異なります。効果の種類は作成する<select>
コントロールの種類によって異なります。- 通常のドロップダウンボックスは、新しい値が選択されると、常に表示される選択肢の値に合わせて幅が変更されます。(既定では、ドロップダウンのサイズは、最長の選択肢の値を表示するのに十分な大きさに設定されています。)
- リストボックス(
<select>
要素にmultiple
またはsize
属性を指定したもの)はスクロールしなくてもすべての選択肢を表示できる大きさになります。(既定では、ドロップダウンボックスはすべての選択肢の値を表示するためにスクロールを要求されます。) size
属性は<select>
要素にfield-sizing: content
が設定することによる影響はとても小さくなります。このような場合、ブラウザーはsize
が1
に等しいかどうかを調べて、<select>
コントロールがドロップダウンとして現れるか、リストボックスとして現れるかを判断します。しかし、size
が選択肢の数よりも小さい場合でも、常にリストボックスのすべての選択肢を表示されます。
field-sizing
と他のサイズ設定との相互作用
field-sizing: content
によってあるフォームコントロールに指定された柔軟なサイズ設定は、他にも CSS のサイズ設定を使用することができます。 field-sizing: content
を使用する場合は、 width
と height
に固定したサイズに設定することは避けてください。しかし、 min-width
や max-width
のようなプロパティを field-sizing: content
の横に並んだ状態で使用すると、入力されたテキストに合わせてコントロールを大きくしたり小さくしたりすることができ、コントロールが大きくなりすぎたり小さくなりすぎたりするのを防ぐことができるため、非常に有益な効果があります。
maxlength
属性があると、コントロールが最大文字制限に達したとき、サイズの増加が停止します。
公式定義
初期値 | fixed |
---|---|
適用対象 | Elements with default preferred size |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
field-sizing =
fixed |
content
例
テキストフィールドの伸長と縮小
この例は、field-sizing: content
が単一行と複数行のテキストフィールドに与える効果を示しています。フィールドはテキストが追加されたり除去されたりするとサイズを調整し、下限または上限のサイズ制限に達するまで、効果的にコンテンツを縮小します。
HTML
この例の HTML は 3 つのフォームフィールドを格納し、それぞれに <label>
を関連付けます。 2 つの <input>
要素、 text
および email
型と、 <textarea>
要素です。
<div>
<label for="name">名前:</label>
<input type="text" id="name" maxlength="50" />
</div>
<div>
<label for="email">メールアドレス:</label>
<input type="email" id="email" maxlength="50" placeholder="e.g. a@b.com" />
</div>
<div>
<label for="comment">コメント:</label>
<textarea id="comment">これはコメントです。</textarea>
</div>
この HTML は以下の点に注意してください。
- 最初の 2 つのフィールドには
maxlength
属性が設定されており、文字数制限に達したときにフィールドのサイズが大きくならないようになっています。 <textarea>
はmin-width
の制約(下記の CSS コードで設定する)の端に達するまでインライン方向に成長し、その後の文字を格納するためにブロック方向に新しい行を追加し始めます。email
入力欄にはプレースホルダーが設定されています。これにより、フィールドはプレースホルダー全体を表示させるのに十分な大きさでレンダリングされます。フィールドがフォーカスを受け、ユーザーが入力を始めると、フィールドのサイズはmin-width
値に変更されます。プレースホルダーがないtext
フィールドは、最初はmin-width
でレンダリングされます。
CSS
CSS では、 3 つのフォームフィールドに field-sizing: content
を設定し、 min-width
と max-width
で入力サイズを制約しています。フィールドに最小幅が設定されていない場合、フィールドはテキストカーソルと同じ幅でしかレンダリングされないことを再確認しておきましょう。
また、 <label>
に初歩的なスタイル設定を施し、フィールドの隣にきれいに配置できるようにします。
input,
textarea {
field-sizing: content;
min-width: 50px;
max-width: 350px;
}
label {
width: 150px;
margin-right: 20px;
text-align: right;
}
結果
下記のフィールドにテキストを入力したり除去したりして、 field-sizing: content
と横に並んだプロパティの効果を調べてみてください。
<select>
要素の表示を制御
この例は、 field-sizing: content
のドロップダウンメニュー型と複数行リストボックス型の <select>
要素に対する効果の種類を示しています。
HTML
HTML は 2 つの <select>
要素の組を含んでいます。 1 つは field-sizing: content
を適用したもの、もう 1 つは適用していないもので、違いを見ることができます(ただし、テキストフィールドの場合よりも効果はわかりにくいかもしれません)。それぞれのセットには、ドロップダウンメニュー型と複数行のリストボックス型(multiple
属性を設定したもの)が 1 つずつ記載されています。
<div class="field-sizing">
<h2><code>field-sizing: content</code> 付き</h2>
<select>
<option>Bananas</option>
<option>Strawberries</option>
<option selected>Apples</option>
<option>Raspberries</option>
<option>Pomegranate</option>
</select>
<select multiple>
<option>Bananas</option>
<option>Strawberries</option>
<option>Apples</option>
<option>Raspberries</option>
<option>Pomegranate</option>
</select>
</div>
<div>
<h2><code>field-sizing: content</code> なし</h2>
<select>
<option>Bananas</option>
<option>Strawberries</option>
<option selected>Apples</option>
<option>Raspberries</option>
<option>Pomegranate</option>
</select>
<select multiple>
<option>Bananas</option>
<option>Strawberries</option>
<option>Apples</option>
<option>Raspberries</option>
<option>Pomegranate</option>
</select>
</div>
メモ:
アクセシビリティのために各フィールドに意味のあるテキストによる説明を関連付けるために、各フォームコントロールに <label>
要素を含めることがベストプラクティスです(詳しくは意味のあるテキストラベルを参照してください)。この例は純粋にフォームコントロールの視覚レンダリングの側面に焦点を当てているため、この例ではそうしていませんが、本番コードにはフォームラベルを記載するようにしてください。
CSS
CSS では、 field-sizing: content
は最初の <select>
要素にのみ設定します。
.field-sizing select {
field-sizing: content;
}
結果
field-sizing: content
の次の効果に注意してください。
- ドロップダウンメニューは常に表示されている選択肢のサイズに合わせ、異なる選択肢が選択されるとサイズが変更されます。
field-sizing: content
を指定しない場合、サイズは選択肢の幅と同じに修正されます。 - 複数選択リストボックスは、すべての選択肢を一度に表示します。
field-sizing: content
がないと、ユーザーはすべての選択肢を表示するためにボックスをスクロールしなければなりません。
仕様書
Specification |
---|
CSS Basic User Interface Module Level 4 # field-sizing |
ブラウザーの互換性
BCD tables only load in the browser