視覚フォーマットモデル

Revised: Apr./04th/2006

視覚フォーマットモデルの概念

CSS2 では、文書の木構造を、ボックスモデルに従ってレンダリングします。本ページを読むに当たっては、ボックスモデルから先に読むように強くお勧めします。

要素が生成するボックスは、親要素の確立する包含ブロックに基づいてレンダリングされます。新しくブロック・ボックスを生成する要素をブロック・レベルと呼び、新しいブロックを生成せずに、行内に配置される要素をインライン・レベルと呼びます。インラインレベルの要素が生成するボックスを、インラインボックスと呼びます。

1. display
2. position
3. オフセット
4. 浮動化
   1. float
   2. clear
5. z-index
6. テキスト方向
   1. direction
   2. unicode-bidi

視覚フォーマットモデルを決定するコンテキストは、大きく分けると、ブロックフォーマットと、インラインフォーマットに分けられます。

ブロックフォーマット

'display' の値が block である要素を、ブロックレベル要素と呼びます。HTML のデフォルトでは、div,h1,h2,h3,h4,h5,h6,p,blockquote,address,dl,ul,ol,table などが該当します。視覚的な表現では、要素の開始が新しい行の開始となるような要素です。

ブロックレベルの要素のレンダリングに使われるフォーマットがブロックフォーマットです。要素が生成するボックスは、親要素の設定する包含ブロックに内部に配置され、前後のボックスとはマージンの指定値を隔てて隣接します。

ボックスは、包含ブロックの位置に基づいて位置が計算されますが、'position' 指定の値によっては、包含ブロックからはみ出したり、完全に外部に位置づけられることもあります。

インラインフォーマット

'display' の値が inline である要素を、インラインレベル要素と呼びます。HTML のデフォルトでは、span,strong,em,q,ruby などが該当します。

インラインレベルの要素のレンダリングに使われるフォーマットがインラインフォーマットです。行ボックスは矩形領域ですが、インラインボックスは、改行する（矩形領域をまたいで存在する）ことができます。

要素が生成するインラインボックスは、親要素の設定する包含ブロック幅の行ボックス内部に流し込まれる形で配置されます。行ボックスの高さは、'margin', 'top', 'bottom' に依存するほか、'line-height' によって決定します。

行ボックス内部でのインラインボックスの配置は、上下方向は 'vertical-align' によって揃えられます。'vertical-align の値が top であれば、行ボックスとインラインボックスの上辺が一致するように配置され、baseline であれば、テキストのベースラインが一致するように配置されます。

水平方向は 'text-align' 方向に揃えられます。'text-align' の値が left であれば、行ボックスとインラインボックスの左辺が一致するように配置され、justify であれば、双方の左右の辺が一致するように、インラインボックスの幅が拡張されます。

display

プロパティ 'display' は、任意の要素に指定可能です。セレクタにマッチした対象が生成するボックスの種類を指定します。ボックスの種類を指定するものなので、このプロパティはその名前とは裏腹に、視覚的でないメディアタイプに対しても有効です。

'display' は子要素に継承されません。デフォルトの値は、inline です。inherit は、親要素の値を明示的に継承する指定です。

block

要素をブロックレベル要素として定義し、ブロックボックスだけを含む、基本ブロック・ボックスを生成させる。

inline

要素をインラインレベル要素として定義し、一つ以上のインライン・ボックスを生成させる。

list-item

HTMLの li などの要素に基本ブロックボックス及びリスト項目行内ボックスを生成させる。

marker

ボックスの前又は後の生成される内容をマーカと宣言する。この値は，ブロックレベル要素に対する擬似要素 :before, :after と共に使われる。その他の場合は、'inline' と等価となる。

none

要素が全くボックスを生成せず、フォーマット化に影響しない。

run-in

ブロック・ボックスがランイン・ボックスに続く場合は、そのランイン・ボックスは，ブロック・ボックスの最初のインライン・ボックスとなる。そうでない場合は、ランイン・ボックスはブロック・ボックスとなる。

compact

ブロック・ボックスがコンパクト・ボックスに続く場合、そのコンパクト・ボックスは、ブロックの最初のインライン・ボックスの外(左又は右)に置かれ、一行のインライン・ボックスと同様にフォーマットされる。そうでない場合は、コンパクト・ボックスはブロック・ボックスになる。

