CSS3

プロパティ

width、height

→●、mdn（width、height）

横幅、縦幅。

（物理的な）［width／height］プロパティは、ボックスに選好される［横幅（width）／縦幅（height）］を指定する。選好サイズ（preferred size）は、これらの総称であり、文脈に応じて適切な方を指す。

auto

［width／height］においては、自動的サイズを指定する。これは、［ブロック サイズを指す場合には 自動的なブロック サイズ／行内サイズを指す場合には自動的な行内サイズ］とも称される。これを計算する方法は、関連する各種レイアウトモジュールを見よ。

<DIV style="border:1px solid black;
 overflow:scroll;
 resize:both;
">
 <DIV style="border:1px solid black;
  width:100%;
 ">テスト</DIV>
</DIV>

<DIV style="border:1px solid black;
 overflow:scroll;
 resize:both;
">
 <DIV style="border:1px solid red;
  width:auto;
 ">テスト</DIV>
</DIV>

<DIV style="border:1px solid black;
 overflow:scroll;
 resize:both;
">
 <DIV style="border:1px solid black;
  width:100px;
 ">テスト</DIV>
</DIV>

<length-percentage> ○

［<length>／<percentage>］を利用して、ボックスのサイズを指定する。box-sizing プロパティは、［内容ボックス、ボーダーボックス］のどちらが計量されるかを指示する。

百分率は、ボックスの包含ブロックのサイズ ─ 横幅、縦幅のうち適切な方 ─ を基準に解決される。［当該の軸において、包含ブロックのサイズがボックスのサイズに依存する］場合に［百分率を解決するための特別な規則］については、関連する各種レイアウトモジュールを見よ。

負な値は無効。

<DIV style="border:1px solid red;
  width:100px;
">テスト</DIV>

<DIV style="border:1px solid black;
 width:100px;
">
 <DIV style="border:1px solid red;
  width:50%;
 ">テスト</DIV>
</DIV>

min-content

関連する軸における最小内容サイズを利用する。これは、ボックスのブロックサイズ用には ─ 他が指定されない限り ─ ボックスの自動的サイズに等価になる。

<DIV style="border:1px solid red;
 font-size:40px;
 width:min-content;
">テスト</DIV>

<DIV style="border:1px solid red;
 overflow:scroll; resize:both;
 font-size:40px;
 width:min-content;
">テスト</DIV>

max-content

関連する軸における最大内容サイズを利用する。これは、ボックスのブロックサイズ用には ─ 他が指定されない限り ─ ボックスの自動的サイズに等価になる。

<DIV style="border:1px solid red;
 font-size:40px;
 width:max-content;
">テスト</DIV>

<DIV style="border:1px solid red;
 font-size:40px;
 width:max-content;
">テスト</DIV>

表示の都合におけるテスト

fit-content()

＝fit-content(<length-percentage>)

可用な空間を指定された引数に置換してから、内容収納サイズの公式を適用した結果 ─ すなわち、次の結果 ─ を利用する：

max( min-content, min( max-content, <length-percentage> ) )

この公式の <length-percentage> 引数は、<length-percentage> 値を単体で与えたときと正確に同じに解決される。

負な <length-percentage> 値は無効。

width:fit-content は width:fit-content(stretch) として動作する。mdn

<DIV style="border:1px solid red;
 font-size:40px;
 width:fit-content(100px);
">テスト</DIV>

¶

<DIV style="border:1px solid black; width:200px;">
 <DIV style="border:1px solid red;
  font-size:40px;
  width:fit-content(50%);
 ">テスト</DIV>
</DIV>

¶

すべての事例において、使用値は、内縁サイズが負にならない所まで切り上げられる。

注記： min-content、max-content、fit-content() 値は、Level 3 による新たな値である。

注記： これにより、flex-basis プロパティも、これら新たなキーワードをとり得ることになる ─ その値は width プロパティへの参照により定義されているので。

注記： この節は、以前は［stretch／fit-content］を［収納伸張サイズ／内容収納サイズ］を表現するキーワードとして定義していた。これらのキーワードは、可用な空間が不定な状況に、より良く働くようにするため、Level 4 に先送りされた（追加の contain キーワードとともに ─ それは、stretch と同様にふるまうが、選好縦横比があれば それを保全する）。

テスト