Revised: Aug./02nd/2004; Since: Jun./20th/2004
CSS では、ブロックレベルの要素を、ボックスモデルと呼ばれる矩形領域の概念で操作対象とします。ボックスは、内容、パッディング、ボーダー、マージンと呼ばれる領域から構成され、親要素が生成するボックス (box) が設定 (establish) する包含ブロック (containing block) 内を基準にレンダリングされます。
|
| 図：ボックスモデルの概念図 |
|---|
HTML の言葉では、文書は要素の集合であり、要素は内容を持つといいます。
border' 関連のプロパティで指定される。background' で指定される。次の HTML の断片は、p 要素の内容が、源氏物語（与謝野晶子訳）の冒頭である例です。
<p>どの天皇様の御代であったか、女御とか更衣とかいわれる後宮が おおぜいいた中に、最上の貴族出身ではないが深い御愛寵を得てい る人があった。</p>
この要素を表示する場合に、ユーザエージェントは、レンダリング可能な矩形領域のサイズを計算し、マージンで指定された余白の内側に、ボーダーで指定された境界線をレンダリングし、その内側にパッディングで指定されたスペースをとって、この要素の内容をレンダリングします。
逆の見方をすると、内容を囲む内容辺から境界線までのスペースがパッディングで、境界線から他の要素の境界線までのスペースがマージンです。
文書全体を、要素をノードとする木構造として見ると、一つの要素は、他の要素の親となり、子孫要素をレンダリングするボックスを包含する包含ブロック (containing block) として機能します。
当該ボックスの内容領域を取り囲む四方の辺（内容辺）が、当該ボックスが子要素のボックスを包含するために設定する包含ブロックの四辺となります。ボックス関連の多くの指定値が、包含ブロックのサイズに基づいて計算されます。
CSS 2.1 では、包含ブロックは次のように定義されています。
- ルート要素が存在する包含ブロック (C.B.: containing block) はユーザ・エージェント (UA) によって選択される。（表示域 (viewport) と関連付けられる可能性がある。）この包含ブロックは、初期包含ブロック (initial contining block) と呼ばれる。
- 他の要素では、要素の '
position' プロパティの値が 'relative' か 'static' である場合、包含ブロックはブロック・レベル／テーブル・セル／インライン・ブロックの最も近い祖先のボックスの内容辺 (content edge) で形成される。- もし要素が '
position: fixed' である場合、包含ブロックは、連続メディアの表示域によって設定される。ページ付けメディアの場合はページボックスの表示域になる。- もし要素が '
position: absolute' である場合、包含ブロックは、'position' の値が 'absolute', 'relative', 'fixed' の何れかである最近接祖先要素によって設定され、その方法は次のようになる：もしそのような祖先がないならば、その包含ブロックは初期包含ブロックである。
- その祖先がインラインレベルである場合、包含ブロックはその祖先の '
direction' プロパティに依存する：
- もし '
direction' の値が 'ltr' (left to right) である場合、包含ブロックの左上端は、祖先に生成される最初のボックスの左上はしになり、右下端は、祖先の最後のボックスの内容辺の右下端に一致する。- もし '
direction' の値が 'rtl' (right to left) である場合、右上端は祖先に生成される最初のボックスの右上端になり、左下端は、祖先の最後のボックスの内容辺の右下端になる- その他の場合は、包含ブロックは祖先のパッディング辺によって形成される。
CSS での表示域 (viewport) とは、UA の表示領域のことであり、連続メディアでは多くの場合、スクリーン上のウィンドウになります。
包含ブロックは、ルート要素の場合は UA 依存で、ウィンドウの表示領域などが包含ブロックになります。その他の子要素の場合は、親要素（最近接の祖先要素）のボックスが包含ブロックを設定します。ブロックレベルの場合、デフォルトでは 'position: static' なので、親要素の内容辺が包含ブロックの外側の四辺になります。
殆どの要素について、CSS プロパティの値と、先祖要素が設定する包含ブロックの幅との間には、次のような関係にあります。例外は、置換要素以外のインライン要素 (non-replaced inline elements)、テーブルの行と行グループだけです。
包含ブロックの幅 = 'margin-left' + 'border-left-width' + 'padding-left'
+ 'width'
+ 'padding-right' + 'border-right-width' + 'margin-right'
これらの値が包含ブロックよりも小さい場合は、水平方向のマージンの値によって調節されます。'auto' であれば、要素がセンタリングされることになります。逆に大きすぎる場合は、'auto' か無指定の値が無視されて調節されます。CSS 2.1 では、通常フローでのブロックレベル非置換要素の幅決定方法について、次のように補足されています。
もし '
width' が 'auto' でなく、'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' （+ 'auto' でない 'margin-left' と 'margin-right'）が、包含ブロックの幅よりも大きいときは、'auto' である 'margin-left' か 'margin-right' の値は次の規則にしたがってゼロとして扱われる。もし上記のもの全てが '
auto' 以外の決定済みの値を持っているならば、「過剰制約 (over-constrained)」と云われ、何れか一つの値はその指定値と異なることになる。もし、包含ブロックのプロパティ 'direction' の値が 'ltr' であれば、 'margin-right' で指定した値は無視され、上記の等式が成り立つように値が計算される。もし 'direction' が 'rtl' であれば、代わりに 'margin-left' に対して同じことが実施される。もし '
auto' と指定されている値が唯一つであるならば、使われる値は等式から導かれる。もし '
width' が 'auto' に設定されていれば、他の 'auto' の値が '0' になり、'width' は等式から導かれる。もし、'
margin-left' と 'margin-right' の値が両方とも 'auto' であれば、それらの使われる値は同じになる。その結果、この要素は、包含ブロックの両辺に対して、水平方向に中央に置かれる。
なお、非置換要素の絶対位置決めモデル（'position: absolute' か 'position: fixed'）の場合は、上記の関係に、'left' と 'right' が追加されます。例えば、包含ボックスの左辺と、要素の左マージンの外側の線との距離が 'left' になります。絶対位置決めモデルの詳細にはここでは触れません。
包含ブロックの幅指定の例：
div.parent { margin:0; padding:0; border:1px dashed black; }
div.child { margin: 0 50px;
border: 10px solid black;
padding: 0 20px;
width: 150px }
| ▼Firefox 1.5.0.1 |
|---|
|
| ▼Microsoft Internet Explorer 7.0.5 Beta 2 |
|
| ▼Opera 8.5 |
|
一方、高さは内容に依存します。但し、'position: absolute' か 'position: fixed' の場合は、殆どの要素について、CSS プロパティの値と、先祖要素が設定する包含ブロックの高さとの間には、次のような関係にあります。例外は、置換要素以外のインライン要素 (non-replaced inline elements)、テーブルの列と列グループだけです。
包含ブロックの高さ = 'top'
+ 'margin-top' + 'border-top-width' + 'padding-top'
+ 'height'
+ 'padding-bottom' + 'border-bottom-width' + 'margin-bottom'
+ 'bottom'
Copyright © 2004 SUGAI, Manabu. All rights reserved.