3.1.6 ボックスのタイプと包含ブロック

文書ツリーの各要素は、ボックスモデルに基づき、displayプロパティで指定されたタイプのボックスを生成します。XHTMLの要素の場合は、ブラウザのデフォルトスタイルシートに従って、ブロックボックス、インラインボックスなどが生成されます。一般にブロックボックスは、子孫ボックスのサイズや位置の算出基準となる包含ブロックを形成します。

書籍原稿からXHTMLを生成して公開しています。実装状況に関する注は、2005年末〜2006年初にかけて調べたもので、ブラウザのバージョンアップなどにより変化することがあります。

3.1.6.1 ブロックボックス

XHTMLのブロックレベル要素はブロックボックスを生成し、視覚的にひとまとまりの区画として整形されます†CSS21:9.2.1。また、displayプロパティで'block'、'list-item'、'table'などの値を与えられた要素もブロックレベルとなります。意味や機能のまとまりの単位となるブロックボックスは、CSSを用いた機能レイアウトの主役というべきものです。

ブロックレベル要素（display:tableであるものを除く）は主ブロックボックス（principal block box）を生成し、その直接の子としてはブロックボックスのみ、もしくはインラインボックスのみを含みます（両者を混在させない）。主ブロックボックスはブロック整形コンテクスト☞3.2.1に置かれ、通常の子孫要素の包含ブロックとなります。

ブロックレベル要素の中には、主ブロックボックスの外部に付加的なボックスを生成するものがあります（'list-item'型要素の項目マーカーボックスなど）。付加的ボックスは、主ボックスに関連づけて配置されます。

3.1.6.2 匿名ブロックボックス

XHTMLのブロックレベル要素型のいくつかは、内容にインライン（文字列あるいはインライン子要素）とブロック（ブロックレベル子要素）の両方を含むことができます。たとえば次のXHTMLのようなケースです。

[例3.11]

<div>
行内レベルのテキストと
<p>ブロックレベルの子要素が混在する</p>
</div>

上記のように、主ブロックボックスの中に直接含まれるは「ブロックボックスのみ、もしくはインラインボックスのみ」です。そこでこの例の場合ならば、“行内レベルのテキストと”の部分にも匿名のブロックボックスがあるとみなします。匿名ボックスも通常のボックスと同様に、そのプロパティは親から継承、もしくは継承しない場合は初期値を用います。

3.1.6.3 インラインボックス

XHTMLのインライン要素、およびdisplayプロパティの値が'inline'、'inline-table'などの値を持つ要素は、インラインボックスを生成し、インライン整形コンテクスト☞3.2.1に置かれて行内に展開されます†CSS21:9.2.2。ブロックレベル要素の中に、テキスト内容とインライン子要素だけが存在する場合、子要素に含まれないテキストは匿名インラインボックスとして扱われます。

（オンライン版では、このセクションの残りは省略します）

3.1.6.4 run-inボックス

（オンライン版では、このセクションは省略します）

3.1.6.5 displayプロパティ

要素が生成するボックスのタイプは、displayプロパティによって決まります†CSS21:9.2.4(*22)。

display要素の生成するボックス
block要素はブロックボックスを生成する。
inline要素はインラインボックスを生成する。
inline-block要素はブロックボックスを生成するが、そのボックスは、置換要素と同様の形でひとつのインラインボックスの中に収められる。(*23)
list-item要素は主ブロックボックスと、リスト項目マーカーボックスを生成する。
none要素はボックスを生成せず、レイアウトに全く影響を与えない。子孫要素もボックスを生成しない。これは子孫要素のdisplayプロパティに異なる値を与えて上書きすることはできない。
run-in要素はコンテクストに応じてインラインボックスもしくはブロックボックスを生成する（run-inボックスを参照）。
table-table、table-row-group、table-column、table-column-group、table-header-group、table-footer-group、table-row、table-cell、table-captionはXHTMLのtable関連要素と同様の振る舞いをする。
inline-tableインラインレベルの要素としてテーブルを生成する。

プロパティの初期値は'inline'ですが、通常XHTMLの要素は、ブラウザのデフォルトスタイルシートによって、それぞれの定義に応じたdisplayプロパティを与えられているものとして扱われます(*24)。

