“CSS Display Module”

概要

“CSS Display Module”はCSSによって文書が整形される時に構築されるボックス・ツリーとその制御を行う“display”プロパティについて定義している仕様書です。

仕様書

定義されているプロパティ

display

ボックス

要素や擬似要素はそのコンテンツを内包する長方形の“ボックス(Box)”を生成します。“display”プロパティの値によって要素は複数のボックスを生成する場合やボックスを生成しない場合もあります。

要素が1個以上のボックスを生成する場合、そのうちの1個が主ボックスである“プリンシパル・ボックス(Principal Box)”です。親子関係にある要素を表すプリンシパル・ボックスは同様に親子関係になり、“親ボックス(Parent box)”や“子ボックス(Child box)”などと呼ばれます。

どの要素にも関連付けられていないボックスは“アノニマス・ボックス(Anonymous box)”と呼ばれます。アノニマス・ボックスは何らかの入れ子構造を表す必要がある場合に生成されることがあります。アノニマス・ボックスには親ボックスのスタイルが継承されます。

ボックス・ツリー

CSSで文書が整形される時、CSSは文書を要素とテキスト・ノードをDOMなどのツリー構造状に整理した文書ツリーとして読み取り、これをもとに“ボックス・ツリー(Box Tree)”を構築します。

ボックス・ツリーが構築される時、最初にカスケードと継承によってそれぞれの要素とテキスト・ノードに割り当てられるCSSのプロパティの計算値を決定します。

次に、それぞれの要素は“display”プロパティの値に従い、その要素を表し、コンテンツをボックス・ツリー内で内包するためのボックスを生成します。要素はボックス・ツリー内に複数のボックスを作り出すこともありますが、ボックスを作らないこともあります。通常ボックスはそのボックスを生成した要素に指定されたのと同じスタイルが適用されます。要素に継承されたスタイルはプリンシパル・ボックスに適用され、ボックス・ツリーを介して同じ要素によって生成された他のボックスにも適用されます。

ボックス・ツリー内で要素が生成したプリンシパル・ボックスはその要素の祖先要素のプリンシパル・ボックスの子孫ボックスとなります。多くの場合、要素のプリンシパル・ボックスの親ボックスはその要素の親要素のプリンシパル・ボックスです。しかし、ラン・イン・ボックス(“display:run-in;”)やテーブル・レイアウト(“display:table;”)の場合、アノニマス・ボックスが間に入る場合などはプリンシパル・ボックスの直接の親要素は要素の親要素のプリンシパル・ボックスではありません。

テキスト・ノードはそのコンテンツであるテキストを内包するためのテキスト・ランを生成します。連続する兄弟関係にあるテキスト・ノードは一つのテキスト・ランを形成しますが、複数の行にまたがる場合やページの区切りがある場合などにはテキスト・ランは複数の断片に分割されることがあります。

包括ブロック

“包括ブロック(Containing Block)”は関連付けられたボックスの大きさや配置位置の基準となる長方形です。特に、ルート要素(HTMLでは“html”要素)が生成する包括ブロックは“初期包括ブロック(Initial Containing Block)”と呼ばれます。

ほとんどの場合は包括ブロックを生成するボックスの外縁が包括ブロックとなり、包括ブロックの大きさはボックスの大きさと一致します。

それぞれのボックスはそのボックスを内包する包括ブロックを基準として相対的な配置位置が決められます。ボックスの大きさや配置位置はそのボックスを内包する包括ブロックに制限されることはなく、包括ブロックからはみ出すことができます。

包括ブロックのプロパティの値が参照される場合には包括ブロックを生成したボックスのプロパティの値が使用されます。

包括ブロックは他の包括ブロックを内包することで入れ子構造になります。一つの包括ブロックから初期包括ブロックまで繋がる子孫関係は“包括ブロック・チェーン(Containing Block Chain)”と呼ばれます。

整形コンテキスト

“整形コンテキスト(Formatting Context)”は互いに関連性のあるボックスが配置される環境のことで、フロー・レイアウトにおけるブロック整形コンテキストとインライン整形コンテキストやフレックス・レイアウトにおけるフレックス整形コンテキストなどがあります。異なる整形コンテキストはそれぞれ異なる規則に従ってボックスを配置します。

すべてのボックスはその中に包括ブロックの整形コンテキストを継続、もしくは新たに独立した整形コンテキストを生成します。包括ブロックの整形コンテキストを継続する場合、ボックスのコンテンツは包括ブロックの整形コンテキストに参加します。

ボックスの中に生成された包括ブロックとは異なる整形コンテキストは“独立整形コンテキスト(Independent Formatting Context)”と呼ばれます。独立整形コンテキストはボックスの大きさが外側の整形コンテキストの影響を受ける以外は外側の整形コンテキストの影響を受けず、逆にボックスの外側の整形コンテキストも独立整形コンテキストの影響を受けません。

