視覚フォーマットモデル

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'
プロパティ名
displayinline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

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

block
要素をブロックレベル要素として定義し、ブロックボックスだけを含む、基本ブロック・ボックスを生成させる。
inline
要素をインラインレベル要素として定義し、一つ以上のインライン・ボックスを生成させる。
list-item
HTMLの li などの要素に基本ブロックボックス及びリスト項目行内ボックスを生成させる。
marker
ボックスの前又は後の生成される内容をマーカと宣言する。この値は,ブロックレベル要素に対する擬似要素 :before, :after と共に使われる。その他の場合は、'inline' と等価となる。
none
要素が全くボックスを生成せず、フォーマット化に影響しない。
run-in
ブロック・ボックスがランイン・ボックスに続く場合は、そのランイン・ボックスは,ブロック・ボックスの最初のインライン・ボックスとなる。そうでない場合は、ランイン・ボックスはブロック・ボックスとなる。
compact
ブロック・ボックスがコンパクト・ボックスに続く場合、そのコンパクト・ボックスは、ブロックの最初のインライン・ボックスの外(左又は右)に置かれ、一行のインライン・ボックスと同様にフォーマットされる。そうでない場合は、コンパクト・ボックスはブロック・ボックスになる。
tableinline-tabletable-row-grouptable-columntable-column-grouptable-header-grouptable-footer-grouptable-rowtable-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'
プロパティ名
positionstatic | relative | absolute | fixed | inherit

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

static
通常のボックスであり、通常のフローに従ってレイアウトされる。'left', 'top' は適用されない。
relative
通常のフローに従って位置が計算され、その通常の位置に対して相対的にずらされてレンダリングされる。後続のボックスの位置は、このボックスが通常の位置からずらされていないものとして計算される。
absolute
ボックスの位置及びサイズは、'left','right','top', 'bottom' を用いて、ボックスの包含ブロックに関するオフセットを指定する。独立したレイヤーとしてレンダリングされ、後続のボックスの位置の計算には影響しない。
fixed
ボックスの位置が 'absolute' に従って計算された後、ページやウィンドウなどの表示域に対して固定され、スクロールやページ分割に対して移動しない。

オフセット

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

プロパティ 'top', 'right', 'bottom', 'left'
プロパティ名
top, right, bottom, left<length> | <percentage> | auto | inherit

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

<percentage>
包含ブロックの幅又は高さを 100% としてパーセントで指定する。'top', 'bottom' に対しては、包含ブロックの高さが明示的に指定されない場合は、'auto' の場合と同様に解釈される。
auto
0 で置換するか、利用可能な包含ブロックのサイズに対する変数値と解釈される。

float

プロパティ 'float' は、'position' が absolutefixed である要素(絶対位置決めされた要素)を除いた、任意の要素に指定可能です。セレクタにマッチした対象が生成するボックスの浮動化方法を指定します。

プロパティ 'float'
プロパティ名
floatleft | right | none | inherit

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

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

left
左に浮動するブロックボックスを生成する。先行する内容はボックスの右側に流し込まれる。
right
右に浮動するブロックボックスを生成する。先行する内容はボックスの左側に流し込まれる。
none
ボックスは浮動しない。
/* img は左に浮動化される */
img { float: left }

clear

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

プロパティ 'clear'
プロパティ名
clear none | left | right | both | inherit

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

left
左に浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされる。
right
右に浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされる。
both
浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされる。
none
浮動するブロックボックスに対する、位置決め上の制約はない。
/* h2 要素は浮動ブロックの脇に回り込まない */
h2 { clear: both }

z-index

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

プロパティ 'z-index'
プロパティ名
z-indexauto | <integer> | inherit

'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'
プロパティ名
direction ltr | rtl | inherit

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

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

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

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

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

unicode-bidi

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

プロパティ 'unicode-bidi'
プロパティ名
unicode-bidinormal | embed | bidi-override | inherit

'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>

表示例:

ここは p 要素の内容部分です。ここは emphasized 要素の内容部です。 ここは再び p 要素の内容部分です。

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

文字表記方向のプロパティ。
direction: ltr; unicode-bidi: embed

文字表記方向のプロパティ。
direction: rtl; unicode-bidi: embed

文字表記方向のプロパティ。
direction: ltr; unicode-bidi: bidi-override

文字表記方向のプロパティ。
direction: rtl; unicode-bidi: bidi-override

Copyright © 2004 SUGAI, Manabu. All rights reserved.
2004-06-20 published, 2004-06-22 revised.
SEO [PR] ܂Ƃ߃[ Windows7 ₦΍ f ^T[o[ Cu`bg SEO