display:noneとした要素はボックスを全く生成しませんが、それ以外のボックスのvisibilityプロパティを'hidden'とすると、ボックスを生成した上で、そのボックスを不可視にします。この場合、ボックスの領域はレイアウト上の空白として残ります。

＊22
CSS2-98にはXHTMLのdl要素のcompact属性と同様の振る舞いをする'compact'という値が含まれていましたが、CSS2.1では削除されました。また、リストのマーカーを表す'marker'も削除されています（これはCSS3で::marker疑似要素として導入される見込みです）。
＊23
CSS2.1で新たに加えられた値で、同仕様書のHTML4サンプルスタイルでは、button、textarea、input、selectの4要素型がdisplay:inline-blockとされています。HTML4サンプルスタイルについては、本書Appendix 4を参照してください。
＊24
ブラウザのデフォルトスタイルをdisplayプロパティによって変更することは可能です。しかし、XHTMLのリストやテーブルのように、要素型のセマンティクスがボックスの表示形態と密接に結びついている場合は、displayの変更は慎重に扱うほうがよいでしょう。

3.1.6.6 包含ブロック

マージン、パディングの＜パーセント＞値がそうであったように、ボックスのサイズや位置は、多くの場合包含ブロック（containing block、以下CBLと略記します）と呼ばれる長方形を基準にして算出されます†CSS21:10.1。CBLの考え方の基本は、次のようなものです。

ただし、ボックスが絶対位置決め☞3.3によって配置されると、CBLも異なってきます。具体的な働きは次節以降で説明することにして、ここではCBLの決め方を一覧しておきましょう（次の表での「直近」とは、《条件を満たすツリー上の祖先のうち、最も近い位置にあるもの》を意味します）。

要素/位置決めの方法包含ブロック
ルート要素キャンバスの原点に固定された表示域のサイズの長方形（＝初期包含ブロック）
通常フロー直近のブロックレベル要素、インラインブロック、もしくはテーブルセルの内辺
浮動ボックス
position:relative
position:absolute直近の布置ボックス（positionがsitaticでない要素）のパディング辺。該当するボックスがなければ、初期包含ブロック
position:fixed表示域によって形成される長方形エリア

CSSでのボックスの適切なレイアウトのためには、それぞれのCBLを正しく把握することが重要です。

＊25
XHTML文書のルート要素は<html>ですが、古い世代のブラウザは、HTMLをレンダリングする場合に<body>要素をルート要素のように扱ってきました。たとえばbody要素の背景色をキャンバスに適用するかどうか、あるいはbodyの子要素のheightプロパティをパーセントで指定する時の基準値など、ブラウザによる処理の違いがここに起因していることもあります。
＊26
この初期包含ブロックの定義は、2005年6月の草案（WD200506）で示されたものです。CSS2-98では、セクション9.1.2で《ルート要素が初期包含ブロックを形成し、その幅はwidthで指定してよいが、width:autoならUAが（表示域の幅などに）決める。高さはheightで指定してよいが、height:autoなら文書のコンテンツが収まるサイズ》と定義される一方、セクション10.1で《ルート要素が属する包含ブロック（初期包含ブロックと呼ぶ）はUAによって選ばれる》となっていて、その矛盾を巡って議論が繰り返されていました。CSS2.1の2003年1月草案からは9.1.2の記述が削除され、10.1が《UAによって選ばれる（表示域と関連づけてよい）》と変更されましたが、WD200506で表示域に関連づけることが明確に示されました。初期包含ブロックと表示域とは、最初の状態では一致していますが、初期包含ブロックはキャンバスの原点に結びつけられているので、スクロールによって表示域が移動すると、両者は離れていきます。なお仕様書10.1では固定される（anchored at）という記述だけですが、Appendix Eで左上を原点に固定すると記されています。
＊27
CSSでは、ボックスなど整形構造体の要素となるものは生成（generate）され、包含ブロックのようにその枠組みとなるものは形成（establish）されると、言葉が使い分けられているので、本章でもできるだけ厳密に「生成」と「形成」を使い分けます。なお、CSS2-98の邦訳であるJIS TR X 0032:2000ではestablishは「設立」「確立」などと訳されています。