視覚整形モデル

この文書は翻訳中です。他国語のままの部分などがあるのはその為です。
是非お気軽に MDN に登録して翻訳に参加し、私たちの手助けをして下さい!

CSS の 視覚整形モデル (visual formatting model) は、文書の処理と視覚メディアへの表示に使われるアルゴリズムで、CSS の基本概念です。視覚整形モデルは文書の各要素を変換して、CSS ボックスモデルに従う 0、1、またはいくつかのボックスを生成します。各ボックスの配置は、次のいずれかにより定められます:

  • ボックスの大きさ: 精密な定義、制約あり、制約なし
  • ボックスのタイプ: インライン、インラインレベル、不可分なインラインレベル、ブロックボックス
  • 位置決定スキーム: 通常フロー、フロート、絶対位置指定
  • 文書木にある他の要素: 子要素や隣接要素
  • ビューポートの大きさや位置
  • 含まれる画像の持つ大きさ
  • その他外部からの情報

ボックスはその 包含ブロック の辺を基準に描かれます。通常、ボックスはその子孫要素のために包含ブロックを作ります。ボックスはそれ自身の包含ブロックに閉じ込められない点に注意してください。ボックスの配置が包含ブロックの外側にはみ出る状態を、オーバーフロー していると言います。

ボックスの生成

ボックスの生成は CSS の視覚整形モデルの一部で、文書内の要素からボックスを作ることです。生成されたボックスはそれぞれ別個のタイプを持ち、視覚整形モデルそのものに影響します。生成されたボックスのタイプは display CSS プロパティによって決まります。

ブロックレベル要素とブロックボックス

要素の display CSS プロパティの計算値が blocklist-item または table であるとき、要素はブロックレベルであると言います。ブロックレベル要素はブロックとして視覚整形され(例:段落 )、縦方向にスタックされていきます。

ブロックレベルボックス (block-level box) は、ブロック整形文脈 に関わるボックスです。ブロックレベル要素はそれぞれ、主ブロックレベルボックス (principal block-level box) と呼ばれる、少なくとも 1 つのブロックレベルボックスを生成します。リスト項目要素のように、項目先頭の黒丸や他の文字要素用にさらにボックスを生成するものもあります。しかし、ほとんどは主ブロックレベルボックスだけを生成します。

主ブロックレベルボックスは、子孫要素の生成するボックスと、生成されたコンテンツを含むことになるでしょう。また、位置決定スキーム (positioning scheme) に関わるでしょう。

venn_blocks.pngブロックレベルボックスは、ブロック包含ボックス (block container box) でもあるかもしれません。ブロック包含ボックスには、他のブロックレベルボックスだけを含む場合と、インライン整形文脈を作るインラインボックスだけを含む場合があります。重要なのは、ブロックレベルボックスとブロック包含ボックスは別であることです。ボックスの動作について、初めにボックスの親要素や兄弟要素に関するものを、次にボックスの子孫要素との相互作用の仕方について述べます。ブロックレベルボックスには、表(テーブル)のように、ブロック包含ボックスではないものがあります。また、逆に一部のブロック包含ボックスには、非置換インラインブロックや非置換の表のセルのように、ブロックレベルボックスではないものがあります。

ブロック包含ボックスでもあるブロックレベルボックスを、ブロックボックス と呼びます。

匿名ブロックボックス

視覚整形アルゴリズムが、補助用のボックスを必要とするケースがあります。これらのボックスを 匿名ボックス (anonymous boxes) と呼びます。このボックスは CSS セレクタでスタイルづけができません。個々のボックスに名前を付けることができないので、匿名と呼んでいます。

セレクタが機能しないということは、スタイルシートを通じてスタイルづけができないということです。継承可能な CSS プロパティはすべて inherit 値を持ち、継承不能な CSS プロパティはすべて initial 値を持つことになります。

ブロック包含ボックスには、インラインレベルボックスのみか、ブロックレベルボックスのみを入れられます。しかし文書は、よく両方を含んでいます。この場合、隣接するインラインレベルボックスを囲むように匿名ブロックボックスが作られます。

次の HTML コードを見てみましょう(デフォルトのスタイルシートが適用されており、<div><p> 要素の display の値は block です)

<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>

2 つの匿名ブロックボックスが作られます。 1 つは p 要素の前にあるテキスト( Some inline text )用で、もう 1 つは p 要素の後ろのテキスト( followed by more inline text )用です。こうして次のブロック構造ができます:

