CSS2~“Visual formatting model”

仕様書

この章では視覚メディアにおいて文書ツリーをどのように整形して描画するかを定義しています。

この章の一部は“CSS Display Module”や“CSS Positioned Layout Module”によって置き換えられ、拡張されています。

プロパティ

配置スキーム

CSS2ではボックスは以下の3つの“配置スキーム(Positioning Schemes)”によって配置されます。

通常フロー(Normal flow)

ボックスはブロック整形コンテキストとインライン整形コンテキスト、相対位置指定のいずれかによって配置されます。

浮動化(Floats)

ボックスは一旦通常フローに従って配置された後にそこから取り出され、左や右に可能な限り移動されます。他のコンテンツは浮動化されたボックスの横に回り込むことがあります。

絶対位置指定(Absolute positioning)

ボックスは完全に通常フローから取り出され、包括ブロックを基準として配置されます。

浮動化要素(“float: none;”でない)や絶対位置指定要素(“position: absolute;”)、ルート要素は“フロー内(In-flow)”にあると言い、そうでないボックスは“フロー外(Out-of-flow)”にあると言います。

通常フロー

“通常フロー(Normal flow)”にあるボックスはブロック整形コンテキストとインライン整形コンテキストのどちらか一つの整形コンテキストに参加します。“ブロック・レベル”のボックスはブロック整形コンテキストに参加し、“インライン・レベル”のボックスはインライン整形コンテキストに参加します。

ブロック整形コンテキスト

浮動化要素(“float: none;”でない)や絶対位置指定要素(“position: absolute;”)、ブロック・ボックスでないブロック・コンテナ(“display: inline-block;”など)、“overflow”プロパティの値が“visible”以外であるブロック・ボックスはその中に新たな“ブロック整形コンテキスト(Block Formatting Contexts)”を生成します。

ブロック整形コンテキストに含まれるボックスはブロック軸方向に順番に並べられます。例えば、書字方向が横書きの場合は上から下へボックスが並べられます。

ブロック整形コンテキストに参加するボックスのブロック軸方向の間隔はマージンによって指定されます。ブロック軸方向に並ぶ兄弟ボックスのマージンは折り畳みが起こります。

ブロック整形コンテキストに含まれるボックスのインライン軸方向のアウター・エッジは包括ブロックの縁と一致します。浮動化要素がある場合でもボックスが新たなブロック整形コンテキストを生成していない限り、行ボックスの長さは短くなるものの、ボックス自体のインライン軸方向の大きさは変わりません。

インライン整形コンテキスト

“インライン整形コンテキスト(Inline Formatting Contexts)”に含まれるボックスはインライン軸方向に順番に並べられます。例えば、書字方向が横書きの場合は左から右、もしくは右から左へボックスが並べられます。

インライン整形コンテキストに参加するボックスのインライン軸方向の間隔はマージンやボーダー、パディングによって指定されます。ブロック軸方向にはテキストのベースラインを揃えたり、ボックスの上端や下端を揃えることでの配置されます。ボックスを内包し、行を形成する長方形状の領域は“行ボックス(Line Box)”と呼ばれます。

インライン軸方向に並ぶボックスが行ボックスに収まりきらない場合は複数の行ボックスに分けられます。同じインライン整形コンテキストに複数の行ボックスがある場合は、それぞれの行ボックスは間をあけずにブロック軸方向に並べられます。

アノニマス・ボックス

アノニマス・ブロック・ボックス

ブロック・コンテナにブロック・レベルのコンテンツとインライン・レベルのコンテンツが混在している場合、インライン・レベルのコンテンツはブロック・レベルのアノニマス・ボックスである“アノニマス・ブロック・ボックス(Anonymous Block Boxes)”に内包され、ブロック・レベルのコンテンツのみが含まれるかのように扱われます。

また、インライン・ボックスの中にフロー内のブロック・レベルのボックスが内包される場合、インライン・ボックスはブロック・レベルのボックスの前後に分割されます。分割されたそれぞれのボックスはアノニマス・ブロック・ボックスに内包され、インライン・ボックスを分割したブロック・レベルの兄弟ボックスになります。このように分割されたインライン・ボックスが相対位置指定の影響を受ける場合にはその中に内包されるブロック・レベルのボックスにも影響します。

アノニマス・ブロック・ボックスを生成した要素に適用されるプロパティはインライン・ボックスが分割されたとしてもその要素のボックスと要素の内容に適用されます。

アノニマス・ブロック・ボックスに適用されるプロパティの値はそのアノニマス・ブロック・ボックスを内包するアノニマス・ボックスでない祖先要素から継承されます。継承されないプロパティの値は初期値に設定されます。

アノニマス・ブロック・ボックスはパーセント値を計算する際には無視され、代わりに直近のアノニマス・ボックスでない祖先要素を参照します。

アノニマス・インライン・ボックス

ブロック・コンテナである要素に直接内包されるテキストはインライン・レベルのアノニマス・ボックスである “アノニマス・インライン・ボックス(Anonymous Inline Boxes)”に内包されているように扱われます。

アノニマス・インライン・ボックスに適用されるプロパティの値はその親であるブロック・ボックスから継承されます。継承されないプロパティの値は初期値に設定されます。

なお、“white-space”プロパティによって折り畳まれるホワイトスペースはアノニマス・インライン・ボックスを生成しません。