ボックス

 
  
ホーム > CSS2 Note > CSS2の概要 > ボックス

ボックス

HTMLなどマークアップ言語の各要素は、ボックスと呼ばれる四角い領域を生成します。この領域は、次の4つの部分から構成されています。

内容領域 (content area)


テキストや画像などの、要素の内容が表示される領域です。この領域の幅と高さは、widthプロパティとheightプロパティで指定することができます。

パディング (padding)


内容領域とボーダー間の空間部分をパディングと呼びます。要素に対して指定された背景はこの領域にも描画されます。

ボーダー (border)


要素の周りに表示させることができる枠の部分を示します。要素に指定された背景は、この領域にも適用されることになっているため、ボーダーを透明(transparent)にすると背景が透けて見えるようになります。

マージン (margin)


ボックスの一番外側のマージン領域を示します。要素に対して指定された背景は、ここには表示されず、背景は常に透明となります。
ボックス
インライン要素もボックスを生成しますが、テキストの行の高さを調整する目的でマージンボーダーパディングheightプロパティなどを指定しても行の高さは何ら影響を受けません。テキストの行の高さを指定するにはline-heightプロパティを用います。

 

widthプロパティとheightプロパティ適用範囲の注意点



Windows版のIE4.0までのブラウザ、IE6.0以降の互換モード、Mac版のIE5の互換モード、Opera7.0以降の互換モード(*1)などでは、widthプロパティとheightプロパティの適用される範囲が、W3Cの定める標準的な仕様とは異なっています。仕様において内容領域の幅や高さを設定するはずのものが、これらの「互換モード」においては内容領域の外側にあるボーダーパディングを含んだ領域の幅や高さとして設定されます。特にボーダーを太くしたり、パディングを広く取る場合などには、W3Cの仕様に沿った正しい表示を行うブラウザとはまったく異なる表示結果となるので、注意が必要です。「標準モード」では内容領域の幅と高さを示します。

*1 現行のOpera9においては改善されています(2007/01/10)。
widthとheightの注意点
DOCTYPE Doctypeスイッチ
互換モード ほぼ標準モード 標準モード
 
 

マージンの相殺(そうさい)

上下に並んだ複数のブロック要素のボックス間においてはマージンの相殺(そうさい)が行われ、隣接するマージンの最大値が相殺後のマージンとして用いられます。正負の値が混在する場合には、正の最大値と負の最小値を足した値がマージンとなります。正の値が存在しない場合には、隣接するマージンの最小値がマージンとして用いられます。
マージンの相殺
ただし、floatプロパティを指定されたボックス(浮動体)および、positionプロパティによって絶対配置、相対配置されたボックスにおいては、マージンの相殺は行われません。
 

包含ブロック

ツリー構造のルート要素(*2 html要素など)は初期包含ブロック(initial containing block)として機能します。初期包含ブロックの幅や高さは、それぞれルート要素のwidthプロパティ、heightプロパティを参照し、値が「auto」である場合にはブラウザなどのUAがその値を決定します。ルート要素にpositionプロパティやfloatプロパティを設定することはできません。(*3)

*3 CSS2の仕様書には、包含ブロックの基点に関する明確な記述はありませんが、通常、包含ブロックの左上が座標0の点になります。

初期値(position:static)および相対配置(position:relative)の要素の場合
ルート要素(*2 html要素など)以外で絶対配置(あるいは固定配置)がなされていない要素の場合、最も近い祖先ブロック要素の内容領域が包含ブロックとなります。

固定配置(position:fixed)の要素の場合
固定配置の要素の場合、表示領域(スクリーン上のウィンドウなど)が包含ブロックとなります。

絶対配置(position:absolute)の要素の場合
絶対配置の要素の場合、positionプロパティの値がstatic以外である最も近い祖先要素が包含ブロックとなります。
  1. 該当する祖先要素がブロック要素である場合は、そのパディング領域が包含ブロックとなります。
  2. 該当する祖先要素がインライン要素である場合は内容領域が包含ブロックとなります。
     (文字方向が左→右の場合、左上が座標0の点になります。右→左の場合、右上が基点となります)
該当する祖先要素が存在しない場合、ルート要素(*2 html要素など)の内容領域が包含ブロックとなります。

*2 CSS2におけるルート要素とは、親要素を持たない要素をあらわします。ツリー構造におけるルート要素とは、HTML、XHTMLにおいては、html要素(document root element)のことを指します。

関連項目: position top right bottom left positionのレンダリング positionと包含ブロックの関係
 

ページボックス

印刷などのページ単位の出力に対しては、ページボックスという特別なボックスを使用します。ページボックスは、そのページで出力されるボックスを配置することのできる「ページ領域」と「マージン」から構成され、パディングボーダーはありません。ページボックス自体のサイズやマージンを指定する場合には、@pageを使用します。

マージン


ページボックスにおいては、フォントの概念を扱わないので[em][ex]といった単位は使用できません。また、%値は、通常ボックスにおいては常に横幅の値を参照しますが、ページボックスにおいては、上下のマージンは高さに対する割合となり、左右のマージンは横幅に対する割合になります。

ページ領域


ページボックスは初期包含ブロックとなるので、ページの大きさを指定するsizeプロパティに%値を指定することはできません。また、マージン同様、フォントの概念を扱わないので[em][ex]といった単位は使用できません。

ページボックス

関連項目: @page size marks page-break-before page-break-after page-break-inside page orphans widows
 
関連項目:
トップページ CSS2 Note ページトップ
 2005/09/21発行 2009/09/01更新