レイアウトに重要なボックスと要素について理解する

ボックスと要素

ボックス ボックスの構成 ブロックレベル要素とインライン要素 ボックスの配置

スタイルシートでレイアウト・デザインを行う上で欠かせないのがボックス、ブロック、インラインです。
ブラウザによって扱いが若干ながら異なるのが現在の最大点の問題と言えるでしょう。

ボックス

スタイルシートを使ったWebページは、ボックスと呼ばれる四角い枠の集まりで構成されます。
ページ全体も一つの箱と考えることができます。箱の中に自由に箱を入れてレイアウトを構成するのです。
--

ボックスの構成

ボックスは、内容領域、バッディング、ボーダー、マージンから成り立っています。
内容領域は、文字や画像などを扱う、バッディングは、内容領域の余白、ボーダーは、枠、マージンは、外辺の余白です。

ボックスの問題

CSSを取り扱う上で最も厄介な問題としてブラウザによってボックスの取り扱い方が微妙に異なることです。
特にIE6のCSSの解釈は、バグが多いことで知られています。
例えば、本来は、内容領域がボックスをはみ出す場合は、ボックスの外に表示されるのに対して、
IE6では、ボックスを拡大して表示しようとするため、レイアウトがIE6で崩れてしまう原因となるのです。 -

内容領域（本文）

テキストや画像などが表示される領域です。width、heightプロパティを使って大きさを指定できます。

width: 130px; /* 幅 */
height: 80px; /* 高さ */

バッディング(内余白)

内容領域の中にある余白です。内容とボーダーまでのサイズを指定します。
背景色や背景画像は、バッディング部分にも適応されます。

padding-top: 20px;    /* 上 */
padding-bottom: 20px; /* 下 */
padding-left: 20px;   /* 左 */
padding-right: 20px;  /* 右 */

ボーダー（枠）

バッディングの外枠となる部分がボーダーです。
ボーダーは、一本線、二重線、点線などがあり、太さ、色を指定することができます。

/* 上 */

border-top-color: #FF00FF;     /* 色 */
border-top-style: solid;       /* スタイル*/
border-top-width: 8px;         /* 太さ */
/* 下 */
border-bottom-color: #FF00FF;
border-bottom-style: solid;
border-bottom-width: 8px;
/* 右 */
border-right-color: #FF00FF;
border-right-style: solid;
border-right-width: 8px;
/* 左 */
border-left-color: #FF00FF;
border-left-style: solid;
border-left-width: 8px;

マージン（外辺余白）

マージンは、ボーダー（枠）の外側の余白です。
マージンには、背景色や背景画像は、適応されません。
イメージとしては、箱と箱の間に隙間を作るようなものです。

margin-top: 20px;    /* 上 */
margin-bottom: 20px; /* 下 */
margin-right: 20px;  /* 右 */
margin-left: 20px;   /* 左 */

マージンをそれぞれ20ピクセルで指定した例

内容領域

ブロックレベル要素とインライン要素

はじめにHTMLにおける要素とは、何か明確にしておきましょう。
HTMLにおける要素は、開始タグから終了タグまでを囲んだものを示します。
<input>タグなど終了タグの無いものは、それだけで一つの要素になります。
また要素の中にいくつもの要素が階層的に入り組むことによって一つのページを構成しています。
HTMLでは、主にブロックレベル要素とインライン要素に分けて考えられます。 -

ブロックレベル要素

見出し、段落などに使われる要素です。
最近、主流のCSSレイアウトは、ブロック要素であるdivタグを使って文章の骨格を作っています。

要素の分類	タグ
見出し	<h1>～<h6>
段落	<p>
リスト	<ul> <ui> <li> <ol> <dl> <dd>
ブロック引用	<blockquote>
横罫線	<hr>
アドレス	<address>
整形	<pre>
テーブル	<table> <tbody> <td> <tr> <th>
フォーム	<form>
グループ	<div>