ウェブサイト作成

ボックスモデル

CSSでブロックレベルの要素は、ボックスモデルと呼ばれる矩形(長方形)の領域を作ります。ボックスはテキストや画像などの内容領域を持ち、その周囲には更にパディング、ボーダー、マージンという順に周辺領域を持ちます。

ボックスの領域

width: 150px;
margin: 30px;
padding: 10px;
border: 20px solid orange;
background: pink;

CSSでブロックレベルの要素は、ボックスモデルと呼ばれる矩形(長方形)の領域を作ります。ボックスはテキストや画像などの内容領域を持ち、その周囲には更にパディング、ボーダー、マージンという順に周辺領域を持ちます。

右の重なった枠がマージン、パディング、ボーダーの領域が視覚的にわかるように色をつけてあります。赤色部分がマージン、オレンジ色部分がボーダー、ピンク色部分がパディングです。

マージン(margin)

ボックスの最も外側にある赤色部分をマージンと呼びます。
要素に指定された背景はこの領域には適用されず、常に透明になります。右の例では内容領域にはピンク色を指定しています。赤色は親ボックス(ボックスが入れ子になって重なっている)の背景が透けて見えているのです。マージン領域に色が付いているわけではありません。

またマージンの特徴として隣接するブロック間の垂直マージンは時により相殺されます。

ボーダー(border)

パディングの外側にある枠の領域部分をボーダーと呼びます。例ではオレンジ色部分にあたります。

ボーダーはすべて,ボックスの背景の上に重ねて描かれます。従ってこの領域の背景は,色が透明で見えるときか,スタイルが点線・破線・二重線のときに隙間から覗き見えるだけです。

下記が実際にボーダーに破線を指定した例となります。

width: 150px;
margin: 30px;
padding: 10px;
border: 20px dashed orange;
background: pink;

ボーダーが太すぎてとても破線には見えませんね(笑)
イメージはつかんでいただけるかと思います。

ボーダーにはいくつか種類があります。
ボーダー(border)にて紹介しています。

Internet Explorerでこのページを見ている人は上の説明を読んであれ?と思ったかもしれません。Internet Explorerは現在の正規最新バージョンであるInternet Explorer7で見てもバグ(プログラムミス)のため表示がおかしいのです。当然ながらバージョン6でも同様です。このバグについてはInternet Explorerのボーダー解釈の間違いで説明しています。

パディング(padding)

ボックスモデル

ボーダーと内容領域の間にある空間の領域をパディングと呼びます。例ではピンク色の部分になります。

内容領域はパディングと同色(例の場合はピンク色)となりますが、例ではパディング領域をわかりやすくするために背景色のついたボックスを重ねてあります。

今回の例では右図のように実際には3つのボックスで構成されています。中央の階層が今回の説明しているボックスとなります。

内容領域(content area)

内容領域は文章や画像が入ります。例では白色部分となります。

内容領域は横幅(width)と高さ(height)を指定することができいます。内容領域の横幅を指定しなければ親ボックスの内容領域一杯となります。