9. ボックスモデルの概要
CSSでは、文書ツリーにある各要素ごとに「ボックス」と呼ばれる矩形領域を作成する。 ここでは、このボックスの概要について説明する。
要素の分類によるボックスモデルの違い
文書ツリーにある要素は、を大きく「ブロック要素」と「インライン要素」に分類される。 この要素の分類によって、ボックスの考え方が異なる。
ブロックレベル要素
「ブロックレベル要素」の代表的な要素名としては、p、見出し(h1、h2、h3、h4、h5、h6)、リスト(ul、ol、dl) などがある。これらの要素が生成する矩形領域(ボックス)を「ブロックボックス」と呼ぶ。
例えば、つぎのようなブロックレベル要素が定義されているとき、
<h1>見出し</h1>
<p>
CSSでは、文書ツリーにある各要素ごとにボックスと呼ばれる矩形領域を作成する。
ここでは、このボックスの概要について説明する。
</p>
<p>
文書ツリーにある要素は、いくつかの種類に分類することができる。
まずは、ブロック要素とインライン要素について説明する
</p>
つぎのようなブロックボックスが考えられる。
インライン要素
「インライン要素」の代表的な要素名としては、a、em、strongなどがある。 これらの要素が生成する矩形領域(ボックス)を「インラインボックス」と呼ぶ。
例えば、つぎのようなインライン要素が定義されているとき、
<p>
<em>CSSでは、文書ツリーにある各要素ごとにボックスと呼ばれる矩形領域を作成する。</em>
<strong>ここでは、このボックスの概要について説明する。</strong>
</p>
つぎのようなインラインボックスが考えられる。
匿名ボックス
まずは、以下の例のボックスを考えてほしい。
<div>
div直下のテキスト
<p>p要素内のテキスト</p>
</div>
この場合、一番外側がdiv要素のブロックボックスであり、 その内側のp要素もブロックボックスです。 しかし、"div直下のテキスト"の部分は、特定の要素がありません。 このようなときは、「匿名ボックス」というブロックボックスが存在するものとCSSでは考えます。
同様に、以下の例のボックスでは、インラインレベルでの匿名ボックスを考えます。
<p>この段落では<em>強調部分</em>があります</p>
ボックスの構造
ボックスが矩形の領域を持つことは、すでに説明したとおりである。 では、このボックスがどのような構造を持っているかについて説明しよう。
ボックスモデルでは、4つの領域を持ち、各領域の周辺を「辺」と呼ぶ。 そのため各領域はそれぞれ4つの辺を持つことになる。
- マージン
- ボックスのもっとも外側にある余白を「マージン」と呼ぶ。 この領域には、背景が適用されず常に透明(transparent)である。 また、隣接するボックス間の垂直マージンは、 隣接するマージン同士を結合してひとつのマージンとして取り扱う「マージンの相殺」が起こる。(※ 水平マージンは相殺されません。)相殺のルールは、かなり複雑なので、ここでは基本的なルールのみを示す。
- お互いのボックスに指定されたマージンが共に正の場合は、その最大値をマージンとする。
- お互いのボックスに指定されたマージンが正負混合の場合は、その最大値と最小値を足した値をマージンとする。
- お互いのボックスに指定されたマージンが共に負の場合は、その最小値をマージンとする。
- ボーダー
- マージンの内側で、なおかつ、パディングの外側にある領域を「ボーダー」といい、「枠」を意味する。 この領域は、背景の上に指定された色で描画されるため、透明以外の色では、背景が見えません(※ ただし、枠の種類に点線などを指定した場合は、その隙間から見えることがある。)。 ボーダーが0の場合、ボーダー辺とパディング辺は同じ(重なる)となる。
- パディング
- ボーダーの内側で、なおかつ、内容の外側にある領域を「パディング」という。 要素に指定された背景は、この領域に適用される。
- 内容
- 実際にテキストや画像が描画される領域である。 要素に指定された背景は、この領域に適用される。 この内容の幅と高さは、いくつかの要因で決定される。この基本的なルールは以下のとおりである。
- ブロック要素は"widthプロパティ"および"heightプロパティ"が指定されていれば、その寸法。
- 置換要素(※ hr要素やimg要素などのようにテキスト以外のものに置換される要素のこと。)は"widthプロパティ"および"heightプロパティ"が指定されていれば、その寸法。
- 非置換インライン要素では、幅は内容を表現するのに必要な幅で、 高さはフォントサイズを基準とする。
包含ブロック
CSSには、これまで説明してきたブロック以外に「包含ブロック」という考え方がある。 包含ブロックとは、いろいろなボックスを配置する場合、そのサイズや位置を決めるために使う矩形ブロックのことである。
一般にある要素のボックスは、その子孫要素のボックスの包含ブロックとして機能する。 ただし、各子孫要素のボックスは、包含ブロックの内側に閉じ込められる訳ではなく、 その外側にはみ出す(オーバーフロー)場合もある。
包含ブロックの定義は、少し複雑になるが、その主なものをつぎに示す。
- ルート要素に存在する包含ブロックを特に「初期包含ブロック」と呼び、 その領域はブラウザに依存する。
- その他の要素では、"positionプロパティ"の値が"static"または"relative"の場合、最も近い祖先のブロックボックス(※ 他に表のセル、"inline-blockボックス"が該当する。)の内容辺を包含ブロックとする。
- "positionプロパティ"の値が"fixed"の要素の場合、表示域(※ 代表的なものとして、ブラウザのウィンドウ。つまり、実際に表示される領域になる。)が 包含ブロックを設置する。
- "positionプロパティ"の値が"absolute"の要素の場合、位置指定されている(※ "positionプロパティ"の値が"static"以外のもの)最も近い祖先要素によって、つぎの方法で設置される。
- 祖先要素がインライン要素である場合は、書字方向で異なる(※ 書字方向"rtl"については省略する。)。 書字方向"ltr"の場合、 先頭にあるボックスの上パディング辺と左パディング辺、 および最後にあるボックスの下パディング辺と右パディング辺が、 それぞれ包含ブロックの各辺となる。
- 祖先要素がブロック要素である場合は、そのパディング辺が包含ブロックの辺となる。