table，inline-table，table-row-group， table-column， table-column-group， table-header-group， table-footer-group， table-row，table-cell, table-caption

テーブル関連の要素に類似した要素を定義する。

'display' の例：

/* hr 要素は非表示で、文書のフォーマッティングに影響しない */
hr { display: none }

/* dt の幅が dd のマージンと等しいか、それよりも小さい場合は、
   一行のインライン・ボックスとして、マージン内に表示される */
dt { display: compact }
dd { margin-left: 4em }

/* h3 要素は後続のブロックレベル要素の最初のインライン・ボックスとなる */
h3 { display: run-in }

position

プロパティ 'position' は、任意の要素に指定可能です。セレクタにマッチした対象が生成するボックスの位置を計算するために使われます。

'position' は子要素に継承されません。デフォルトの値は、static です。inherit は、親要素の値を明示的に継承する指定です。

static

通常のボックスであり、通常のフローに従ってレイアウトされる。'left', 'top' は適用されない。

relative

通常のフローに従って位置が計算され、その通常の位置に対して相対的にずらされてレンダリングされる。後続のボックスの位置は、このボックスが通常の位置からずらされていないものとして計算される。

absolute

ボックスの位置及びサイズは、'left'，'right'，'top', 'bottom' を用いて、ボックスの包含ブロックに関するオフセットを指定する。独立したレイヤーとしてレンダリングされ、後続のボックスの位置の計算には影響しない。

fixed

ボックスの位置が 'absolute' に従って計算された後、ページやウィンドウなどの表示域に対して固定され、スクロールやページ分割に対して移動しない。

オフセット

'position' の値が static 以外の場合、ボックスの包含ブロックに対するオフセット値を指定できます。

オフセット関連のプロパティは子要素に継承されません。デフォルトの値は、auto です。inherit は、親要素の値を明示的に継承する指定です。

<percentage>

包含ブロックの幅又は高さを 100% としてパーセントで指定する。'top', 'bottom' に対しては、包含ブロックの高さが明示的に指定されない場合は、'auto' の場合と同様に解釈される。

auto

0 で置換するか、利用可能な包含ブロックのサイズに対する変数値と解釈される。

float

プロパティ 'float' は、'position' が absolute か fixed である要素（絶対位置決めされた要素）を除いた、任意の要素に指定可能です。セレクタにマッチした対象が生成するボックスの浮動化方法を指定します。ここでいう浮動化とは、規定のフォーマッティング・コンテキストから外すことを意味します。

'float' は子要素に継承されません。デフォルトの値は、none です。inherit は、親要素の値を明示的に継承する指定です。

値が left か right の場合は、'display' の値は無視されます。

left

左に浮動するブロックボックスを生成する。後続する内容のレイアウトはボックスの右側から始まる。

right

右に浮動するブロックボックスを生成する。後続する内容のレイアウトはボックスの左側から始まる。

none

ボックスは浮動しない。

浮動化ボックスは、その外辺が包含ボックス辺か他の浮動フロートの外辺に触れるまで、右か左にずらされます。行ボックスがある場合は、浮動化ボックスの上辺は現在の行ボックスの上辺にそろえられます。もし、水平方向に十分な余裕がない場合は、行内に収められるか、他にフローとがなくなるまで下にずらされます。

フロートは通常のフローからは取り除かれるので、浮動化ボックスの前後に作られた位置決めされていないブロックボックスは、あたかもフロートがないかのように流し込まれます。しかし、フロートの次に作られる行ボックスは、フロートのマージン領域にかぶさらないように幅が縮められます。

/* img は左に浮動化される */
img { float: left;
	margin: 0 1em }

<p>この段落の中に左に浮動化された要素を置きます。ここは同一段落の先行する内容です。
【<img src="./back3.jpg" alt="demo" style="float: left; margin: 0 1em" />】
ここは同一段落の後続の内容です。ウィンドウの幅を狭めて、後続のインラインボックスが
どのようにレンダリングされるか確認してください。正しくレンダリングされているとき、
画像は p 要素内部であり、かつ左右に 1em 分のマージンがとられます。</p>

