CSS表示モジュールレベル4

1. はじめに

このセクションは規範的です。

CSSは、ツリー状に構造化されたソース文書を入力して、要素（他の要素やテキストノードを含む場合がある）と、テキストノード（テキストを含む）を構成します。そして、画面や紙や音声ストリームなど、キャンバス上に描画します。このようなソース文書はCSSで描画できますが、最も一般的に使われるのはDOM型です。[DOM]（これら複雑なツリーの一部には、DOMのコメントノードのように追加のノード型を持つものもあります。 CSSの目的においては、こうした追加ノード型はすべて無視され、存在しないものとして扱います。）

このために、中間構造としてボックスツリーを生成します。ボックスツリーはレンダリングされた文書のフォーマット構造を表現します。ボックスツリー内の各ボックスは、対応する要素（または疑似要素）をキャンバス上の空間・時間で表します。ボックスツリー内の各テキストシーケンスも、対応するテキストノードの内容を表現します。

ボックスツリーを作成するために、 CSSはまずカスケードと継承を使って、各CSSプロパティの算出値をソースツリー内の各要素およびテキストノードに割り当てます。（[CSS-CASCADE-3]を参照。）

次に、各要素について、 CSSはその要素のdisplayプロパティで指定された通りに 0個以上のボックスを生成します。通常、要素は1つのボックス（主ボックス）を生成し、それ自身を表し、その内容をボックスツリーに含みます。しかし、一部のdisplay値（例：display: list-item）は複数のボックス（例：主ブロックボックスと子マーカーボックス）を生成します。また、noneやcontentsなどの値は、要素やその子孫がまったくボックスを生成しないようにします。ボックスはしばしばそのdisplay型で呼ばれます。例えば、boxがdisplay: blockで生成された場合、「ブロックボックス」または単に「ブロック」と呼ばれます。

ボックスは、特に明記されていない限り、生成元の要素と同じスタイルが割り当てられます。一般的に、継承プロパティは主ボックスに割り当てられ、その後ボックスツリーを通じて同じ要素が生成した他のボックスへ継承されます。非継承プロパティは主ボックスに適用されるのが基本ですが、要素が複数のボックスを生成する場合は、別のボックスに適用されることもあります。例えば、borderプロパティは table要素ではテーブルグリッドボックスに適用され、主テーブルラッパーボックスには適用されません。値の算出過程でボックスのスタイルが変化し、要素のスタイルが要求された場合（たとえば getComputedStyle() で）、各プロパティごとに、そのプロパティが適用されたボックスから値が反映されます。

同様に、隣接するテキストノードの連続したシーケンスは、そのテキスト内容を含むテキストシーケンスを生成し、生成元のテキストノードと同じスタイルが割り当てられます。ただし、そのシーケンスにテキストが含まれない場合は、テキストシーケンスを生成しません。

ボックスツリーの構築では、要素によって生成されたボックスは、祖先要素の主ボックスの子孫となります。一般的には、要素の親ボックスは、最も近い祖先要素でボックスを生成するものの主ボックスです。ただし、run-inボックスや複数のコンテナボックスを生成する表示型（テーブルなど）、途中に匿名ボックスが挟まる場合など例外があります。

anonymous box は、いかなる要素にも関連付けられていないボックスです。Anonymous boxは、特定の場合にbox treeで必要な入れ子構造がelement treeから生成されるボックスによって提供されない時に、 box treeを修正するために生成されます。例えば、table cell boxは、特定の親ボックス型（table row box）を必要とし、その親がtable row boxでない場合、自身の周囲にanonymousなtable row boxを生成します。（[CSS2] § 17.2.1 を参照）要素生成ボックスは、スタイルが厳密にelement treeを通じて継承されるのに対し、 anonymous box（これはbox treeのみに存在します）は、継承が親box treeを通じて行われます。

レイアウト中、ボックスやテキストシーケンスは複数の断片に分割されることがあります。例えば、インラインボックスやテキストシーケンスが行をまたいで分割された場合や、ブロックボックスがページやカラムをまたいで分割される（断片化と呼ばれる処理）場合です。また、双方向テキストの並び替え（双方向並び替えアルゴリズムの適用を参照）や、上位のdisplay型ボックスの分割（例：block-in-inline分割や column-spanner-in-block分割）でも起こり得ます。したがって、ボックスは1つ以上のボックス断片で構成され、テキストシーケンスも1つ以上のテキスト断片から成ります。 [CSS-BREAK-3]に断片化の詳細があります。

注: 多くのCSS仕様はこの用語法が確立される前に書かれていたり、誤って参照していたりするため、これらの用語が使われている古い仕様は注意して読む必要があります。文脈から本当に意味する用語を推定できるはずです。もし誤りを発見したら、報告してください。修正されます。

注: 「音声」ボックスツリーやdisplayプロパティとの関係については CSS Speech Moduleを参照してください。[CSS-SPEECH-1]

テスト

1.1. モジュール間の関係

このモジュールは、displayプロパティの定義を [CSS2] 9.2.4節の内容で置き換え・拡張します。

このモジュールのプロパティは::first-lineや::first-letter疑似要素には適用されません。

テスト

1.2. 値の定義

本仕様は、CSSプロパティ定義の慣例（[CSS2]）および値定義構文（[CSS-VALUES-3]）に従います。本仕様で定義されていない値型は、CSS Values & Units [CSS-VALUES-3]で定義されます。他のCSSモジュールと組み合わせることで、これらの値型の定義が拡張される場合があります。

各プロパティ定義で挙げられている値に加えて、この仕様で定義されるすべてのプロパティは CSS全域キーワードも値として受け付けます。可読性のため、明示的に繰り返していません。

2. ボックスレイアウトモード：displayプロパティ

名前:	display
値:	[ <display-outside> \|\| <display-inside> ] \| <display-listitem> \| <display-internal> \| <display-box> \| <display-legacy>
初期値:	inline
適用対象:	すべての要素
継承:	no
パーセンテージ:	該当なし
算出値:	内側・外側display型を表すキーワードのペア、およびオプションのlist-itemフラグ、または<display-internal>または<display-box>キーワード；計算規則は仕様本文参照
標準順序:	文法通り
アニメーション型:	§ 2.9 displayのアニメーションと補間参照

ユーザーエージェントは非視覚メディアを含むすべてのメディアでこのプロパティをサポートすることが期待されています。 displayプロパティは要素のdisplay型を定義し、要素がどのようにボックスを生成するかの2つの基本的な性質から成ります：

内側display型。これは（置換要素でない場合）生成する整形コンテキストの種類を定め、子孫ボックスのレイアウト方法を決定します。（置換要素の内側displayはCSSの範囲外です。）
外側display型。これは主ボックス自体がフローレイアウトにどのように参加するかを決定します。

テキストシーケンスには display型はありません。

一部のdisplay値には追加の副作用があります。例えばlist-itemは::marker疑似要素も生成し、 noneは要素のサブツリー全体をボックスツリーから除外します。

displayプロパティは要素のセマンティクスには影響しません。セマンティクスは文書言語で定義されており、CSSによって影響されません。 none値（これも要素とその子孫の音声出力やインタラクティビティに影響します、 [CSS-SPEECH-1]参照）を除き、 displayプロパティは視覚的なレイアウトにのみ影響します。このプロパティの目的は、デザイナーが基本文書セマンティクスに影響を与えずにレイアウト動作を変更できるようにすることです。

値は次のように定義されます：

<display-outside>  = block | inline | run-in
<display-inside>   = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = table-row-group | table-header-group |
           table-footer-group | table-row | table-cell |
           table-column-group | table-column | table-caption |
           ruby-base | ruby-text | ruby-base-container |
           ruby-text-container
<display-box>      = contents | none
<display-legacy>   = inline-block | inline-table | inline-flex | inline-grid

次の参考表はdisplayの値をまとめたものです：

短縮display	完全display	生成されるボックス
none	—	ボックスツリーからサブツリーを省略
contents	—	ボックスツリーで要素が内容に置き換えられる
block	block flow	ブロックレベルブロックコンテナ別名ブロックボックス
flow-root	block flow-root	ブロックレベルブロックコンテナで新しいブロック整形コンテキスト（BFC）を確立
inline	inline flow	インラインボックス
inline-block	inline flow-root	インラインレベルブロックコンテナ別名インラインブロック
run-in	run-in flow	ランインボックス（インラインボックスで特別なボックスツリー変換ルールあり）
list-item	block flow list-item	ブロックボックス＋マーカーボックス
inline list-item	inline flow list-item	インラインボックス＋マーカーボックス
flex	block flex	ブロックレベルフレックスコンテナ
inline-flex	inline flex	インラインレベルフレックスコンテナ
grid	block grid	ブロックレベルグリッドコンテナ
inline-grid	inline grid	インラインレベルグリッドコンテナ
ruby	inline ruby	インラインレベルルビーコンテナ
block ruby	block ruby	ブロックボックス＋ルビーコンテナ
table	block table	ブロックレベルテーブルラッパーボックス＋テーブルグリッドボックス
inline-table	inline table	インラインレベルテーブルラッパーボックス＋テーブルグリッドボックス
<display-internal>型	—	レイアウト固有の内部ボックス

注: 「最も後方互換かつ最短」を優先する規則に従い、等価なdisplay値のシリアライズでは「短縮display」欄が使われます。[CSSOM]

テスト

2.1. フローレイアウトの外側表示ロール：block、inline、およびrun-inキーワード

<display-outside>キーワードは要素の外側display型（本質的には主ボックスがフローレイアウトで担う役割）を指定します。各キーワードの定義は以下の通りです：

block: 要素はフローレイアウトに配置された際、ブロックレベルボックスを生成します。[CSS2]
inline: 要素はフローレイアウトに配置された際、インラインレベルボックスを生成します。[CSS2]
run-in: 要素はrun-inボックスを生成します。これはインラインレベルボックスの一種で、後続のブロックコンテナに統合しようとする特別な挙動があります。詳細は§ 6 ランインレイアウトを参照してください。

注: 外側display型は置換要素にも影響します。

<display-outside>値が指定され、<display-inside>が省略された場合、要素の内側display型はデフォルトでflowになります。

テスト

