Home > 実践 Web Standards Design p.129

実践 Web Standards Design p.129

  • Last Modified: 2008年11月30日 11:08

このページは、実践 Web Standards Design が第 1 刷・第 2 刷から第 3 刷となる際に、仕様自体の変更によって内容を修正した分について公開しています。

3.4/視覚整形フォーマット

ボックスモデル

次の章からはいよいよ実践的なCSSデザインの解説に入りますが、もう少しだけ基本的なところを見ておきましょう。 Media GroupsがVisualであるCSSでは、視覚整形フォーマットの概念が非常に深く関わってきます。

まず、ボックスモデルという概念についてです。 (X)HTML文書の要素ツリーはそれぞれボックスモデルという矩形の領域を持ち、それらが配置されることによってCSSによるビジュアルデザインが形作られます。

ボックスモデルは「内容領域」「パディング」「ボーダー」「マージン」の4つの領域で構成され、最も内側の領域が「内容領域」となり、最も外側の領域が「マージン」となっています。

URL CSS 2.1 - 8.1 Box dimensions
http://www.w3.org/TR/CSS21/box.html#box-dimensions
ボックスモデル
内容領域
要素ツリーの内容自体が持つ領域で、テキストや画像などがここにあたります。なお、widthプロパティやheightプロパティの値は内容領域に対して適用されます。
パディング
内容領域とボーダーの間の部分にあたる部分です。パディング辺はボーダーに内接しますので、パディングの幅が0であれば内容領域辺とパディング辺は同じものになります。なお、ボックスモデルの背景はパディングにも適用されます。

Home > 実践 Web Standards Design p.129

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top