<p>この例では、img 要素が左に浮動化されています。img 要素の親要素は p 要素なので、
img 要素は p 要素が設置する包含ブロック内でできる限り左に位置するのが正解です。
包含ブロックを突き破って包含ブロックよりも左に位置する場合はレンダリングが誤っ
ています。また、マージンが相殺しないことにも注意してください。</p>

MS IE 6.0/7.0, Firefox 1.0/1.5, Opera 8.53 で正しく扱われます。次の画像は、Firefox 1.5 の画面キャプチャです。画像の垂直方向の位置は行ボックスの上辺にそろえられ、水平方向は包含ボックス内で左に寄せられます。画像は他の要素間にまたがって存在し、ボーダーの上に表示されます。画像の周囲にはマージンがとられ、周りの行ボックスは、画像のマージン領域に掛からないように幅が縮められます。周りのボックス間のマージンは、画像がないときと同じように相殺されていますが、画像の周囲のマージンは相殺されません。

図：Fireofox 1.5での表示例

W3C の CSS 2.1 では次のように指定されています。

1. 左に浮動化されたボックスの左外辺は、包含ブロックの左辺の左側にあってはならない(may not)。同様の規則が右に浮動化された要素についても保持される。
2. ボックスが左に浮動化されており、ソースドキュメント上先行する要素が左に浮動化したボックスを生成するのであれば、先行する各々のボックスに対して、ボックスの左外辺は先行するボックスの右外辺の右側に位置するか(must)、ボックスの上辺が先行するボックスの可変よりも下になるようにしなければならない(must)。同様の規則が右に浮動化された要素についても保持される。
3. 左に浮動化されたボックスの右外辺は、全ての右に浮動化したボックスの左外辺の右に位置してはならない(may not)。右に浮動化したボックスは、左に浮動化したボックスよりも右側になる。同様の規則が右に浮動化された要素についても保持される。
4. 浮動化されたボックスの上外辺は、包含ブロックの上辺よりも上に位置してはならない(may not)。互いに接しあって相殺された二つのマージンの間で浮動化がおこるときは、そのフロートは当該フロー中に匿名の空の親ブロックを持つかのように配置される。（匿名の）親ブロックは、マージンの相殺のセクションで説明される規則に従う。
5. 浮動化ボックスの上外辺は、ソースドキュメント上先行する要素によって生成される、いかなるブロック・ボックスもしくは浮動化ボックスの上外辺よりも上にあってはならない(may not)。
6. 要素の浮動化ボックスの上外辺は、ソースドキュメント上先行する要素によって生成されるボックスを包含するいかなる行ボックスの上辺よりも上にあってはならない(may not)。
7. 自身の左側に別の左浮動化ボックスをもつ左浮動化ボックスは、右外辺を包含ブロックの右辺よりも右においてはならない(may not)。（大雑把に言うと、既に可能な限り左に寄せられていない限り、左フロートは右辺より突き出してはならない。）同様の規則が右に浮動化された要素についても保持される。
8. 浮動化ボックスは可能な限り上方向に置かれなければならない(must)。
9. 左浮動化ボックスは、可能な限り左に、右浮動化ボックスは可能な限り右に寄せられなければならない(must)。左／右に寄せることよりも上にあることのほうが優先される。

例えば、ソースコード上、前後に隣接するフロート同士は可能な限り同一行内にレンダリングされます。両方のブロック要素に 'float: left' を指定すると、マルチカラムであるかのようにレンダリングされます。

clear

プロパティ 'clear' は、ブロックレベル要素に指定可能です。セレクタにマッチした対象が生成するボックスのどの側が先行するボックスに隣接しないかを指定します。

'clear' は子要素に継承されません。デフォルトの値は、none です。inherit は、親要素の値を明示的に継承する指定です。

left

左に浮動するブロックボックスよりも下にレンダリングされる。

right

右に浮動するブロックボックスよりも下にレンダリングされる。

both

浮動するブロックボックスよりも下にレンダリングされる。

none

浮動するブロックボックスに対する、位置決め上の制約はない。

/* h2 要素は浮動ブロックの脇に回り込まない */
h2 { clear: both }