display-change-iframe.html （ライブテスト）（ソース）
display-change-object-iframe.html （ライブテスト）（ソース）
after-content-display-004.xht (visual test) （ソース）
anonymous-box-generation-002.xht (visual test) （ソース）
background-applies-to-011.xht (visual test) （ソース）
background-attachment-applies-to-011.xht (visual test) （ソース）
background-color-applies-to-011.xht (visual test) （ソース）
background-image-applies-to-011.xht (visual test) （ソース）
background-position-applies-to-011.xht (visual test) （ソース）
background-repeat-applies-to-011.xht (visual test) （ソース）
before-content-display-004.xht (visual test) （ソース）
border-applies-to-011.xht (visual test) （ソース）
border-bottom-applies-to-011.xht (visual test) （ソース）
border-bottom-color-applies-to-011.xht (visual test) （ソース）
border-bottom-style-applies-to-011.xht (visual test) （ソース）
border-bottom-width-applies-to-011.xht (visual test) （ソース）
border-collapse-applies-to-004.xht (visual test) （ソース）
border-color-applies-to-011.xht (visual test) （ソース）
border-left-applies-to-011.xht (visual test) （ソース）
border-left-color-applies-to-011.xht (visual test) （ソース）
border-left-style-applies-to-011.xht (visual test) （ソース）
border-left-width-applies-to-011.xht (visual test) （ソース）
border-right-applies-to-011.xht (visual test) （ソース）
border-right-color-applies-to-011.xht (visual test) （ソース）
border-right-style-applies-to-011.xht (visual test) （ソース）
border-right-width-applies-to-011.xht (visual test) （ソース）
border-spacing-applies-to-004.xht (visual test) （ソース）
border-style-applies-to-011.xht (visual test) （ソース）
border-top-applies-to-011.xht (visual test) （ソース）
border-top-color-applies-to-011.xht (visual test) （ソース）
border-top-style-applies-to-011.xht (visual test) （ソース）
border-top-width-applies-to-011.xht (visual test) （ソース）
border-width-applies-to-011.xht (visual test) （ソース）
bottom-applies-to-011.xht (visual test) （ソース）
caption-side-applies-to-004.xht (visual test) （ソース）
clear-applies-to-011.xht (visual test) （ソース）
clear-runin-001.xht (visual test) （ソース）
color-applies-to-011.xht (visual test) （ソース）
counter-increment-applies-to-011.xht （ライブテスト）（ソース）
counter-reset-applies-to-011.xht （ライブテスト）（ソース）
cursor-applies-to-011.xht (manual test) （ソース）
direction-applies-to-011.xht (visual test) （ソース）
display-004.xht (visual test) （ソース）
empty-cells-applies-to-004.xht (visual test) （ソース）
first-line-pseudo-009.xht (visual test) （ソース）
float-applies-to-011.xht (visual test) （ソース）
font-applies-to-004.xht (visual test) （ソース）
font-family-applies-to-004.xht (visual test) （ソース）
font-size-applies-to-004.xht (visual test) （ソース）
font-style-applies-to-004.xht （ライブテスト）（ソース）
font-variant-applies-to-004.xht （ライブテスト）（ソース）
font-weight-applies-to-004.xht （ライブテスト）（ソース）
height-applies-to-011.xht （ライブテスト）（ソース）
left-applies-to-011.xht (visual test) （ソース）
letter-spacing-applies-to-004.xht （ライブテスト）（ソース）
line-height-applies-to-011.xht (visual test) （ソース）
list-style-applies-to-011.xht （ライブテスト）（ソース）
list-style-image-applies-to-011.xht (visual test) （ソース）
list-style-position-applies-to-011.xht (visual test) （ソース）
list-style-type-applies-to-011.xht （ライブテスト）（ソース）
margin-applies-to-011.xht (visual test) （ソース）
margin-bottom-applies-to-011.xht (visual test) （ソース）
margin-left-applies-to-011.xht (visual test) （ソース）
margin-right-applies-to-011.xht (visual test) （ソース）
margin-top-applies-to-011.xht (visual test) （ソース）
max-height-applies-to-011.xht （ライブテスト）（ソース）
max-width-applies-to-011.xht （ライブテスト）（ソース）
min-height-applies-to-011.xht （ライブテスト）（ソース）
min-width-applies-to-011.xht （ライブテスト）（ソース）
outline-applies-to-011.xht (visual test) （ソース）
outline-color-applies-to-011.xht (visual test) （ソース）
outline-style-applies-to-011.xht (visual test) （ソース）
outline-width-applies-to-011.xht (visual test) （ソース）
overflow-applies-to-011.xht (visual test) （ソース）
padding-applies-to-011.xht (visual test) （ソース）
padding-bottom-applies-to-011.xht (visual test) （ソース）
padding-left-applies-to-011.xht (visual test) （ソース）
padding-right-applies-to-011.xht (visual test) （ソース）
padding-top-applies-to-011.xht (visual test) （ソース）
position-applies-to-011.xht (visual test) （ソース）
quotes-applies-to-011.xht （ライブテスト）（ソース）
right-applies-to-011.xht (visual test) （ソース）
run-in-001.xht (visual test) （ソース）
run-in-002.xht (visual test) （ソース）
run-in-003.xht (visual test) （ソース）
run-in-004.xht (visual test) （ソース）
run-in-005.xht (visual test) （ソース）
run-in-006.xht (visual test) （ソース）
run-in-007.xht (visual test) （ソース）
run-in-008.xht (visual test) （ソース）
run-in-009.xht (visual test) （ソース）
run-in-010.xht (visual test) （ソース）
run-in-011.xht (visual test) （ソース）
run-in-012.xht (visual test) （ソース）
run-in-013.xht (visual test) （ソース）
run-in-abspos-between-001.xht （ライブテスト）（ソース）
run-in-abspos-between-002.xht （ライブテスト）（ソース）
run-in-abspos-between-003.xht （ライブテスト）（ソース）
run-in-basic-001.xht （ライブテスト）（ソース）
run-in-basic-002.xht （ライブテスト）（ソース）
run-in-basic-003.xht （ライブテスト）（ソース）
run-in-basic-004.xht （ライブテスト）（ソース）
run-in-basic-005.xht （ライブテスト）（ソース）
run-in-basic-006.xht （ライブテスト）（ソース）
run-in-basic-007.xht （ライブテスト）（ソース）
run-in-basic-008.xht （ライブテスト）（ソース）
run-in-basic-009.xht （ライブテスト）（ソース）
run-in-basic-010.xht （ライブテスト）（ソース）
run-in-basic-011.xht （ライブテスト）（ソース）
run-in-basic-012.xht （ライブテスト）（ソース）
run-in-basic-013.xht （ライブテスト）（ソース）
run-in-basic-014.xht （ライブテスト）（ソース）
run-in-basic-015.xht （ライブテスト）（ソース）
run-in-basic-016.xht （ライブテスト）（ソース）
run-in-basic-017.xht （ライブテスト）（ソース）
run-in-basic-018.xht （ライブテスト）（ソース）
run-in-block-between-001.xht （ライブテスト）（ソース）
run-in-block-between-002.xht （ライブテスト）（ソース）
run-in-block-between-003.xht （ライブテスト）（ソース）
run-in-breaking-001.xht （ライブテスト）（ソース）
run-in-breaking-002.xht （ライブテスト）（ソース）
run-in-clear-001.xht （ライブテスト）（ソース）
run-in-clear-002.xht （ライブテスト）（ソース）
run-in-contains-abspos-001.xht （ライブテスト）（ソース）
run-in-contains-block-001.xht （ライブテスト）（ソース）
run-in-contains-block-002.xht （ライブテスト）（ソース）
run-in-contains-block-003.xht （ライブテスト）（ソース）
run-in-contains-block-004.xht （ライブテスト）（ソース）
run-in-contains-block-005.xht （ライブテスト）（ソース）
run-in-contains-block-inside-inline-001.xht （ライブテスト）（ソース）
run-in-contains-block-inside-inline-002.xht （ライブテスト）（ソース）
run-in-contains-block-inside-inline-003.xht （ライブテスト）（ソース）
run-in-contains-float-001.xht （ライブテスト）（ソース）
run-in-contains-inline-001.xht （ライブテスト）（ソース）
run-in-contains-inline-002.xht （ライブテスト）（ソース）
run-in-contains-inline-003.xht （ライブテスト）（ソース）
run-in-contains-inline-004.xht （ライブテスト）（ソース）
run-in-contains-inline-005.xht （ライブテスト）（ソース）
run-in-contains-inline-006.xht （ライブテスト）（ソース）
run-in-contains-inline-007.xht （ライブテスト）（ソース）
run-in-contains-inline-block-001.xht （ライブテスト）（ソース）
run-in-contains-inline-table-001.xht （ライブテスト）（ソース）
run-in-contains-relpos-block-001.xht （ライブテスト）（ソース）
run-in-contains-relpos-block-002.xht （ライブテスト）（ソース）
run-in-contains-relpos-block-003.xht （ライブテスト）（ソース）
run-in-contains-run-in-001.xht （ライブテスト）（ソース）
run-in-contains-run-in-002.xht （ライブテスト）（ソース）
run-in-contains-run-in-003.xht （ライブテスト）（ソース）
run-in-contains-table-001.xht （ライブテスト）（ソース）
run-in-contains-table-002.xht （ライブテスト）（ソース）
run-in-contains-table-003.xht （ライブテスト）（ソース）
run-in-contains-table-caption-001.xht （ライブテスト）（ソース）
run-in-contains-table-cell-001.xht （ライブテスト）（ソース）
run-in-contains-table-column-001.xht （ライブテスト）（ソース）
run-in-contains-table-column-group-001.xht （ライブテスト）（ソース）
run-in-contains-table-inside-inline-001.xht （ライブテスト）（ソース）
run-in-contains-table-inside-inline-002.xht （ライブテスト）（ソース）
run-in-contains-table-inside-inline-003.xht （ライブテスト）（ソース）
run-in-contains-table-row-001.xht （ライブテスト）（ソース）
run-in-contains-table-row-group-001.xht （ライブテスト）（ソース）
run-in-display-none-between-001.xht （ライブテスト）（ソース）
run-in-display-none-between-002.xht （ライブテスト）（ソース）
run-in-display-none-between-003.xht （ライブテスト）（ソース）
run-in-fixedpos-between-001.xht （ライブテスト）（ソース）
run-in-fixedpos-between-002.xht （ライブテスト）（ソース）
run-in-fixedpos-between-003.xht （ライブテスト）（ソース）
run-in-float-between-001.xht （ライブテスト）（ソース）
run-in-float-between-002.xht （ライブテスト）（ソース）
run-in-float-between-003.xht （ライブテスト）（ソース）
run-in-inherit-001.xht （ライブテスト）（ソース）
run-in-inheritance-001.xht (visual test) （ソース）
run-in-inline-between-001.xht （ライブテスト）（ソース）
run-in-inline-between-002.xht （ライブテスト）（ソース）
run-in-inline-between-003.xht （ライブテスト）（ソース）
run-in-inline-block-between-001.xht （ライブテスト）（ソース）
run-in-inline-block-between-002.xht （ライブテスト）（ソース）
run-in-inline-block-between-003.xht （ライブテスト）（ソース）
run-in-inline-table-between-001.xht （ライブテスト）（ソース）
run-in-inline-table-between-002.xht （ライブテスト）（ソース）
run-in-inline-table-between-003.xht （ライブテスト）（ソース）
run-in-linebox-001.xht (visual test) （ソース）
run-in-linebox-002.xht (visual test) （ソース）
run-in-listitem-between-001.xht （ライブテスト）（ソース）
run-in-listitem-between-002.xht （ライブテスト）（ソース）
run-in-listitem-between-003.xht （ライブテスト）（ソース）
run-in-relpos-between-001.xht （ライブテスト）（ソース）
run-in-relpos-between-002.xht （ライブテスト）（ソース）
run-in-relpos-between-003.xht （ライブテスト）（ソース）
run-in-replaced-001.xht （ライブテスト）（ソース）
run-in-restyle-001.xht （ライブテスト）（ソース）
run-in-restyle-002.xht （ライブテスト）（ソース）
run-in-restyle-003.xht （ライブテスト）（ソース）
run-in-run-in-between-001.xht （ライブテスト）（ソース）
run-in-run-in-between-002.xht （ライブテスト）（ソース）
run-in-run-in-between-003.xht （ライブテスト）（ソース）
run-in-run-in-between-004.xht （ライブテスト）（ソース）
run-in-run-in-between-005.xht （ライブテスト）（ソース）
run-in-run-in-between-006.xht （ライブテスト）（ソース）
run-in-run-in-between-007.xht （ライブテスト）（ソース）
run-in-run-in-between-008.xht （ライブテスト）（ソース）
run-in-table-between-001.xht （ライブテスト）（ソース）
run-in-table-between-002.xht （ライブテスト）（ソース）
run-in-table-between-003.xht （ライブテスト）（ソース）
run-in-table-cell-between-001.xht （ライブテスト）（ソース）
run-in-table-cell-between-002.xht （ライブテスト）（ソース）
run-in-table-cell-between-003.xht （ライブテスト）（ソース）
run-in-table-row-between-001.xht （ライブテスト）（ソース）
run-in-table-row-between-002.xht （ライブテスト）（ソース）
run-in-table-row-between-003.xht （ライブテスト）（ソース）
run-in-text-between-001.xht （ライブテスト）（ソース）
run-in-text-between-002.xht （ライブテスト）（ソース）
run-in-text-between-003.xht （ライブテスト）（ソース）
run-in-text-between-004.xht （ライブテスト）（ソース）
run-in-text-between-005.xht （ライブテスト）（ソース）
table-anonymous-block-001.xht (visual test) （ソース）
table-layout-applies-to-004.xht (visual test) （ソース）
text-align-applies-to-004.xht (visual test) （ソース）
text-decoration-applies-to-004.xht （ライブテスト）（ソース）
text-indent-applies-to-004.xht (visual test) （ソース）
text-transform-applies-to-004.xht （ライブテスト）（ソース）
top-applies-to-011.xht (visual test) （ソース）
unicode-bidi-applies-to-011.xht (visual test) （ソース）
vertical-align-applies-to-011.xht (visual test) （ソース）
visibility-applies-to-011.xht (visual test) （ソース）
white-space-applies-to-004.xht (visual test) （ソース）
width-applies-to-011.xht （ライブテスト）（ソース）
word-spacing-applies-to-004.xht (visual test) （ソース）
z-index-applies-to-011.xht (visual test) （ソース）

