CSSレイアウト
レイアウトの前に・・・
CSSレイアウトを本格的に始める前に、必要な知識を身に付けましょう。
ブロック要素・インライン要素
ブロック要素・インライン要素という言葉は、何度かHTML講座、CSS講座の方に登場してきたかと思います。
要素（タグ）は、大きく分けるとブロック要素とインライン要素に分類することができます。
インライン要素の代表は、spanが挙げられるでしょう。spanは、何も意味を持たないインライン要素ですね。つまり、<span>～</span>で文字を囲んでも、何も効果はありません。スタイルシートと組み合わせて使うための要素です。
ブロック要素の代表は、divが挙げられるでしょう。divは、何も意味を持たないブロック要素です。<div>～</div>で囲むと、div要素の前後に改行が入るだけです。こちらもスタイルシートと組み合わせて使います。
両方の特徴を対比しながら説明していきます。
インライン要素の特徴は、
- 「幅」・「高さ」の概念を持たない
- ブロック要素をネスト（入れ子に）することはできない
- インライン要素をネスト（入れ子に）することができる
- 要素の前後に改行が入らない
ブロック要素の特徴は、
- 「幅」・「高さ」の概念を持つ
- ブロック要素・インライン要素をネスト（入れ子に）することができる
- ブロック要素の幅は親要素の幅いっぱいに広がる（デフォルトでは）
- 要素の前後には改行が入る
divとspanで囲んだ文字列を用意して比べてみてください。それぞれ、背景色を指定しておけば、分かりやすいと思います。試しに、widthやheightを指定してみると、違いが良くわかると思います。
さて、インライン要素については、もう説明することは無いでしょう。span以外のインライン要素には、<a>、<em>、<strong>、<q>などなど・・・インライン要素は、意外と少ないです。これらは・・・文字列に意味付けをするためのタグという共通点があります。強調・リンク・引用など。
ブロック要素は、まだ説明することがたくさんあります。（下で説明してあります。）div以外のブロック要素は、<p>、<h1>～<h6>、<ul>、<ol>、<dl>、<table>、<blockquote>、<hr>、<address>などなどなど・・・ブロック要素の方が多いかも。
幅・高さ・マージン・パディング・ボーダー
幅・高さ・マージン・パディング・ボーダー・・・これらの関係を理解しましょう。また、これらの動作はInternetExplorerと他のブラウザ（Firefox、Opera、Netscapeなど）で動作が違います。このことは、後で説明します。とりあえず、読み進めてください。
CSSの定義では、上の図のような関係になっています。
widthとheightは文字を書くことのできるスペースの大きさを指定します。padding, border, marign は、widthとheightで大きさを指定したボックスの周りに作られることに注目してください。
なにも、一つのブロック要素にwidth・height・padding・border・marginの全てを指定する必要はありませんよね。widthとheightを指定して、padding, border, margin を指定しない場合を考えてみましょう。
この場合、幅・高さのみをしているわけですから、要素はパディング・ボーダー・マージンを持ちません。そのため、単純にwidth, heightで指定した大きさの要素が表示されます。（サンプルは背景色が指定されていると考えてください。）
では、逆に幅・高さを指定せずにパディング・ボーダー・マージンを指定した場合はどうなるか考えてみましょう。
このとき、幅・高さはブロック要素のデフォルトの動作になります。ブロック要素に幅・高さを指定しなかった場合は、幅は親要素いっぱいに、高さは含んでいる文字（要素）の高さにあわせて変化します。
サンプルの親要素はbodyであると考えてください。（bodyにはパディング・ボーダー・マージンを指定していない）