anonymous_block-level_boxes.png

表示結果は次のとおりです:

Some inline text
followed by a paragraph
followed by more inline text.

<p> 要素のボックスと違って、ウェブ製作者はこの 2 つの匿名ボックスのスタイルを操作できません。継承可能なプロパティについては <div> のプロパティ値から値が取られます。例えばテキストの色を定義する color は継承されます。それ以外のプロパティは initial 値に設定されます。例えば background-color は定義されておらず、このプロパティの initial 値である透明になります。したがって <div> の背景を透かして見ることができます。一方で、<p> ボックスには背景色を指定できます。同様に、 2 つの匿名ボックスはそのテキストに、常に同じ色を使おうとします。

匿名ブロックボックスが作られるもう一つのケースは、インラインボックスが、 1 つまたは複数のブロックボックスを含む場合です。この場合、ブロックボックスを含むボックスは 2 つのインラインボックスに分けられ、ブロックボックスの前後に 1 つずつ置かれます。ブロックボックスより前にあるインラインボックスはすべて匿名ブロックボックスに入れられます。ブロックボックスの後ろにあるものも同様です。この結果ブロックボックスは、インライン要素を含む 2 つの匿名ブロックボックスの、兄弟要素になります。

もしブロックボックスが複数あれば、その間にインラインコンテンツがなくても、一群のボックスの前後に匿名ブロックボックスが作られます。

TBD: Describe example

インラインレベル要素とインラインボックス

要素の display CSS プロパティの計算値が inline、inline-block または inline-table であるとき、その要素は インラインレベル であると言います。外見的には、コンテンツのブロックを構成していませんが、他のインラインレベルのコンテンツといっしょに行内に配置されます。インラインレベル要素の典型例は、段落のコンテンツ、強調表示のような書式つきのテキスト、または画像です。

venn_inlines.pngインラインレベル要素は、インラインレベルボックスを作ります。これは、インライン整形文脈に加わるために、ボックスとして定義されたものです。インラインボックス とは、インラインレベルボックスでもあり、それらのコンテナのインライン整形文脈に加わるボックスでもあります。例えば display:inline である非置換ボックスはすべてこれに該当します。インライン整形文脈に加わらないインラインレベルボックスを、不可分のインラインレベルボックス と言います。これは、置換インラインレベル要素か、display の計算値が inline-block または inline-table である要素によって生成されます。不可分のインラインレベルボックスは、インラインボックスと違い、ボックスに分けられません。

注記: 不可分のインラインレベルボックス (atomic inline-level boxes) は初め、 不可分のインラインボックス () と呼ばれていましたが、実際にはインラインボックスではないので、不適切でした。その後、これは仕様書の正誤表で訂正されました。とは言え、名前が変更されただけなので、文献に登場する不可分のインラインボックスと、不可分のインラインレベルボックスを読み誤りやすくなっています。
不可分のインラインボックスは、インライン整形文脈内で複数の行にわけることができません。
<style>
  span {
    display:inline; /* デフォルト値*/
  }
</style>
<div style="width:20em;">
   The text in the span <span>can be split in several
   lines as it</span> is an inline box.
</div>

表示結果:

The text in the span can be split in several lines as it is an inline box.
<style>
  span {
    display:inline-block;
  }
</style>
<div style="width:20em;">
   The text in the span <span>cannot be split in several
   lines as it</span> is an inline-block box.
</div>

表示結果:

The text in the span cannot be split in several lines as it is an inline-block box.

匿名インラインボックス

ブロックボックスのように、CSS エンジンによって自動的にインラインボックスが作られるケースがいくつかあります。このインラインボックスは匿名で、セレクタで指定できません。匿名インラインボックスのプロパティは、継承可能なものは継承された値を、それ以外は initial 値を持ちます。

匿名のインラインボックスが作られるよくあるケースは、インライン整形文脈を作るブロックボックス直下の子要素としてテキストがある場合です。この場合、テキストは可能な限り大きな匿名インラインボックスに入れられます。また、最終的に white-space CSS プロパティで指定された動作で取り除かれる空白のコンテンツは、空になるので匿名インラインボックスを生成しません。

Example TBD

その他のボックスのタイプ

行ボックス (line boxes)