2.2. 内部表示レイアウトモデル：flow、flow-root、table、flex、grid、およびrubyキーワード

<display-inside>キーワードは要素の内側display型を指定し、これは（置換要素でない場合）内容のレイアウトに使われる整形コンテキストの型を定義します。各キーワードの定義は以下の通りです：

flow

要素はフローレイアウト（ブロック＆インラインレイアウト）を用いて内容をレイアウトします。

その外側display型がinlineまたはrun-inであり、かつブロックまたはインライン整形コンテキストに参加している場合は、インラインボックスを生成します。

それ以外の場合はブロックコンテナボックスを生成します。

他のプロパティ（例えば position、float、または overflow など）の値や、要素自身がブロックまたはインライン整形コンテキストに参加しているかどうかに応じて、要素は内容のための新しいブロック整形コンテキストを確立するか、内容を親の整形コンテキストへ統合します。詳細は CSS2.1 第9章を参照。[CSS2] 新しいブロックコンテナを確立する要素は、ブロック整形コンテキストを持つと見なされ、使用される内側display型は flow-root となります。

flow-root

要素はブロックコンテナボックスを生成し、内容をフローレイアウトでレイアウトします。常に内容のための新しいブロック整形コンテキストを確立します。[CSS2]

table

要素は主となるテーブルラッパーボックスを生成し、ブロック整形コンテキストを確立します。さらにテーブルグリッドボックスを生成し、ここでテーブル整形コンテキストを確立します。[CSS2]

flex

要素は主となるフレックスコンテナボックスを生成し、フレックス整形コンテキストを確立します。[CSS-FLEXBOX-1]

grid

要素は主となるグリッドコンテナボックスを生成し、グリッド整形コンテキストを確立します。[CSS-GRID-1]

（subgridを使うグリッドは新たなグリッド整形コンテキストを生成しない場合があります。詳細は[CSS-GRID-2]参照。）

ruby

要素はルビーコンテナボックスを生成し、ルビー整形コンテキストを確立するとともに、基本レベルの内容を親整形コンテキスト（インラインの場合）に統合するか、または非インラインの場合には適切な外側display型のラッパーボックスを生成します。[CSS-RUBY-1]

<display-inside>値が指定されていて<display-outside>が省略された場合、要素の外側display型はblockがデフォルトです（ただしrubyはinlineがデフォルト）。

テスト

2.3. マーカーボックスの生成：list-item キーワード

list-item キーワードは、要素に ::marker 擬似要素を生成させ、その内容は list-style プロパティにより指定されます（CSS 2.1§12.5 リスト） [CSS2]。さらに、自身の内容に対して指定された型の主ボックスも生成します。

もし inner display type の値が未指定の場合、主ボックスの inner display type は flow がデフォルトとなります。また、outer display type の値が未指定の場合、主ボックスのouter display typeはblockがデフォルトです。

注: 本レベルでは、文法上の制約により、 list-item はフローレイアウト表示型（block/inline/run-in と flow/flow-root 内側型）に限定されています。この制限は将来のモジュールレベルで緩和される可能性があります。

テスト

2.4. レイアウト内部表示型：table-およびruby-キーワード

tableやrubyなどの一部レイアウトモデルは、子孫が担う複数の異なる役割を持つ複雑な内部構造を持っています。本節では、そのレイアウトモード内でのみ意味を持つ“レイアウト内部”display値を定義します。

特に記載がない限り、これらdisplay値を使う要素の内側display型および外側display型は指定されたキーワードと同じになります。

displayプロパティが置換要素でレイアウト内部値になった場合は、使用値がinlineとして扱われます。ホワイトスペースの折りたたみや匿名ボックス生成はそのinline値に基づいて行われ、レイアウト内部display値が適用されたことはなかったかのように扱われます。

著者は置換要素にレイアウト内部display値を割り当てるべきではありません。

<display-internal>キーワードの定義：

table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column: 要素は内部テーブル要素です。内部テーブルボックスを生成し、テーブル整形コンテキストに参加します。詳細はCSS2§17.2 [CSS2]。
table-cellボックスはflow-rootの内側display型を持ちます。
table-caption: 要素はテーブルキャプションボックスを生成します。これはブロックボックスで、テーブルやテーブルラッパーボックスに対して特別な挙動を持ちます。詳細はCSS2§17.2 [CSS2]。
table-captionボックスはflow-rootの内側display型を持ちます。

ruby-base, ruby-text, ruby-base-container, ruby-text-container: 要素は内部ルビー要素です。内部ルビーボックスを生成し、ルビー整形コンテキストに参加します。[CSS-RUBY-1]
ruby-base および ruby-textは flow の内側display型を持ちます。

レイアウト特有のdisplay型を持つボックスは、不適切な親のもとに配置された場合、それぞれの仕様で定義された通り、匿名ラッパーボックスを自身の周囲に生成します。

例：Table Layoutではtable-cellボックスの親は table-rowボックスでなければなりません。

例えば以下のように誤った親を持つ場合：

<div style="display:block;">
  <div style="display:table-cell">...</div>
</div>

自身の周囲にラッパーボックスが生成され、次のような構造になります：

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

たとえ親が別の内部テーブル要素でも、 正しい要素でなければラッパーボックスが生成されます。例えば次のマークアップの場合：

<div style="display:table;">
  <div style="display:table-row">
    <div style="display:table-cell">...</div>
  </div>
</div>

匿名ラッパーボックスの生成結果：

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

この「修正」により、テーブルレイアウトは予測可能な構造を前提に動作できます。

テスト

このセクションにはテストがありません。

2.5. ボックス生成：none および contentsキーワード

displayは要素が生成するボックスの種類を制御できるだけでなく、要素がボックスを生成するかどうか自体も制御できます。

<display-box>キーワードの定義：

contents

要素自身はボックスを生成しませんが、子要素や疑似要素は通常通りボックスやテキストシーケンスを生成します。ボックス生成とレイアウトの観点では、要素は要素ツリー内で、その内容（ソース文書の子および ::beforeや::afterなどの疑似要素を含む）で置換されたものとして扱われます（疑似要素は通常通り子要素の前後に生成）。

注: 影響を受けるのはボックスツリーのみであり、ドキュメントツリーに基づくセマンティクス（セレクタのマッチングやイベント処理、プロパティの継承など）には影響しません。ただし、現時点では主要ブラウザで正しく実装されていません。このためWebで本機能を使う場合は注意が必要で、アクセシビリティツールが要素のセマンティクスにアクセスできなくなる可能性があります。

この値は、置換要素やCSSで完全に描画が制御されない要素ではdisplay: noneに算出されます。詳細は付録B「display: contentsが非通常要素に与える影響」参照。

注: 置換要素やフォームコントロールは特別扱いされます。要素自身の生成ボックスのみを除去することはほぼ未定義の動作であるためです。今後ユースケースやより精密なレンダリングモデルが発展すれば挙動が修正される可能性があるため、著者はこうした要素にはdisplay: noneを使い、display: contentsの使用は控えてください。

none

要素およびその子孫はボックスやテキストシーケンスを生成しません。

同様に、テキストノードがdisplay: noneとして振る舞う場合も、テキストシーケンスを生成しません。

これらの値が指定された要素には、内側や外側display型はありません（そもそも一切ボックスを生成しないため）。

注: これらの値でボックスが生成されなくなるため、匿名ボックス生成規則は該当要素を完全に無視し、ボックスツリーに存在しないかのように扱います。

ただし、マークアップベースの関連付けはこれらの値の影響を受けません。これは表示時のみの効果です。例えば、どのテーブルセルがカラム内に表示されるかには影響しますが、どのセルが特定のカラム要素と関連付けられるかには影響しません。また、どのHTML summary 要素が特定のテーブルに関連付けられるかや、 legend が特定の fieldset の内容のラベルとみなされるかどうかにも影響しません。

テスト

2.6. 事前合成インラインレベル表示値

CSSレベル2ではdisplayに単一キーワード構文が使われており、同じレイアウトモードのブロックレベルとインラインレベルのバリアントごとに個別のキーワードが必要でした。これらの<display-legacy>キーワードの対応は以下の通りです：

inline-block: inline flow-rootに算出されます。
inline-table: inline tableに算出されます。
inline-flex: inline flexに算出されます。
inline-grid: inline gridに算出されます。

注: これらのキーワードとその等価な値は算出値としては同じですが、指定値は区別されます。

注: getComputedStyle() のシリアライズ規則では、等価な2つのキーワードのペアではなく、必ずこれらの事前合成キーワードが出力されます。これは最短かつ後方互換性重視のシリアライズ原則によるものです。

テスト

このセクションにはテストがありません。

2.7. ボックスタイプの自動変換

一部のレイアウト効果では、ボックスタイプのブロック化（blockification）やインライン化（inlinification）が必要です。これはボックスの算出された外側表示型を、それぞれblockまたはinlineに設定します。（これは、全くボックスを生成しないdisplay型、たとえばnoneやcontentsなどには影響しません。）さらに：

