CSSコーディングの最初のステップ「ボックスモデル」とは
CSSコーディングの最初のステップ「ボックスモデル」とは
CSSレイアウトで頻繁に使われる考え方の1つに、ボックスモデルがあります。各エリアを「ボックス（箱）」として考え、見出しや文章、画像といったそれぞれの要素を「コンテンツ（中身）」とみなすモデルです。
ボックスの属性には、「padding（余白）」「margin（ボックスの外側の余白）」「border（枠線）」「width（コンテ ンツの幅）」「height（コンテンツの高さ）」の5つがあります。CSSコーディングでは、このボックスの属性を数値指定することで、レイアウト調整 を行います。
ここで間違えやすいのが、widthやheightはコンテンツ（中身）のサイズという点です。ボックスのサイズのことではありません。例をあげましょう。例えば、widthに200px、borderに5px、marginに20px、paddingに20pxと指定すると、ボックス全体 の横幅が270pxになります。
また、margin、padding、borderは上下左右を個別に指定することもできます。ボックスの外側の上余白を指定する場合には margin-top、他にも左余白のmargin-left、右余白のmargin-right、下余白のmargin-bottomと個別指定も可能 です。
ボックスモデルを実践する
それでは、ボックスモデルを実践するために、Webページ内の1ブロックを枠囲みで作成してみましょう。リスト1の「見出し＋本文」を1つのボックス例としてCSSでレイアウトしてみましょう。
見出し部分は
タグで囲み、本文は
タグを使用しています。このボックスを囲むタグに
もう一方の
がコンテンツ（中身）になります。
見出しにはフォントサイズmediumを指定して、文字色は#0000FFを指定しました（リスト3）。
タグにはフォントサイズsmall、文字色は#333333のグレーです（リスト4）。
結果は図3になります。注意して欲しいのは、CSS2の仕様では、幅（width）と高さ（heihgt）はコンテンツ（中身）の数値です。
今回、borderやpadding、marginを指定したので、最終的なボックスのサイズはwidth（200px）+margin（20px）×2（左右）+padding（20px）×2（左右）+border（5px）×2（左右）で計290pxとなります。
関連記事
バックナンバー
この記事の筆者
筆者の人気記事
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。
