XHTML/CSS・トップ | CSS基礎知識・目次

●要素の領域としての構造

 CSSにおいて、要素は自身が四角い領域を持つと考えられます。(四角い領域をボックスと言い表されることがあります。)四角い領域の構造をわかりやすいように色を付けて、画像で解説してみます。


■色別による要素の四角い領域の構造

要素の構造


種類 説明
黄色 マージン(margin)領域 余白のことで、背景色は付けられない
枠線(border) 枠線の種類、太さ、色を指定できる
パディング(padding)領域 空間を指定できるが、背景色は指定できず
内容(content)領域 通常は、テキストが流し込まれる

 写真では色を付けていますが、実際には独自の背景色が付けられない領域があります。マージン(margin)領域とパディング(padding)領域です。マージンは無色透明で、下の要素の背景色が表示されます。下の要素がbody要素(ページ全体)の場合は、body要素で指定した背景色(または、背景画像)がそのまま表示されます。パディング領域は、内容領域と同じ背景色が表示されます。そのとき、背景色を指定していない場合は、やはり、下の要素で指定した背景色が表示されます。

 マージン(margin)領域、枠線(border)、パディング(padding)領域は指定しないと生じません。ただし、ブラウザはデフォルトでマージン領域とパディング領域を持っています。(ないものもありますが)それぞれの実際の表示のされかたはブラウザの種類によって異なっています。

 ブラウザの種類によって、幅(width)と高さ(height)の受け止め方が違うと言われています。幅と高さを指定したときにCSSの仕様上の幅と高さは内容領域を指しています。ところがブラウザによっては、パディング領域と枠線までを幅と高さとして認識するというものです。(幅と高さを指定するときの注意点はプロパティの使い方で解説します。)

※注意: 空要素であり、幅や高さの指定できない非置換インライン要素であるbr要素などは一見、四角い領域を持たないように見えますが、マージン(margin)を指定し、Netscape(Ver.7.1)のブラウザで見ると、ちゃんと反映されています。CSSでは、すべての要素は自身の四角い領域を持つと考えられています。または、四角い領域に描かれると考えられています。

XHTML/CSS・目次 | CSS基礎知識・目次

Copyright (C) 2005-2008 http://www.xml.vc/