block box（block flow）がインライン化される場合、その内部表示型はflow-rootに設定され、ブロックコンテナのままとなります。
inline box（inline flow）がインライン化される場合、そのin-flowな子要素すべてを再帰的にインライン化し、インライン整形コンテキスト内にブロックレベルの子孫が割り込まないようにします。
レガシー対応のため、 inline block box （inline flow-root）がブロック化されると、 blockボックスになります（flow-rootの性質は失われます）。一貫性のため、 run-in flow-rootボックスもブロック化されてblockボックスになります。
layout-internalボックスがブロック化されると、その内部表示型はflowに変換され、ブロックコンテナになります。インライン化はlayout-internalボックスには影響しません。（ただし、そのようなインラインコンテキストに配置されると、通常は適切な型の匿名インラインレベルボックスでラップされることになります。）

注: ボックスがその文脈に合わない場合の修正方法は2つあります。 1つは、ここで述べる算出値としてのdisplayの変換（ブロック化やインライン化）です。もう1つは、ボックストリー構築中（算出値確定後）に行われる中間的な匿名ボックスの生成であり、これはテーブルやルビ、フローレイアウトなどで発生します。

算出値修正の例をいくつか挙げます：

絶対配置やfloat指定すると、要素のdisplay型がブロック化されます。[CSS2]
ルビコンテナ内にあると、ここで述べる通りdisplay型がインライン化されます。[CSS-RUBY-1]
親がgridもしくはflex display 値だと、要素のdisplay型がブロック化されます。[CSS-GRID-1] [CSS-FLEXBOX-1]

2.8. ルート要素のプリンシパルボックス

ルート要素のdisplay型は常にブロック化されており、そのプリンシパルボックスは常に独立整形コンテキストを確立します。このボックスの包含ブロックは初期包含ブロックです。

さらに、displayがcontentsの場合、ルート要素上ではblockに算出されます。

2.9. displayのアニメーションと補間

一般に、 displayプロパティのアニメーション型は離散です。ただし、visibilityの補間（Web Animations §  Animation of visibility参照）と同様に、 noneと他のdisplay値間の補間時は、p値が0～1の間なら非none値になります。さらに、要素のdisplay値がトランジションやアニメーションのcascade originsを無視した場合に noneになる間は、その要素はinertになります。

3. 表示順序: orderプロパティ

名前:	order
値:	<integer>
初期値:	0
適用対象:	フレックスアイテムおよびグリッドアイテム
継承:	no
パーセンテージ:	n/a
算出値:	指定された整数
正規順序:	文法に従う
アニメーション型:	算出値型による

テスト

flexible-order.html （ライブテスト）（ソース）

ボックスは通常、ソース文書で現れる順序通りに表示・配置されます。一部の整形コンテキストでは、 orderプロパティを使ってボックスの順序を入れ替えることができ、要素の論理順序と2次元ビジュアルキャンバス上での空間配置を意図的にずらすことができます。（§ 3.1 並べ替えとアクセシビリティも参照。）

具体的には、 orderプロパティは、フレックスアイテムやグリッドアイテムがそのコンテナ内で現れる順序を制御します。これは、アイテムを序数グループに割り当てることで行われます。単一の<integer>値を取り、そのアイテムが属する序数グループを指定します。

ここでは、タイトル・写真・説明を持つカタログ商品カードの例です。各エントリー内では、ソース文書上の内容は論理的に順序付けられており、まずタイトル、その後に説明と写真が続きます。これにより、音声レンダリングや非CSSブラウザでも理にかなった順序が得られます。ただし、より魅力的なビジュアル表示のために、orderを使って、コンテンツ後方の画像をカードの先頭に持ってきています。

article.sale-item {
  display: flex;
  flex-flow: column;
}
article.sale-item > img {
  order: -1; /* Shift image before other content (in layout order) */
  align-self: center;
}

<article class="sale-item">
  <h1>Computer Starter Kit</h1>
  <p>This is the best computer money can buy, if you don’t have much money.
  <ul>
    <li>Computer
    <li>Monitor
    <li>Keyboard
    <li>Mouse
  </ul>
  <img src="images/computer.jpg"
    alt="You get: a white desktop computer with matching peripherals."
    width="250" height="188">
</article>

You get: a white desktop computer with matching keyboard and monitor. — 上記コードの一例レンダリング。

フレックスやグリッドコンテナは、 order修正後の文書順で内容をレイアウトし、最も小さい序数グループから順に配置します。同じ序数グループのアイテムはソース文書の順序で配置されます。これは描画順にも影響し[CSS2]、ちょうどフレックス/グリッドアイテムがソース文書で順序を入れ替えたかのように扱われます。フレックス/グリッドコンテナの絶対配置の子は、order: 0として扱われ、フレックス/グリッドアイテムとの描画順を決めます。

将来の仕様で別途規定されない限り、このプロパティはフレックスアイテムやグリッドアイテム以外のボックスには影響しません。

3.1. 並べ替えとアクセシビリティ

orderプロパティは非ビジュアルメディア（音声など）での順序には影響しません。また、orderは順次ナビゲーションモード（リンクの巡回など、例：tabindex [HTML]）のデフォルト巡回順にも影響しません。

著者はorderを内容の論理的な並べ替えではなく、空間的な並べ替えのみに使用しなければなりません。 orderで論理順序を変更するスタイルシートは非適合です。

注: これは、非ビジュアルメディアや非CSS UAが通常線形的に内容を提示するため、論理ソース順に依存できるようにしつつも、 orderでレイアウト順を調整できるようにするためです。（視覚的認知は2次元的・非線形的なので、望ましいレイアウト順が論理順と一致しないことも多いです。）

すべての表示モードで著者意図の順序を保つため、オーサリングツール（WYSIWYGエディタやWebベースの支援ツールも含む）は、下層の文書ソースを並べ替えるべきであり、著者が空間順序をソース順と非同期にすることを明示的に示した場合を除き、並べ替えにorderを使うべきではありません。

例えばツールが、flexアイテムのドラッグ＆ドロップ並べ替えや、画面サイズごとのレイアウト切り替えのためのメディアクエリ対応を提供する場合。

ほとんどの場合、並べ替えはすべての画面サイズやナビゲーション・音声順にも影響すべきなので、ツールはDOMレイヤーでドラッグ＆ドロップ並べ替えを行います。ただし、著者が画面サイズごとに異なるレイアウトを希望する場合、ツールはorderとメディアクエリを組み合わせてこの機能を提供できます。ただし、最小画面サイズでの順序は下層DOM順と合わせ（これが論理的な線形表示順になることが多いため）、他サイズではorderでビジュアル順序を定義できます。

このようなツールは適合ですが、常にorderだけでドラッグ＆ドロップ並べ替えを実装しているツールは（たとえ実装が簡便でも）非適合です。

注: ブラウザ・支援技術・拡張機能を含むユーザーエージェントは空間ナビゲーション機能を持つ場合があります。この節は、そのような空間ナビゲーションで要素順序を決める際にorderプロパティを考慮することを妨げるものではありません。実際、そのような機能には考慮が必要です。ただし、orderはそのような空間ナビゲーション機能で考慮すべき唯一（あるいは主要）なCSSプロパティではなく、空間関係を変更するすべてのレイアウト機能を考慮する必要があります。

4. 読み順序：reading-flow プロパティ

reading flow container とは、reading-flow の値が normal 以外の有効な値で設定された、ブロック・フレックス・グリッドコンテナです。

rendering-defined sibling reading flow とは、reading flow container 内の子を順序付けしたリストです。すべての子要素は要素として描画され、この reading flow container 内では兄弟とみなされます。順序は reading-flow プロパティによって決まります。

