ウェブデザインをスタイルシートできれいなホームページにしよう

ホーム＞ボックスの考え方

BOXでデザインするという考え方

CSSでのBOXのレイアウトデザインについて紹介します。
将来的にCSSは、これからの主流（もうなってる？）になるそうですが、古いWEBブラウザでは対応できないモノもある為、テーブルを使ったり、テーブル+CSSといったWEBサイトも見かけます。
ここでは、テーブルは使わず、ボックスだけのレイアウトデザインをしていこうとい思います。
HTMLを使ってテーブルでレイアウトしているとボックスの考え方とテーブルの考え方がごっちゃになってしまい、ワケがわからなくなってしまうので（私だけ？）テーブルの事はいったん忘れてボックスにとりかかりましょう。
ボックスとは、その名の通りハコですね。そう四角いハコです。
ボックスの考え方は、ハコの中にテキストや画像を入れて、デザインするというものです。
ボックスは、ボックスの中身、パディング、ボーダー、マージンに分かれます。
あっ、後、背景領域もありますね。
文章だけだと少しわかりづらいんで、画像で説明します。
それぞれの領域は数値で指定できるので、様々なデザインに変化させることが出来ます。
BOXの説明図テキスト等表示領域からボーダーまでの範囲（ハコの内側）がパディング。ボーダーはハコのふちどりの様なモノ。ハコの外側から他のハコまで、他のハコが無い場合はブラウザのスミまでの距離がマージンになります。この範囲を数値で指定する事ができます。（ゼロにすることもできます。）
CSSを使ったレイアウトデザインはボックスの配置がカギとなります。
ボックスの配置を自由自在にできる様になれば、デザインの幅がグンとひろがるでしょう。
次項「idセレクタとクラスセレクタ」