結果として、要素の 'clear' で指定された方向の辺は、先行する 'float' 指定された要素の辺と接しないことになります。但し、当該要素内の 'float' 化した要素に対しては影響しません。

z-index

プロパティ 'z-index' は、任意の要素に指定可能です。セレクタにマッチした対象が生成するボックスの上限関係を指定します。

'z-index' は子要素に継承されません。デフォルトの値は、auto です。inherit は、親要素の値を明示的に継承する指定です。

<integer> は、相互に重なり合うボックス間で、垂直方向のレイヤーのレベルを表し、数字が大きい程、上に表示されます。負の値が許されます。

値は継承されませんが、初期値が auto なので、親要素のボックスと同じレイヤー上にフォーマットされます。

/* img は下から 1 番目 */
img { position: fixed; top: 2em; left: 4em;
    z-index: 1 }
/* p は下から 2 番目（img より上） */
p { z-index: 2 }
/* 無指定の他の要素は一番下の 0 番目（img より下） */

direction

プロパティ 'direction' は、任意の要素に指定可能です。セレクタにマッチした対象が生成するボックスの表記方向を指定します。

'direction' は子要素に継承されます。デフォルトの値は、左から右 (left to right) を意味する ltr です。inherit は、親要素の値を明示的に継承する指定です。

値は継承されませんが、初期値が auto なので、親要素のボックスと同じレイヤー上にフォーマットされます。

アラビア語、ヘブライ語、古い日本語などが右から左の例としてよく知られています。テーブルに指定された場合は、列の並べ方として採用されながら、列に含まれるセルの文字表記方向には依存しません。

時系列のタイトルを持つ列や座標軸が、右から左に向くこともあれば、左から右に向くこともあります（出版物では圧倒的に右向きが多くなりますが、時代を遡ると左向きの比率も高まり、意外と違和感がありませんます）。これは、言語文化の表記方向だけではなく、日時計を太陽に向かって北側から見ると、右から左に進んでいくことや、右利きの文化圏で右から入ってくる（左へ抜けることもあれば、右に戻って退出することもある）ことが定着していたからではないかと思われます。日本では左が上座の左上になりますが、ヨーロッパ文化圏では時計回りの順で右が上座となるそうです。

/* 属性classの値がJapanese_classicのp要素は右から左へ */
p.Japanese_classic { direction: rtl }

unicode-bidi

プロパティ 'unicode-bidi' は、任意の要素に指定可能です。セレクタにマッチした対象が従う Unicode の制御双方向アルゴリズムに対する制御を提供します。

'unicode-bidi' は子要素に継承されません。デフォルトの値は、normal です。inherit は、親要素の値を明示的に継承する指定です。

normal

双方向アルゴリズムに追加／変更を施さない。

embed

マッチする対象がインライン要素の場合、双方向アルゴリズムに追加／変更を施し、'direction' の値が採用されながら、Unicode による暗黙的な指定値が反映される余地が残される。

bidi-override

マッチする対象がインライン要素か、インラインレベルの内容だけを持つブロックレベルの要素の場合、双方向アルゴリズムに追加／変更を施し、'direction' の値が採用され、Unicode による暗黙的な指定値が反映される余地が残さない。

embed の場合は、要素の先頭に LRE （U+202A，'direction: ltr' と等価）又は RLE （U+202B，'direction: rtl' に等価）を追加し、要素の末尾に PDF （U+202C）を追加する

bidi-override の場合は、要素の先頭に LRO （U+202D，'direction: ltr' と等価）又は RLO （U+202E，'direction: rtl' と等価）を追加し、要素の末尾に PDF （U+202C）を追加する

/* 文字方向は右から左
   Unicodeの文字方向をdirectionの指定で上書きする */
p { direction: rtl; unicode-bidi: embed" }

次の HTML 文書に対するフォーマット化方法を、ご利用のブラウザで確かめてください。

<p style="direction: rtl; unicode-bidi: embed">ここは
p 要素の内容部分です。<em style="direction: rtl; unicode
-bidi: embed">ここは emphasized 要素の内容部です。</em>
ここは再び p 要素の内容部分です。</p>

表示例：

'direction' と 'unicode-bidi' の例：