このプロパティはテーブルにも適用すべきか？ [Issue #9922]

名前:	reading-flow
値:	normal \| source-order \| flex-visual \| flex-flow \| grid-rows \| grid-columns \| grid-order
初期値:	normal
適用対象:	ブロック、フレックス、グリッドコンテナ
継承:	no
パーセンテージ:	n/a
算出値:	記述通り
正規順序:	文法に従う
アニメーション型:	アニメーション不可

reading-flow プロパティは、要素が音声にレンダリングされたり、（線形）順次ナビゲーション時の移動順を制御します。

指定できる値はキーワード1つです。各値の意味は以下の通りです：

normal: DOM内の要素順序に従います。
source-order: グリッド・フレックス・ブロックレイアウトに適用されます。reading flow container を作成し、直下の子に reading-order プロパティが利用可能になります。reading-order を除き、DOM順序に従います。
flex-visual: フレックスコンテナにのみ有効です。writing-mode を考慮し、フレックスアイテムの可視的な読み順を辿ります。たとえば、英語文書で flex-direction: row-reverse と reading-flow: flex-visual を指定した場合、左から右への順番になります。
flex-flow: フレックスコンテナにのみ有効です。flex-flow の方向に従います。
grid-rows: グリッドコンテナにのみ有効です。writing-mode を考慮し、グリッドアイテムの行ごとの可視的な順序を辿ります。
grid-columns: グリッドコンテナにのみ有効です。writing-mode を考慮し、グリッドアイテムの列ごとの可視的な順序を辿ります。
grid-order: グリッドコンテナにのみ有効です。order-modified document order に従います。つまり、normal と同じですが、order プロパティでアイテムの順序が変更されている場合はその順を使います。

この例では、3つのフレックスアイテムが行方向に、 reading-flow: flex-visual と flex-direction: row-reverse で表示されています。英語（テキスト方向: 左から右）の場合、読み順は「Item 3」→「Item 2」→「Item 1」となります。

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
</div>

.wrapper {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

この例では、4つのグリッドアイテムがグリッドに配置され、DOM順と異なる視覚順で表示されます。 reading-flow の値は grid-rows です。文書は英語です。読み順は「Item 4」「Item 2」「Item 3」「Item 1」です。

<div class="wrapper">
  <a class="a" href="#">Item 1</a>
  <a class="b" href="#">Item 2</a>
  <a class="c" href="#">Item 3</a>
  <a class="d" href="#">Item 4</a>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
             "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

reading-flow プロパティは、レイアウトやペイント順には影響せず、視覚的な canvas へのレンダリングには作用しません。

flex-* や grid-* キーワードを使う場合、order プロパティの値も考慮されます。

この例では、3つのフレックスアイテムが reading-flow: flex-flow で行方向に表示されます。DOMの3番目のアイテムは order=-1 です。読み順は「Item 3」「Item 1」「Item 2」となります。

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
</div>

.wrapper a:nth-child(3) {
  order: -1;
}

.wrapper {
  display: flex;
  reading-flow: flex-flow;
}

4.1. 読み順の上書き: reading-order プロパティ

名前:	reading-order
値:	<integer>
初期値:	0
適用対象:	reading flow container の直下のブロックレベル・グリッドアイテム・フレックスアイテムの子
継承:	no
パーセンテージ:	n/a
算出値:	指定された整数
正規順序:	文法に従う
アニメーション型:	算出値型による

reading-order プロパティは、アイテムが読み順で訪問される位置を変更でき、親の reading-flow での並びよりも優先します。値は 1つの <integer> で、そのアイテムが属する順位グループを指定します。兄弟要素は、数値が小さい順から訪問されます。

2つのアイテムの reading order が同じ場合、reading-flow の値によって並び順が決定されます。

この例では 6つのグリッドアイテムがあり、grid-auto-flow が dense のため、表示順がDOM順と異なります。classが top のアイテムの reading-order は -1。このため Item 4 が最初に読み順に入ります。残りのアイテムは reading-flow の grid-rows に従った並びとなります。

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a class="top" href="#">Item 4</a>
  <a href="#">Item 5</a>
  <a href="#">Item 6</a>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-auto-flow: dense;
  reading-flow: grid-rows;
}

.top { reading-order: -1; }

この例では、block containerにブロックレベルの直下の子が5つあり、reading-flow の値は source-order です。3番目のアイテムの reading-order は -1 。この場合、3番目のアイテムが先に読み順で訪問され、残りはソース順に続きます。

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
  <a href="#">Item 5</a>
</div>

.wrapper { reading-flow: source-order; }

.wrapper > a { display: block; }

.wrapper a:nth-child(3){ reading-order: -1; }

ソース文書では、要素の論理順序を表現するべきです。reading-flow や reading-order プロパティは、レイアウト変更（たとえば media queries など）に応じて複数の読み順が必要な場合のために存在します。その場合でも、最も基本的・一般的な読み順はソース順にして、CSSがなくても意味が通じるようにしてください。

設計上の考慮点と背景

reading-flow の設計で考慮された主な点は以下です:

ボックスのレイアウト順とは別に、読み順やナビゲーション順を独立させる明確なユースケースがあり、その最も基本的な理由は、読み順やナビゲーション順が視覚的知覚の順と一致しない場合に、一致させる必要があるためです。（視覚的知覚は非線形であり、要素のサイズや色コントラスト、余白といった要素の空間座標だけでなく見た目全体から影響されます。）
Web プラットフォームアーキテクチャの核心原則として、可能な限り多様なデバイスや将来的なデバイスでコンテンツが利用可能となるよう、CSSに依存しない形で意味を持つ文書であるべきです。したがって、ソース順序は視覚表現と無関係に要素の論理順を表す必要があります。
ページの一部に明確な順序がない場合、文書はいくつもの視覚レイアウトで表現可能であり、どれも同じ意味を持たせつつ、アクセシビリティ性も高くするべきです。
線形ナビゲーション、フォーカス順、スクリーンリーダーの順番は常に一致すべきです。これらを組み合わせて使うユーザーがいるためです。
ページの各コンポーネントや階層レベルごとに再配置の要件が異なるため、CSSの並び替え制御は乱用されないように（box-sizing のような一律利用ではなく、論理・物理プロパティのような用途を意識した使い分けができるようにすべきです）。

テスト

DOMに便利な並べ替え機能が必要です。JSを普段書かない著者でも必要なとき簡単にソース順並べ替えができるようにしないと、order や reading-flow の誤用が発生します。[Issue #7387]

5. 不可視性：visibility プロパティ

名前:	visibility
値:	visible \| hidden \| force-hidden \| collapse
初期値:	visible
適用対象:	全要素
継承:	yes
パーセンテージ:	N/A
算出値:	指定通り
正規順序:	文法に従う
アニメーション型:	離散的
Media:	visual

visibility プロパティは、ボックスが描画されるかどうかを指定します。不可視ボックスもレイアウトに影響します。（ボックス生成を完全に抑制したい場合は display プロパティに none を設定してください。）各値の意味は以下の通りです：

visible: 生成されたボックスは通常通り可視となります。
hidden: この要素によって生成されたボックスは不可視となります。ただし、子孫要素が visibility: visible の場合、それらは可視になります。
force-hidden: この要素およびその子孫によって生成されたすべてのボックスが不可視となります（それらの visibility の値に関わらず）。
collapse: ボックスがcollapsedであることを示します。これは整形コンテキスト固有の方法で、本来よりも少ない空間しか取らない場合があります。テーブルの動的な行・列効果 [CSS2]、flexレイアウトの折りたたみflex項目 [CSS-FLEXBOX-1]も参照。それ以外のケースでは（別途指定がない限り）単に不可視となり、hiddenと同様の挙動になります。

注: 現状、多くのユーザーエージェントや支援技術では、セマンティックな関係性を持つ不可視要素と可視要素を適切に扱えていません。例えば、特別な役割（table rowなど）を持つ親要素を不可視にし、特別な役割（table cellなど）の子要素を可視にした場合、それらのツール利用者にとって想定外の問題が発生する可能性があります。著者は、ツールの改善まではこのような状況を作り出すのを避けるべきです。

不可視ボックスは表示されません（完全に透明のように振る舞います）、操作できません（pointer-events: none のように振る舞います）、ナビゲーションからも除外されます（display: none類似）、音声へのレンダリングも行われません（ただし speak が always [CSS-SPEECH-1] の場合のみ例外）。ただし display: contents の場合同様、コンテナとしてのセマンティックな役割は保持され、 visible な子孫が正しく解釈されるよう保証されます。

注: speak が always のとき、本来不可視のボックスも音声へレンダリングされ、非視覚／空間的な方法で操作できる場合があります。

一時的に何かを隠すとき display: none で十分な場合がありますが、これでは要素がレイアウトから完全に除去されるため、要素を隠したり表示した際に意図しない動きやページのレイアウト再構成が発生することがあります。ページのレイアウトを安定させつつ非表示・再表示するには visibility: hidden を活用できます。

例えば、クリックで隠されていたテキストが表示される「ネタバレ」要素の（あえて単純化した）実装例です：

<p>The symbolism earlier in the movie becomes obvious at the end,
  when it's revealed that <spoiler-text><span>Luke is his own father</span></spoiler-text>,
  making the wizard's cryptic riddles meaningful.
<style>
spoiler-text { border-bottom: 1px solid; }
spoiler-text > span { visibility: hidden; }
spoiler-text.shown > span { visibility: visible; }
</style>
<script>
[...document.querySelectorAll("spoiler-text")].forEach(el=>{
  el.addEventListener("click", e=>el.classList.toggle("shown"));
});
</script>

この例は意図的に大幅に単純化されています。実際に設計されたspoiler要素には、アクセシビリティやUX面で必要な機能が不足しています。 visibilityの使い方を分かりやすく示すためですので、このコードを実サイトに流用しないでください。

テスト

このセクションにはテストがありません。

6. ランインレイアウト

run-in boxは、後ろに続くブロックに結合されるボックスであり、そのブロックのインラインレベルの内容の先頭に挿入されます。これは、コンパクトな見出しや定義など、適切なDOM構造としては見出しが本文の前にあるべきですが、表示としてはテキストと一緒にインラインで見出しをレイアウトしたい場合に便利です。

例えば、辞書の定義は、単語が定義とインラインで並ぶようにフォーマットされることが多いです:

<dl class='dict'>
  <dt>dictionary
  <dd>a book that lists the words of a language in alphabetical
    order and gives their meaning, or that gives the equivalent
    words in a different language.
  <dt>glossary
  <dd>an alphabetical list of terms or words found in or relating
    to a specific subject, text, or dialect, with explanations; a
    brief dictionary.
</dl>
<style>
.dict > dt {
  display: run-in;
}
.dict > dt::after {
  content: ": "
}
</style>

これは次のようにフォーマットされます:

dictionary: a book that lists the words of a language
in alphabetical order and explains their meaning.

glossary: an alphabetical list of terms or words found
in or relating to a specific subject, text, or dialect,
with explanations; a brief dictionary.

run-in boxは他のインラインレベルボックスと全く同じように振る舞いますが、以下の点が異なります:

run-in boxがflowの内部表示型である場合、その内容をインライン化します。
run-in sequenceの直後に新しいブロック整形コンテキストを確立しないブロックボックスが続く場合、それはそのブロックボックスの直接の子として挿入されます: ::marker疑似要素のボックス（あれば）の後、しかしそのブロックの内容から生成された他のボックス（::before疑似要素によるボックスも含む、あれば）の前です。この再親化は可能な限り再帰的に行われます（つまりrun-inは実質的に、その整形コンテキスト内で最も深い後続の「段落」の一部となり、隣接するrun-inを集めていきます）。
再親化された内容は、その場所に元々親があったかのようにフォーマットされます。注意：レイアウトのみに影響し、継承には影響しません。非匿名ボックスのプロパティ継承は要素ツリーのみに基づくためです。
それ以外の場合（run-in sequenceの後にこのようなブロックが続かない場合）、匿名ブロックボックスがrun-in sequenceと直後のインラインレベル内容すべてを囲むように生成されます（ただし次のrun-in sequenceがあればそれまで）。

run-in sequenceは、連続した兄弟run-in boxおよびその間の空白やアウトオブフローボックスの最大連続列です。

注: この記述は、run-in boxの間にあるアウトオブフローボックスも再親化されることを示唆しています。別の選択肢としては、間のアウトオブフローボックスをそのまま残す、またはアウトオブフローボックスが前のrun-inの結合を妨げる、といったものも考えられます。実装者や著者は好みの挙動があればCSSWGに連絡してください。現状の挙動はある程度ランダムに選ばれたものです。

この修正はCSS2§9.2で説明される匿名ブロックおよびインラインボックスの修正より前に発生し、最初の整形行の決定に影響し、 run-in sequenceが最終的なボックスツリー上の位置に元々存在していたかのように扱います。

注: 最も早いrun-inが、その包含ブロックの最初の整形行の最初のテキストを表すため、そのブロック要素に::first-letter疑似要素を適用すると、run-inの最初の文字が選択され、ブロック自身の内容の最初の文字は選択されません。

注: このrun-inモデルは、[CSS2]の以前の提案とは若干異なります。

テスト

display-change-iframe.html （ライブテスト）（ソース）
display-change-object-iframe.html （ライブテスト）（ソース）
after-content-display-004.xht (visual test) （ソース）
anonymous-box-generation-002.xht (visual test) （ソース）
background-applies-to-011.xht (visual test) （ソース）
background-attachment-applies-to-011.xht (visual test) （ソース）
background-color-applies-to-011.xht (visual test) （ソース）
background-image-applies-to-011.xht (visual test) （ソース）
background-position-applies-to-011.xht (visual test) （ソース）
background-repeat-applies-to-011.xht (visual test) （ソース）
before-content-display-004.xht (visual test) （ソース）
border-applies-to-011.xht (visual test) （ソース）
border-bottom-applies-to-011.xht (visual test) （ソース）
border-bottom-color-applies-to-011.xht (visual test) （ソース）
border-bottom-style-applies-to-011.xht (visual test) （ソース）
border-bottom-width-applies-to-011.xht (visual test) （ソース）
border-collapse-applies-to-004.xht (visual test) （ソース）
border-color-applies-to-011.xht (visual test) （ソース）
border-left-applies-to-011.xht (visual test) （ソース）
border-left-color-applies-to-011.xht (visual test) （ソース）
border-left-style-applies-to-011.xht (visual test) （ソース）
border-left-width-applies-to-011.xht (visual test) （ソース）
border-right-applies-to-011.xht (visual test) （ソース）
border-right-color-applies-to-011.xht (visual test) （ソース）
border-right-style-applies-to-011.xht (visual test) （ソース）
border-right-width-applies-to-011.xht (visual test) （ソース）
border-spacing-applies-to-004.xht (visual test) （ソース）
border-style-applies-to-011.xht (visual test) （ソース）
border-top-applies-to-011.xht (visual test) （ソース）
border-top-color-applies-to-011.xht (visual test) （ソース）
border-top-style-applies-to-011.xht (visual test) （ソース）
border-top-width-applies-to-011.xht (visual test) （ソース）
border-width-applies-to-011.xht (visual test) （ソース）
bottom-applies-to-011.xht (visual test) （ソース）
caption-side-applies-to-004.xht (visual test) （ソース）
clear-applies-to-011.xht (visual test) （ソース）
clear-runin-001.xht (visual test) （ソース）
color-applies-to-011.xht (visual test) （ソース）
counter-increment-applies-to-011.xht （ライブテスト）（ソース）
counter-reset-applies-to-011.xht （ライブテスト）（ソース）
cursor-applies-to-011.xht (manual test) （ソース）
direction-applies-to-011.xht (visual test) （ソース）
display-004.xht (visual test) （ソース）
empty-cells-applies-to-004.xht (visual test) （ソース）
first-line-pseudo-009.xht (visual test) （ソース）
float-applies-to-011.xht (visual test) （ソース）
font-applies-to-004.xht (visual test) （ソース）
font-family-applies-to-004.xht (visual test) （ソース）
font-size-applies-to-004.xht (visual test) （ソース）
font-style-applies-to-004.xht （ライブテスト）（ソース）
font-variant-applies-to-004.xht （ライブテスト）（ソース）
font-weight-applies-to-004.xht （ライブテスト）（ソース）
height-applies-to-011.xht （ライブテスト）（ソース）
left-applies-to-011.xht (visual test) （ソース）
letter-spacing-applies-to-004.xht （ライブテスト）（ソース）
line-height-applies-to-011.xht (visual test) （ソース）
list-style-applies-to-011.xht （ライブテスト）（ソース）
list-style-image-applies-to-011.xht (visual test) （ソース）
list-style-position-applies-to-011.xht (visual test) （ソース）
list-style-type-applies-to-011.xht （ライブテスト）（ソース）
margin-applies-to-011.xht (visual test) （ソース）
margin-bottom-applies-to-011.xht (visual test) （ソース）
margin-left-applies-to-011.xht (visual test) （ソース）
margin-right-applies-to-011.xht (visual test) （ソース）
margin-top-applies-to-011.xht (visual test) （ソース）
max-height-applies-to-011.xht （ライブテスト）（ソース）
max-width-applies-to-011.xht （ライブテスト）（ソース）
min-height-applies-to-011.xht （ライブテスト）（ソース）
min-width-applies-to-011.xht （ライブテスト）（ソース）
outline-applies-to-011.xht (visual test) （ソース）
outline-color-applies-to-011.xht (visual test) （ソース）
outline-style-applies-to-011.xht (visual test) （ソース）
outline-width-applies-to-011.xht (visual test) （ソース）
overflow-applies-to-011.xht (visual test) （ソース）
padding-applies-to-011.xht (visual test) （ソース）
padding-bottom-applies-to-011.xht (visual test) （ソース）
padding-left-applies-to-011.xht (visual test) （ソース）
padding-right-applies-to-011.xht (visual test) （ソース）
padding-top-applies-to-011.xht (visual test) （ソース）
position-applies-to-011.xht (visual test) （ソース）
quotes-applies-to-011.xht （ライブテスト）（ソース）
right-applies-to-011.xht (visual test) （ソース）
run-in-001.xht (visual test) （ソース）
run-in-002.xht (visual test) （ソース）
run-in-003.xht (visual test) （ソース）
run-in-004.xht (visual test) （ソース）
run-in-005.xht (visual test) （ソース）
run-in-006.xht (visual test) （ソース）
run-in-007.xht (visual test) （ソース）
run-in-008.xht (visual test) （ソース）
run-in-009.xht (visual test) （ソース）
run-in-010.xht (visual test) （ソース）
run-in-011.xht (visual test) （ソース）
run-in-012.xht (visual test) （ソース）
run-in-013.xht (visual test) （ソース）
run-in-abspos-between-001.xht （ライブテスト）（ソース）
run-in-abspos-between-002.xht （ライブテスト）（ソース）
run-in-abspos-between-003.xht （ライブテスト）（ソース）
run-in-basic-001.xht （ライブテスト）（ソース）
run-in-basic-002.xht （ライブテスト）（ソース）
run-in-basic-003.xht （ライブテスト）（ソース）
run-in-basic-004.xht （ライブテスト）（ソース）
run-in-basic-005.xht （ライブテスト）（ソース）
run-in-basic-006.xht （ライブテスト）（ソース）
run-in-basic-007.xht （ライブテスト）（ソース）
run-in-basic-008.xht （ライブテスト）（ソース）
run-in-basic-009.xht （ライブテスト）（ソース）
run-in-basic-010.xht （ライブテスト）（ソース）
run-in-basic-011.xht （ライブテスト）（ソース）
run-in-basic-012.xht （ライブテスト）（ソース）
run-in-basic-013.xht （ライブテスト）（ソース）
run-in-basic-014.xht （ライブテスト）（ソース）
run-in-basic-015.xht （ライブテスト）（ソース）
run-in-basic-016.xht （ライブテスト）（ソース）
run-in-basic-017.xht （ライブテスト）（ソース）
run-in-basic-018.xht （ライブテスト）（ソース）
run-in-block-between-001.xht （ライブテスト）（ソース）
run-in-block-between-002.xht （ライブテスト）（ソース）
run-in-block-between-003.xht （ライブテスト）（ソース）
run-in-breaking-001.xht （ライブテスト）（ソース）
run-in-breaking-002.xht （ライブテスト）（ソース）
run-in-clear-001.xht （ライブテスト）（ソース）
run-in-clear-002.xht （ライブテスト）（ソース）
run-in-contains-abspos-001.xht （ライブテスト）（ソース）
run-in-contains-block-001.xht （ライブテスト）（ソース）
run-in-contains-block-002.xht （ライブテスト）（ソース）
run-in-contains-block-003.xht （ライブテスト）（ソース）
run-in-contains-block-004.xht （ライブテスト）（ソース）
run-in-contains-block-005.xht （ライブテスト）（ソース）
run-in-contains-block-inside-inline-001.xht （ライブテスト）（ソース）
run-in-contains-block-inside-inline-002.xht （ライブテスト）（ソース）
run-in-contains-block-inside-inline-003.xht （ライブテスト）（ソース）
run-in-contains-float-001.xht （ライブテスト）（ソース）
run-in-contains-inline-001.xht （ライブテスト）（ソース）
run-in-contains-inline-002.xht （ライブテスト）（ソース）
run-in-contains-inline-003.xht （ライブテスト）（ソース）
run-in-contains-inline-004.xht （ライブテスト）（ソース）
run-in-contains-inline-005.xht （ライブテスト）（ソース）
run-in-contains-inline-006.xht （ライブテスト）（ソース）
run-in-contains-inline-007.xht （ライブテスト）（ソース）
run-in-contains-inline-block-001.xht （ライブテスト）（ソース）
run-in-contains-inline-table-001.xht （ライブテスト）（ソース）
run-in-contains-relpos-block-001.xht （ライブテスト）（ソース）
run-in-contains-relpos-block-002.xht （ライブテスト）（ソース）
run-in-contains-relpos-block-003.xht （ライブテスト）（ソース）
run-in-contains-run-in-001.xht （ライブテスト）（ソース）
run-in-contains-run-in-002.xht （ライブテスト）（ソース）
run-in-contains-run-in-003.xht （ライブテスト）（ソース）
run-in-contains-table-001.xht （ライブテスト）（ソース）
run-in-contains-table-002.xht （ライブテスト）（ソース）
run-in-contains-table-003.xht （ライブテスト）（ソース）
run-in-contains-table-caption-001.xht （ライブテスト）（ソース）
run-in-contains-table-cell-001.xht （ライブテスト）（ソース）
run-in-contains-table-column-001.xht （ライブテスト）（ソース）
run-in-contains-table-column-group-001.xht （ライブテスト）（ソース）
run-in-contains-table-inside-inline-001.xht （ライブテスト）（ソース）
run-in-contains-table-inside-inline-002.xht （ライブテスト）（ソース）
run-in-contains-table-inside-inline-003.xht （ライブテスト）（ソース）
run-in-contains-table-row-001.xht （ライブテスト）（ソース）
run-in-contains-table-row-group-001.xht （ライブテスト）（ソース）
run-in-display-none-between-001.xht （ライブテスト）（ソース）
run-in-display-none-between-002.xht （ライブテスト）（ソース）
run-in-display-none-between-003.xht （ライブテスト）（ソース）
run-in-fixedpos-between-001.xht （ライブテスト）（ソース）
run-in-fixedpos-between-002.xht （ライブテスト）（ソース）
run-in-fixedpos-between-003.xht （ライブテスト）（ソース）
run-in-float-between-001.xht （ライブテスト）（ソース）
run-in-float-between-002.xht （ライブテスト）（ソース）
run-in-float-between-003.xht （ライブテスト）（ソース）
run-in-inherit-001.xht （ライブテスト）（ソース）
run-in-inheritance-001.xht (visual test) （ソース）
run-in-inline-between-001.xht （ライブテスト）（ソース）
run-in-inline-between-002.xht （ライブテスト）（ソース）
run-in-inline-between-003.xht （ライブテスト）（ソース）
run-in-inline-block-between-001.xht （ライブテスト）（ソース）
run-in-inline-block-between-002.xht （ライブテスト）（ソース）
run-in-inline-block-between-003.xht （ライブテスト）（ソース）
run-in-inline-table-between-001.xht （ライブテスト）（ソース）
run-in-inline-table-between-002.xht （ライブテスト）（ソース）
run-in-inline-table-between-003.xht （ライブテスト）（ソース）
run-in-linebox-001.xht (visual test) （ソース）
run-in-linebox-002.xht (visual test) （ソース）
run-in-listitem-between-001.xht （ライブテスト）（ソース）
run-in-listitem-between-002.xht （ライブテスト）（ソース）
run-in-listitem-between-003.xht （ライブテスト）（ソース）
run-in-relpos-between-001.xht （ライブテスト）（ソース）
run-in-relpos-between-002.xht （ライブテスト）（ソース）
run-in-relpos-between-003.xht （ライブテスト）（ソース）
run-in-replaced-001.xht （ライブテスト）（ソース）
run-in-restyle-001.xht （ライブテスト）（ソース）
run-in-restyle-002.xht （ライブテスト）（ソース）
run-in-restyle-003.xht （ライブテスト）（ソース）
run-in-run-in-between-001.xht （ライブテスト）（ソース）
run-in-run-in-between-002.xht （ライブテスト）（ソース）
run-in-run-in-between-003.xht （ライブテスト）（ソース）
run-in-run-in-between-004.xht （ライブテスト）（ソース）
run-in-run-in-between-005.xht （ライブテスト）（ソース）
run-in-run-in-between-006.xht （ライブテスト）（ソース）
run-in-run-in-between-007.xht （ライブテスト）（ソース）
run-in-run-in-between-008.xht （ライブテスト）（ソース）
run-in-table-between-001.xht （ライブテスト）（ソース）
run-in-table-between-002.xht （ライブテスト）（ソース）
run-in-table-between-003.xht （ライブテスト）（ソース）
run-in-table-cell-between-001.xht （ライブテスト）（ソース）
run-in-table-cell-between-002.xht （ライブテスト）（ソース）
run-in-table-cell-between-003.xht （ライブテスト）（ソース）
run-in-table-row-between-001.xht （ライブテスト）（ソース）
run-in-table-row-between-002.xht （ライブテスト）（ソース）
run-in-table-row-between-003.xht （ライブテスト）（ソース）
run-in-text-between-001.xht （ライブテスト）（ソース）
run-in-text-between-002.xht （ライブテスト）（ソース）
run-in-text-between-003.xht （ライブテスト）（ソース）
run-in-text-between-004.xht （ライブテスト）（ソース）
run-in-text-between-005.xht （ライブテスト）（ソース）
table-anonymous-block-001.xht (visual test) （ソース）
table-layout-applies-to-004.xht (visual test) （ソース）
text-align-applies-to-004.xht (visual test) （ソース）
text-decoration-applies-to-004.xht （ライブテスト）（ソース）
text-indent-applies-to-004.xht (visual test) （ソース）
text-transform-applies-to-004.xht （ライブテスト）（ソース）
top-applies-to-011.xht (visual test) （ソース）
unicode-bidi-applies-to-011.xht (visual test) （ソース）
vertical-align-applies-to-011.xht (visual test) （ソース）
visibility-applies-to-011.xht (visual test) （ソース）
white-space-applies-to-004.xht (visual test) （ソース）
width-applies-to-011.xht （ライブテスト）（ソース）
word-spacing-applies-to-004.xht (visual test) （ソース）
z-index-applies-to-011.xht (visual test) （ソース）

付録A: 用語集

以下の用語は便宜上ここで定義します:

root element

elementのうち、文書ツリーのルートにあるもの。 DOMで生成されたdocument treeでは、これはdocument elementです。 HTMLでは html 要素です。[DOM] [HTML]

principal box

elementが1つ以上のboxを生成する場合、そのうち1つがprincipal boxであり、それが子孫ボックスや生成内容を含み、位置決め方式にも関与します。

いくつかの要素はprincipal boxに加えて追加のボックスを生成する場合があります（例えばlist-item要素は追加のマーカーボックスを生成したり、 table要素は principalなtable wrapper boxや table grid boxを追加で生成するなど）。これらの追加ボックスはprincipal boxに対して配置されます。

inline-level

インラインレイアウトに参加する内容。具体的にはインラインレベルボックスとテキストシーケンスです。

block-level

ブロックレイアウトに参加する内容。具体的にはブロックレベルボックスです。

inline box

非置換型のインラインレベルボックスで、その内部表示型がflowであるもの。インラインボックスの内容は、そのインラインボックス自身と同じインライン整形コンテキストに参加します。

inline

inline boxまたはinline-level boxの省略形として、または形容詞としてinline-levelの意味で使われます。後者の用法は非推奨です。

atomic inline

置換型（例: 画像）または新たな整形コンテキストを確立する（例: inline-blockやinline-table）インラインレベルボックスであり、行をまたいで分割できません（inline boxやruby containerは分割可能）。

内部表示型がflowでないインラインレベルボックスは、指定された内部表示型の新たな整形コンテキストを確立します。

block container

ブロックコンテナは、インライン整形コンテキストに参加するインラインレベルボックスのみ、またはブロック整形コンテキストに参加するブロックレベルボックスのみを含みます（この制約を満たすために匿名ブロックボックスが生成される場合があります。詳細はCSS2§9.2.1.1を参照）。

インラインレベル内容のみを含むブロックコンテナは、新たなインライン整形コンテキストを確立します。このとき要素は、全インライン内容をラップするroot inline boxも生成します。注: このroot inline boxの概念は、 CSS2§9.2.2.1で導入された「匿名インライン要素」概念を実質的に置き換えるものです。

ブロックコンテナは、親の整形コンテキストがブロック整形コンテキストでない場合、新たなブロック整形コンテキストを確立します。それ以外の場合、自身がブロック整形コンテキストに参加している場合は、内容のために新たなブロック整形コンテキストを確立するか、または参加中のものを継続します（他のプロパティ、例:overflowやalign-contentなどの制約によって決まります）。

注: ブロックコンテナボックスは、ブロック整形コンテキストとインライン整形コンテキストを同時に確立できる場合があります。

block box

ブロックレベルボックスであり、かつブロックコンテナでもあるもの。

注: すべてのブロックコンテナボックスがブロックレベルボックスとは限りません。例: 非置換型inline blockや非置換型テーブルセルはブロックコンテナですがブロックレベルボックスではありません。同様に、すべてのブロックレベルボックスがブロックコンテナとも限りません。例: ブロックレベル置換要素（display: block）やフレックスコンテナ（display: flex）などはブロックコンテナではありません。

block

block box、block-level box、block container boxの省略形（明確な場合）。

replaced element

その内容がCSS整形モデルの範囲外にある要素（例: 画像や埋め込み文書）。例えば、HTMLの img 要素の内容は、 src 属性で指定された画像に置き換えられることが多いです。

置換要素は多くの場合自然寸法を持ちます。例えば、ビットマップ画像は絶対単位で指定された自然なwidthとheightを持ち（そこから自然なアスペクト比が明らかに決まります）。一方、他のオブジェクトは自然寸法を持たない場合もあります（例: 空白のHTML文書）。詳細は[css-images-3]参照。

ユーザーエージェントは、replaced elementの自然寸法が第三者に機微な情報を漏洩する可能性があると考える場合、その要素が自然寸法を持たないものとして扱う場合があります。例えば、HTML文書がユーザーの残高によって自然サイズが変わる場合、 UAはそのリソースが自然寸法を持たないかのように動作するかもしれません。

置換要素の内容はCSS整形モデルには含まれませんが、その自然寸法はさまざまなレイアウト計算に使われます。置換要素は常に独立整形コンテキストを確立します。

non-replaced要素は、 replacedでない（＝描画がCSSモデルに従う）要素です。

containing block

boxに関連付けられて、そのサイズや位置決めの基準となる矩形。特に、containing blockはboxではありません（矩形です）、ただし多くの場合、boxの寸法から導かれます。各boxは自身のcontaining blockに対して位置が与えられますが、そのcontaining blockによって制限はされません。 overflowできます。 “a box’s containing block”とは「そのboxが存在するcontaining block」のことであり、そのbox自身が生成するものではありません。

一般に、エッジがboxの子孫ボックス用のcontaining blockとなります。この場合、boxがその子孫のcontaining blockを「確立する」と言います。 containing blockのプロパティが参照される場合、それはboxに設定された値を参照します。（initial containing blockの場合は特に指定がない限りroot elementから値を取ります。）

詳細は[CSS2] Section 9.1.2およびSection 10.1、CSS Positioned Layout 3 § 2.1 Containing Blocks of Positioned Boxesを参照してください。

containing block chain

containing blockが先祖—子孫関係で連なる列。例: inline boxのcontaining blockは最も近いblock container祖先の内容ボックスです。そのblock containerがインフローblockなら、そのcontaining blockは親block containerが形成します。その祖父block containerが絶対位置なら、そのcontaining blockは最も近いpositioned祖先（親でなくてもよい）のパディングエッジとなります。こうしてinitial containing blockまで連なります。

initial containing block

root elementのcontaining block。 initial containing blockは新たなブロック整形コンテキストを確立します。 CSS2.1§10.1（continuous media）や、[CSS-PAGE-3]（paged media）でその位置や寸法が規定されます。

formatting context

formatting contextは、関連するボックス群がレイアウトされる環境です。異なる整形コンテキストは、それぞれ異なるルールでボックスをレイアウトします。例: flex formatting contextはflex layoutルールでボックスを配置します[CSS-FLEXBOX-1]。一方、block formatting contextはブロック・インラインレイアウトルール[CSS2]で配置します。また、いくつかの整形コンテキストは重なり合い共存します。例: inline formatting contextはそれを確立した要素のblock formatting context内に存在し相互作用します。 ruby containerは ruby formatting contextをそのruby base containerが参加する inline formatting context上に重ねます。

ボックスは新たな独立整形コンテキストを確立するか、そのcontaining blockの整形コンテキストを継続します。場合によっては新たな（非独立の）共存整形コンテキストも確立する場合があります。特に規定がない限り、新たな整形コンテキストの確立は独立整形コンテキストを作ります。どの種類の整形コンテキストを確立するかは、そのボックスの内部表示型で決まります。例えばgrid containerは新たなgrid formatting contextを確立しますし、 ruby containerは新たなruby formatting contextを確立します。 block containerは新たなblock formatting contextや inline formatting contextを確立できます。 displayプロパティ参照。

independent formatting context

ボックスが独立整形コンテキストを確立するとき（その整形コンテキストが親と同じ型であってもなくても）、実質的に新しい独立したレイアウト環境を作ります。そのボックス自身のサイズ決定以外では、子孫のレイアウトは（一般に）外部の整形コンテキストのルールや内容の影響を受けず、逆も同様です。

例: block formatting context内では floatボックスが周囲のボックスのレイアウトに影響します。しかしその効果は自身の整形コンテキスト外には及びません。その整形コンテキストを確立したボックスがfloatを完全に含むよう拡大され、外部のfloatはその中に侵入できません。

もう1つの例: マージンは整形コンテキスト境界をまたいで折りたたまれません。

Exclusion（回り込み）は独立整形コンテキスト境界を越えて内容に影響を与えることができます。（執筆時点では唯一のそのようなレイアウト機能です）[CSS3-EXCLUSIONS]

特定のプロパティは、通常はそうならない場合でもボックスに独立整形コンテキストを確立させることができます。例: ボックスをアウトオブフローにするとブロック化に加え独立整形コンテキストを確立します。他の例として containプロパティの特定値で独立整形コンテキストを確立できます。ブロックをスクロールコンテナにすると独立整形コンテキストを確立しますが、 subgridをスクロールコンテナにしても独立整形コンテキストにはならず、親grid containerのレイアウトに参加し続けます。

block boxが独立整形コンテキストを確立すると、その内容のための新たなブロック整形コンテキストが作られます。それ以外の多くの場合、ボックスに独立整形コンテキストを確立させるのは無意味（no-op）です。すでに独立整形コンテキストを確立している場合（例: flex container）や、その種類のボックスで完全に独立した新たな整形コンテキストを確立できない場合（例: 非置換型inline box）などです。

block formatting context

inline formatting context

ブロック整形コンテキストおよびインライン整形コンテキストの定義は、CSS 2.1 Section 9.4を参照。インライン整形コンテキストはブロック整形コンテキスト内に存在します。例: インライン整形コンテキストの行ボックスはブロック整形コンテキストに属するフロートと相互作用します。

block layout

ブロックレベルボックスのレイアウトであり、ブロック整形コンテキスト内で行われます。

block formatting context root

新たなブロック整形コンテキストを確立するblock container。

BFC

block formatting contextまたはblock formatting context rootの略称。通常、内部のfloatを含み、外部のfloatを排除し、マージンの相殺を抑制するボックスを指します。したがって次のいずれかを指す場合があります:

その内容のために新たなblock formatting contextを確立するblock container
（すなわちblock-level block containerである）block boxで、その内容のためにblock formatting contextを確立するもの（そうでないblock boxと区別）
（非常に大まかに）新たなformatting context（インライン整形コンテキスト以外）を確立する任意のブロックレベルボックス

out-of-flow

in-flow

ボックスが期待される位置や周囲のコンテンツとの相互作用から抜き出され、親の整形コンテキストにおける通常のフローの外で、異なるパラダイムでレイアウトされる場合、そのボックスは out-of-flow（フロー外）です。これはボックスが（float により）浮動されるか、絶対位置（position により）となった場合に発生します。ボックスが out-of-flow でなければ、in-flow（フロー内）です。

注: 一部の整形コンテキストは浮動を抑制し、 float: leftが指定されても必ずしもout-of-flowになるとは限りません。

document order

ボックスや内容が文書内で現れる順序（レンダリングで現れる順序とは異なる場合もあります）。疑似要素の相対順序決定にはボックストリー順を用います。 CSS Pseudo-Elements 4 § 4 Tree-Abiding Pseudo-elements参照。

これらの用語のより詳細な定義は、[CSS2]の第9章を参照してください。

付録B: display: contentsが特殊な要素に与える影響

この節は（現在）参考情報です。

一部の要素はCSSボックスの概念だけで描画されるわけではありません。例えば、置換要素（ imgなど）、多くのフォームコントロール（ inputなど）、およびSVG要素です。

この付録では、これらがdisplay: contentsとどのように相互作用するかを定義します。

HTML要素

br
wbr
meter
progress
canvas
embed
object
audio
iframe
img
video
frame
frameset
input
textarea
select: display: contentsはdisplay: noneに算出されます。
legend: HTMLの規定により、 legend にdisplay: contentsを指定しても表示されたlegendにはならず、特別な表示動作はありません。（したがってdisplay: contentsに通常通り反応します。）
button
details
fieldset: これらの要素は特別な動作はありません。display: contentsは単にprincipal boxを削除し、その内容は通常通り描画されます。
その他のHTML要素: display: contentsでは通常通りに動作します。

SVG要素

CSSボックスレイアウトを持つ svg 要素（これには親がHTML要素である svg や、文書ルート要素が含まれます）: display: contentsはdisplay: noneに算出されます。
その他すべてのSVG コンテナ要素で、かつ描画要素でもあるもの
SVG テキスト内容子要素
use: display: contentsはその要素を整形ツリーから取り除き、その内容を上位に持ち上げてその場に表示します。この内容には use のshadow-DOMコンテンツも含まれます。
その他のSVG要素: display: contentsはdisplay: noneに算出されます。

ここでの意図は、要素内の「レンダリングコンテキスト」が外部のコンテキストと異なる場合に display: noneの動作が適用されるということです。もし要素の子が親要素の有効な子でない場合、そのまま整形ツリー上で持ち上げてはいけません。

例えば、SVGのテキスト内容やテキスト整形要素は text 要素のコンテキストが必要です。 textを削除すると、その子のテキスト内容や要素はもはや有効ではありません。このため、display: contentsを text に指定すると、そのtext要素全体が描画されなくなります。対照的に tspan や textPath は、親のテキスト整形コンテキスト内でも有効な内容なので、持ち上げ動作が適用されます。

同様に、持ち上げによって子が非描画要素（例: pattern や symbol 内の図形）が描画要素（例: svg直下の図形）になる場合、レンダリングコンテキストが不正に変わることになります。そのため、決して描画されないコンテナ要素はdisplay: contentsで「アンボックス」できません。

要素が整形ツリーから除去されると、その要素に指定されていたレイアウトと視覚整形を制御するSVG属性は内容の描画時に無視されます。ただし、SVGのプレゼンテーション属性（CSSプロパティに対応するもの）は値処理と継承に引き続き影響します[CSS-CASCADE-3]。そのため、こうした属性は要素の子孫に設定されたプロパティ値に影響を与え、レイアウトや見た目の整形に影響し得ます。

MathML要素

全てのMathML要素に対し、display: contentsはdisplay: noneに算出されます。

付録C: 仕様著者向けボックス構築ガイドライン

この節は仕様著者向けの参考ガイダンスです。

1つのボックスが同時にblockifyとinlinifyを同時に行うことはできません。そうなり得る場合は、どちらが優先されるか定義してください。
非principalで非匿名のボックスはblockifyできません。 blockifyは要素の算出値に影響し、そのprincipal boxの種類を決定します。
内容をblockifyするボックスは inline-level内容を直接含めません。そのような要素内で生成されたボックスやテキストシーケンスは blockifyするか、匿名のblock containerでラップしてください。
内容をinlinifyするボックスは block-levelボックスを直接含めません。そのような要素内で生成されたボックスは inline-levelでなければなりません。
本質的に独立整形コンテキストを確立できないボックス（非置換インラインなど）には独立整形コンテキストを確立させてはいけません。まずblockifyするか、あるいは独立整形コンテキストを確立できるボックスタイプに変更してください。

謝辞

長年にわたりボックス生成の様々な細部を分離しようと試みてきた多くの方々、特にBert Bos氏には感謝します。彼のdisplay-modelやdisplay-roleによる最後の試みは実現しませんでしたが、現在の仕様のきっかけとなりました。 Anton Prowse氏は CSS2.1第9章に対する絶え間ない指摘によって混乱から秩序をもたらしてくれました。 Oriol Brufau氏はこの仕様の微妙な区別や誤りを多数指摘してくれました。また、David Baron氏、Mats Palmgren氏、Ilya Streltsyn氏、Boris Zbarsky氏にもフィードバックにより感謝します。

変更点

レベル3以降の追加事項

CSS Display Module Level 3以降に追加された主な機能:

reading-flow プロパティ (Issue 8589)
reading-order プロパティ (Issue )
display プロパティのアニメーション機能
force-hidden 値が visibility に追加

プライバシーに関する考慮事項

この仕様によって新たなプライバシー上の考慮事項は生じません。

セキュリティに関する考慮事項

この仕様によって新たなセキュリティ上の考慮事項は生じません。

適合性

文書の規約

適合性要件は、記述的な断言とRFC 2119の用語の組み合わせで表現されます。規範的な部分における「MUST」、「MUST NOT」、「REQUIRED」、「SHALL」、「SHALL NOT」、「SHOULD」、「SHOULD NOT」、「RECOMMENDED」、「MAY」、「OPTIONAL」といったキーワードは、RFC 2119に記載されている通りに解釈されます。ただし、読みやすさのため、本仕様ではこれらの単語はすべて大文字で記載されていません。

本仕様の本文は、明示的に非規範と記載された節、例、および注記を除き、すべて規範的です。[RFC2119]

本仕様の例は、「例えば」などの語句で導入されるか、class="example"のクラスで規範的な本文と区別されて示されます。例:

情報提供用注記は「注」から始まり、class="note"のクラスで規範的な本文と区別されます。例:

勧告は、特別な注意を促すためにスタイル付けされた規範的な節であり、他の規範的な本文と区別されるために<strong class="advisement">で示されます。例: UAはアクセシブルな代替手段を必ず提供しなければなりません。

適合クラス

本仕様への適合性は、3つの適合クラスについて定義されます:

スタイルシートが本仕様に適合するためには、本モジュールで定義される構文を用いたすべての文が、汎用CSS文法および各機能の個別文法に従って有効でなければなりません。

レンダラーが本仕様に適合するためには、該当する仕様で定義されたスタイルシートの解釈に加え、本仕様で定義されるすべての機能を正しく構文解析し、文書を正しく描画することで対応している必要があります。ただし、デバイスの制限によりUAが文書を正しく描画できない場合でも、それだけで非適合とはなりません。（例えば、UAはモノクロモニターで色を描画する必要はありません。）

オーサリングツールが本仕様に適合するためには、汎用CSS文法および本モジュール内の各機能の個別文法に従って構文的に正しいスタイルシートを作成し、かつ本モジュールで述べられるスタイルシートの他のすべての適合要件を満たす必要があります。

部分的な実装

著者が将来互換性のある構文解析ルールを利用してフォールバック値を指定できるように、CSSレンダラーは必ず、サポートしていないat-ルール、プロパティ、プロパティ値、キーワード、その他の構文構造を無効とし（そして適切に無視）なければなりません。特に、ユーザーエージェントは決してサポートしていない値とサポートしている値を同じ複数値プロパティ宣言内で選択的に無視してはなりません。いずれかの値が無効（未サポート値は必ず無効）と見なされる場合、CSSでは宣言全体を無視する必要があります。

不安定機能・独自拡張の実装

非実験的な実装

仕様がCandidate Recommendation段階に到達すると、非実験的な実装が可能となり、実装者は仕様に従って正しく実装されていることを実証できるCRレベルの機能については、プリフィックスなしの実装をリリースするべきです。

CSSの相互運用性を実現・維持するため、CSSワーキンググループは、非実験的なCSSレンダラーに対し、プリフィックスなしの実装をリリースする前に実装レポート（および必要に応じてそのレポートに使ったテストケース）をW3Cに提出することを求めています。W3Cに提出されたテストケースはCSSワーキンググループによるレビュー・修正の対象となります。

テストケースや実装レポートの提出方法など詳細は、CSSワーキンググループのWebサイト https://www.w3.org/Style/CSS/Test/ を参照してください。質問は public-css-testsuite@w3.org メーリングリスト宛にお送りください。

CSS表示モジュール レベル4

要約

この文書の位置付け

1. はじめに

1.1. モジュール間の関係

1.2. 値の定義

2. ボックスレイアウトモード：displayプロパティ

2.1. フローレイアウトの外側表示ロール：block、inline、 およびrun-inキーワード

2.2. 内部表示レイアウトモデル：flow、flow-root、table、flex、grid、およびrubyキーワード

2.3. マーカーボックスの生成：list-item キーワード

2.4. レイアウト内部表示型：table-*およびruby-*キーワード

2.5. ボックス生成：none および contentsキーワード

2.6. 事前合成インラインレベル表示値

2.7. ボックスタイプの自動変換

2.8. ルート要素のプリンシパルボックス

2.9. displayのアニメーションと補間

3. 表示順序: orderプロパティ

Computer Starter Kit

3.1. 並べ替えとアクセシビリティ

4. 読み順序：reading-flow プロパティ

4.1. 読み順の上書き: reading-order プロパティ

5. 不可視性：visibility プロパティ

6. ランインレイアウト

付録A: 用語集

付録B: display: contentsが特殊な要素に与える影響

HTML要素

SVG要素

MathML要素

付録C: 仕様著者向けボックス構築ガイドライン

謝辞

変更点

最近の変更点

レベル3以降の追加事項

プライバシーに関する考慮事項

セキュリティに関する考慮事項

適合性

文書の規約

適合クラス

部分的な実装

不安定機能・独自拡張の実装

非実験的な実装

索引

本仕様で定義されている用語

参照によって定義されている用語

参考文献

規範的参照

参考情報

プロパティ索引

課題索引

CSS表示モジュールレベル4

2.1. フローレイアウトの外側表示ロール：block、inline、およびrun-inキーワード

2.4. レイアウト内部表示型：table-およびruby-キーワード