浮動化(“float: none;”でない)や絶対位置指定(“position: absolute;”)によってフロー外に取り出されたボックスやスクロール・コンテナ(“overflow: scroll;”)などは独立整形コンテキストを生成します。

置換要素と非置換要素

文書に埋め込まれる画像やアプレット、埋め込み文書など、要素に内包するコンテンツがCSSによる整形モデルの対象外となる要素は“置換要素(Replaced Element)”と呼ばれます。例えば、“src”属性によって指定された画像ファイルに置き換えられて表示される“img”要素や“src”属性によって指定された文書に置き換えられて表示される“iframe”要素などは置換要素です。

置換要素のコンテンツはCSSによって文書が整形される時には考慮されません。ただし、置換要素は多くの場合固有の寸法(自然寸法)を持ち、その寸法はCSSによるレイアウトの際に使用されることがあります。

置換要素はその中に常に独立整形コンテキストを生成します。

置換要素ではない要素は“非置換要素(Non-replaced Element)”と呼ばれます。

ランイン・レイアウト

“ランイン・ボックス(Run-in box)”は後に続くブロック・レベルのボックスと融合して、そのブロック・レベルのボックスの最初のインライン・レベルのコンテンツとしてレイアウトされるボックスです。

ランイン・ボックスは他のインライン・レベルのボックスとほとんど同じようにレイアウトされますが、以下のような違いがあります。

• ランイン・ボックスの内部ディスプレイ・タイプが“flow”である場合、そのコンテンツはインライン化されます。

ランイン・シーケンスの直後に新たなブロック整形コンテキストを生成しないブロック・ボックスが続く場合

ランイン・シーケンスはブロック・ボックスの直接の子要素として挿入されます。ランイン・シーケンスは“::marker”擬似要素によって生成される要素の後で、それ以外のブロック・ボックスが生成するすべてのボックス(“::before”擬似要素も含む)の前に挿入されます。

ランイン・シーケンスの直後に新たなブロック整形コンテキストを生成しないブロック・ボックスが続かない場合

ブロック・レベルのアノニマス・ボックスが生成され、ランイン・シーケンスとその直後に続くインライン・レベルのコンテンツを内包します。他のランイン・シーケンスがある場合にはその直前のコンテンツまでがそのアノニマス・ボックスに含まれます。

“ランイン・シーケンス(Run-in Sequence)”は連続する兄弟ボックスであるランイン・ボックスのことで、ランイン・ボックスの合間にホワイトスペースやフロー外のボックスがある場合もランイン・シーケンスとなります。

ランイン・ボックスのブロック・ボックスへの挿入は文書の整形時にブロック整形コンテキストでインライン・レベルのコンテンツがアノニマス・ブロック・ボックスに内包されるよりも前に行われ、“::first-line”擬似要素や“::first-letter”擬似要素で選択されるテキストを選ぶのに使用される最初の整形された行を判断する際にはランイン・ボックスは最初からボックス・ツリーのその位置にあったように扱われます。

他の用語

“テキスト・ラン(Text Run)”

連続するテキスト・ノードはそのコンテンツであるテキストを内包するためのテキスト・ランを生成します。

“ブロック・レベル(Block-level)”

ブロック整形コンテキストに参加するコンテンツはブロック・レベルにあると言います。

“インライン・レベル(Inline-level)”

インライン整形コンテキストに参加するコンテンツはインライン・レベルにあると言います。

“ブロック・コンテナ(Block Container)”

ブロック整形コンテキスト、もしくはインライン整形コンテキストを内包するボックスはブロック・コンテナと呼ばれます。

“ブロック・ボックス(Block Box)”

ブロック整形コンテキストに参加するブロック・レベルのボックスで、同時にブロック・コンテナであるボックスはブロック・ボックスと呼ばれます。

“インライン・ボックス(Inline Box)”

インライン整形コンテキストに参加し、置換要素でなく、内部ディスプレイ・タイプが“flow”ではないインライン・レベルのボックスはインライン・ボックスと呼ばれます。

インライン・ボックスに内包されるコンテンツはインライン・ボックスと同じインライン整形コンテキストに参加します。

“アトミック・インライン(Atomic Inline)”

複数の行に跨って分割するができないボックスはアトミック・インラインと呼ばれます。インライン・レベルのボックスで、置換要素や新しい整形コンテキストを生成するもの(“inline-block”や“inline-table”)が当てはまります。

“ブロック化(Blockification)”

ボックスがブロック化されると“display”プロパティの外部ディスプレイ・タイプの計算値が“block”に変更されます。

ルート要素は常にブロック化されます。

“インライン化(Inlinification)”

ボックスがインライン化されると“display”プロパティの外部ディスプレイ・タイプの計算値が“inline”に変更されます。

プロパティ