行ボックスは、インライン整形文脈において、行を表現するために生成されるボックスです。行ボックスは、包含するブロックボックスのボーダーから反対側のボーダーまで広がります。フロートがあれば、行ボックスは左側のフロートの一番右のボーダーから始まり、右側のフロートの一番左のボーダーで終わります。

このボックスは専門的で、通常はウェブ製作者が頭を悩ます必要はありません。

ランインボックス (run-in boxes)

ランインボックス display:run-in で定義されるもので、次に来るボックスのタイプによってブロックボックスもしくはインラインボックスになります。可能であれば、最初の段落の内部にタイトルを作るときに使えます。

註: ランインボックスは、相互互換性のある実装ができる仕様に至らなかったため、CSS 2.1 標準から取り除かれました。ランインボックスは CSS 3 で再登場する可能性がありますが、それまでは実験的機能であると考えられます。製作に使うべきではありません。

モデル起因のボックス (model-induced boxes)

CSS では、インライン整形文脈およびブロック整形文脈を外れた、他のコンテンツモデルを要素に用いることができます。こうした追加モデルは特定のレイアウト定義に使われて、次のような追加のボックスタイプを定義するかもしれません:

  • テーブルコンテンツモデルテーブル包含ボックステーブルボックス を作る可能性があり、キャプションボックスのようなものも定義します。
  • 複数列コンテンツモデル はコンテナボックスとコンテンツの間に 列ボックス を作るかもしれません。
  • 実験的なグリッドやフレックスボックスコンテンツモデルも別のタイプのボックスを作ります。

位置決定スキーム (positioning schemes)

ひとたびボックスが生成されると、CSS エンジンは レイアウト上でそれらの位置を決めなくてはなりません。そのために、次のアルゴリズムのうちの一つを使います:

  • 通常フロー。ボックスを順々に並べます
  • フロート。通常フローからボックスを引きぬいて現在のボックスの側面に押し付け、タイポグラフィックな校正処理(プルクオート)を行います。
  • 絶対位置指定。ボックスは絶対位置指定されます。ただし、座標系の原点は文書によって変わる可能性があります。絶対位置指定要素は、他のスキームで位置が決められた要素に覆いかぶさることができます。

通常フロー

通常フロー では、ボックスは順々に置かれます。ブロック整形文脈では縦に並べられます。インライン整形文脈では横に並べられます。positionstatic または relative に設定され、floatnone に設定されていると、通常フローになります。

通常フローのブロック整形文脈内では、ボックスは縦に順々に置かれます:
[image]

通常フローのインライン整形文脈内では、ボックスは横に順々に置かれます:
[image]

通常フローには 2 つサブケースがあります。静的位置決めと相対的位置決めです:

  • 静的位置指定 (static positioning)は、position プロパティに static 値が設定されたもので、通常フローによるレイアウトで定義された位置にそのまま、ボックスが描画されます。
    [image]
  • 相対位置指定 (relative positioning,)は、position プロパティに relative が設定されたもので、topbottomleftright の CSS プロパティで定義された移動量を使ってボックスが描かれます

フロート

フロート位置決定スキームでは、フローティングボックス、または単にフロートと呼ばれるボックスが、現在行の始めか終わりに置かれます。この結果、clear CSS プロパティが指定されない限りは、通常フローに含まれるテキストやその他のボックスが、フロートの周りを沿うように流し込まれます。

フロート位置決定スキームは、positionstatic または relative であるときに、floatnone 以外に設定すると選べます。floatleft に設定されると、フロートは行ボックスの始めに置かれ、それを縮めます。right に設定されれば、フロートは行ボックスの最後に置かれ、それを縮めます。

[image]

絶対位置指定

絶対位置決定スキーム では、ボックスは通常フローから完全に外され、通常フローの要素と相互作用しません。包含ブロックを基準に、topbottomleftright の CSS プロパティを使って位置が決定されます。

positionabsolute または fixed である要素は、絶対位置で位置が決められます。

固定位置指定要素 (fixed positioned element) は、包含ブロックがビューポートである絶対位置指定要素です。スクロールしてもビューポートは動かないので、この要素もスクリーンに固定されます。

添付ファイル

ファイル サイズ 日時 添付者:
venn_blocks.png
27683 バイト 2011-12-16 18:33:12 teoli
anonymous_block-level_boxes.png
35402 バイト 2011-12-16 18:34:03 teoli
venn_inlines.png
35406 バイト 2011-12-18 12:36:43 teoli
profiler-tree
571068 バイト 2013-08-26 02:22:36 anton

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,