field-sizing

content

コンテンツに合わせて要素のサイズを調整できるようにします。

fixed

要素に固定サイズを設定します。これが既定値です。

field-sizing: content とすると、フォーム要素の既定の推奨サイズ設定を上書きします。この設定は、テキスト入力欄を内容がちょうど収まるように縮小し、テキストが入力されるにつれて大きくなるように設定する簡単な方法を提供します。コンテンツを含む要素のサイズによって定義されるか、 CSS によって設定されます）最大サイズの制限に達すると展開されなくなり、この点ではすべてのコンテンツを表示するにはスクロールが要求されます。

具体的には、 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> 要素は、以下の追加を除いて、単一の行テキストコントロールと同じように動作することは注目に値します。
  • もし <textarea> 要素が幅の制約のために大きくできない場合、新しい行のコンテンツを表示するために高さを大きくし始めます。高さの制約に達すると、すべてのコンテンツが表示されるようにスクロールバーを表示し始めます。
  • rows と cols 属性は <textarea> の既定の推奨サイズを変更します。その結果、 rows/cols は field-sizing: content を設定した <textarea> 要素には効果がありません。
• <select> コントロールです。これらは、 field-sizing: content を設定した場合の動作とは少し異なります。効果の種類は作成する <select> コントロールの種類によって異なります。
  • 通常のドロップダウンボックスは、新しい値が選択されると、常に表示される選択肢の値に合わせて幅が変更されます。（既定では、ドロップダウンのサイズは、最長の選択肢の値を表示するのに十分な大きさに設定されています。）
  • リストボックス（<select> 要素に multiple または size 属性を指定したもの）はスクロールしなくてもすべての選択肢を表示できる大きさになります。（既定では、ドロップダウンボックスはすべての選択肢の値を表示するためにスクロールを要求されます。）
  • size 属性は <select> 要素に field-sizing: content が設定することによる影響はとても小さくなります。このような場合、ブラウザーは size が 1 に等しいかどうかを調べて、 <select> コントロールがドロップダウンとして現れるか、リストボックスとして現れるかを判断します。しかし、 size が選択肢の数よりも小さい場合でも、常にリストボックスのすべての選択肢を表示されます。

field-sizing: content によってあるフォームコントロールに指定された柔軟なサイズ設定は、他にも CSS のサイズ設定を使用することができます。 field-sizing: content を使用する場合は、 width と height に固定したサイズに設定することは避けてください。しかし、 min-width や max-width のようなプロパティを field-sizing: content の横に並んだ状態で使用すると、入力されたテキストに合わせてコントロールを大きくしたり小さくしたりすることができ、コントロールが大きくなりすぎたり小さくなりすぎたりするのを防ぐことができるため、非常に有益な効果があります。

maxlength 属性があると、コントロールが最大文字制限に達したとき、サイズの増加が停止します。

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> に初歩的なスタイル設定を施し、フィールドの隣にきれいに配置できるようにします。

body {
  box-sizing: border-box;
  padding: 20px;
}

div {
  margin-bottom: 20px;
  display: flex;
}

input,
textarea {
  field-sizing: content;
  min-width: 50px;
  max-width: 350px;
}

label {
  width: 150px;
  margin-right: 20px;
  text-align: right;
}

結果

下記のフィールドにテキストを入力したり除去したりして、 field-sizing: content と横に並んだプロパティの効果を調べてみてください。

この例は、 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>

CSS

CSS では、 field-sizing: content は最初の <select> 要素にのみ設定します。

body {
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  font-family: sans-serif;
}

h2 {
  margin-top: 0;
  font-size: 1rem;
  text-align: center;
  flex: 1 0 100%;
}

div {
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-flow: row wrap;
}

select {
  valign: top;
}

.field-sizing select {
  field-sizing: content;
}

結果

field-sizing: content の次の効果に注意してください。

• ドロップダウンメニューは常に表示されている選択肢のサイズに合わせ、異なる選択肢が選択されるとサイズが変更されます。 field-sizing: content を指定しない場合、サイズは選択肢の幅と同じに修正されます。
• 複数選択リストボックスは、すべての選択肢を一度に表示します。 field-sizing: content がないと、ユーザーはすべての選択肢を表示するためにボックスをスクロールしなければなりません。

• <input>
• <select>
• <textarea>