HITP 広島工業大学専門学校

ホームページの基礎（2. CSS 編）

← 2.8 テキスト  CSS総目次  2.10 ボックスモデル（マージン） →

  1. 2.9 ボックスモデルの概要
    1. 2.9.1 要素の分類によるボックスモデルの違い
      1. 2.9.1.1 ブロックレベル要素のボックスモデル
      2. 2.9.1.2 インライン要素のボックスモデル
      3. 2.9.1.3 匿名ボックス
    2. 2.9.2 ボックスの構造
    3. 2.9.3 包含ブロック

2.9 ボックスモデルの概要

CSSでは，文書ツリーにある各要素ごとに「ボックス」と呼ばれる矩形領域を作成します。ここでは，このボックスの概要について説明します。

2.9.1 要素の分類によるボックスモデルの違い

文書ツリーにある要素は，を大きく「ブロックレベル要素」と「インライン要素」に分類されます。この要素の分類によって，ボックスの考え方が異なるので注意が必要です。

2.9.1.1 ブロックレベル要素のボックスモデル

「ブロックレベル要素」の代表的な要素名としては，p，見出し（h1，h2，h3，h4，h5，h6），リスト（ul，ol，dl） などがあります。これらの要素が生成する矩形領域（ボックス）を「ブロックボックス」と呼びます。

例えば，つぎのようなブロックレベル要素が定義されているとき，

<h1>見出し</h1>
<p>
CSSでは，文書ツリーにある各要素ごとにボックスと呼ばれる矩形領域を作成する。
ここでは，このボックスの概要について説明する。
</p>
<p>
文書ツリーにある要素は，いくつかの種類に分類することができる。
まずは，ブロック要素とインライン要素について説明する
</p>

つぎのようなブロックボックスを考えます。

ブロックボックス

CSS総目次 | ページ先頭に戻る

2.9.1.2 インライン要素のボックスモデル

「インライン要素」の代表的な要素名としては，a，em，strongなどがあります。これらの要素が生成する矩形領域（ボックス）を「インラインボックス」と呼びます。

例えば，つぎのようなインライン要素が定義されているとき，

<p>
<em>CSSでは，文書ツリーにある各要素ごとにボックスと呼ばれる矩形領域を作成する。</em>
<strong>ここでは，このボックスの概要について説明する。</strong>
</p>

つぎのようなインラインボックスを考えます。

インラインボックス

CSS総目次 | ページ先頭に戻る

2.9.1.3 匿名ボックス

まずは，以下の例のボックスについて考えてみましょう。

<div>
  div直下のテキスト
  <p>p要素内のテキスト</p>
</div>

この例の場合，一番外側がdiv要素のブロックボックスであり，その内側のp要素もブロックボックスです。しかし，"div直下のテキスト"の部分は，特定の要素がありません。このようなときは，「匿名ボックス」というブロックボックスが存在するものとしてCSSでは考えます。

匿名ブロックボックス

同様に，以下の例のボックスでは，インラインレベルでの匿名ボックスを考えます。

<p>この段落では<em>強調部分</em>があります</p>

匿名インラインボックス

CSS総目次 | ページ先頭に戻る

2.9.2 ボックスの構造

ボックスが矩形（四角）の領域を持つことは，すでに説明したとおりです。では，このボックスがどのような構造を持っているかについて説明しましょう。

ボックスモデルでは，４つの領域を持ち，各領域の周辺を「辺」と呼びます。そのため各領域はそれぞれ４つの辺を持つことになるわけです。

ボックスモデルの構造

マージン
ボックスのもっとも外側にある余白を「マージン」と呼びます。この領域には，背景色が適用されず常に透明（transparent）です。また，隣接するボックス間の垂直マージンは，隣接するマージン同士を結合してひとつのマージンとして取り扱う「マージンの相殺」が発生します。(※ 水平マージンは相殺されません。)相殺のルールは，かなり複雑なので，ここでは基本的なルールのみを示しめします。
  • お互いのボックスに指定されたマージンが共に正の場合は，その最大値をマージンとします。
  • お互いのボックスに指定されたマージンが正負混合の場合は，その最大値と最小値を足した値をマージンとします。
  • お互いのボックスに指定されたマージンが共に負の場合は，その最小値をマージンとします。

なお，マージンが０の場合，マージン辺とボーダー辺は同じ（重なること）になります。

ボーダー
マージンの内側で，なおかつ，パディングの外側にある領域を「ボーダー」と呼び，「枠」を意味します。 この領域は，背景の上に指定された色で描画されるため，透明以外の色では，背景が見えません(※ ただし，枠の種類に点線などを指定した場合は，その隙間から見えることがあります。)。ボーダーが０の場合，ボーダー辺とパディング辺は同じ（重なること）になります。
パディング
ボーダーの内側で，なおかつ，内容の外側にある領域を「パディング」と呼びます。要素に指定された背景は，この領域に適用されます。
内容
実際にテキストや画像が描画される領域です。要素に指定された背景は，この領域に適用されます。この内容の幅と高さは，いくつかの要因で決定されます。この基本的なルールは以下のとおりです。
  • ブロック要素は「widthプロパティ」および「,strong>heightプロパティ」が指定されていれば，その寸法になります。
  • 置換要素(※ hr要素やimg要素などのようにテキスト以外のものに置換される要素のことです。)は「widthプロパティ」および「heightプロパティ」が指定されていれば，その寸法になります。
  • 非置換インライン要素では，幅は内容を表現するのに必要な幅で， 高さはフォントサイズを基準とします。

CSS総目次 | ページ先頭に戻る

2.9.3 包含ブロック

CSSには，これまで説明してきたブロック以外に「包含ブロック」という考え方があります。包含ブロックとは，いろいろなボックスを配置する場合，そのサイズや位置を決めるために使う特別な矩形ブロックのことです。

一般にある要素のボックスは，その子孫要素のボックスの包含ブロックとして機能します。ただし，各子孫要素のボックスは，包含ブロックの内側に閉じ込められる訳ではなく，その外側にはみ出す（オーバーフロー）場合もあります。

包含ブロックの定義は，少し複雑になりますが，その主なものをつぎに示しておきます。

  1. ルート要素に存在する包含ブロックを特に「初期包含ブロック」と呼び， その領域はブラウザに依存します。
  2. その他の要素では，「positionプロパティ」の値が"static"または"relative"の場合，最も近い祖先のブロックボックス(※ 他に表のセル，"inline-blockボックス"が該当します。)の内容辺を包含ブロックとします。
  3. 「positionプロパティ」の値が"fixed"の要素の場合，表示域(※ 代表的なものとして，ブラウザのウィンドウ。つまり，実際に表示される領域になります。)が 包含ブロックを設置します。
  4. 「positionプロパティ」の値が"absolute"の要素の場合，位置指定されている(※ "positionプロパティ"の値が"static"以外のもの)最も近い祖先要素によって，つぎの方法で設置されます。
    1. 祖先要素がインライン要素である場合は，書字方向で異なります(※ 書字方向"rtl"については省略する。)。書字方向"ltr"の場合，先頭にあるボックスの上パディング辺と左パディング辺，および最後にあるボックスの下パディング辺と右パディング辺が，それぞれ包含ブロックの各辺となります。
    2. 祖先要素がブロック要素である場合は，そのパディング辺が包含ブロックの辺となります。
    3. もし，これらの祖先要素が存在しない場合は，初期包含ブロックを参照します。

CSS総目次 | ページ先頭に戻る

(C)Copyright 2010 HIROTAKA.YAMASHITA. HITP 広島工業大学専門学校. All Rights Reserved.