視覚フォーマットモデル

Revised: Jun./22nd/2004

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

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 }

clear

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

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

left

左に浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされる。

right

右に浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされる。

both

浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされる。

none

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

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

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' の例：