ぱそおーるCSS講座

ボックスについて


スタイルを設定すると、各要素（タグ）ごとに四角形の領域が生成されます。
この領域の事をボックスと呼びます。
ボックスは４つの部分で構成され、各部分ごとに色や余白を設定する事が出来ます。
HTMLタグでいえばテーブルに近いですが、より幅広いデザインのページを作成出来ます



content（内容）
HTMLタグを使って書き込む文字や、画像などを表示する領域です。

padding（余白）
contentに対して上下左右に余白を設定する事が出来ます。
content（内容）からborder（枠線）までの余白の事をいいます。

border（枠線）
content（内容）を囲む枠線を設定する事が出来ます。
上下左右に、太さや色、スタイルも自由に設定出来ます。

margin（マージン）
隣接するボックスとの間に余白を設定します。
隣接するボックス同士の間隔を開けるためのものです。常に透明色です。

画像を使って試してみましょう。

同じ画像を３つ並べてみました。
うさぎちゃん達にスタイルを設定してみます。


枠線を10ピクセルに設定して、それぞれに色を変えてみました。


margin（マージン）を5ピクセルに設定してみました。


四方の枠線の色を変えてみました。


四方の枠線のスタイルを変えてみました。
このように色々な組み合わせを使う事で、自由度の高いデザインが実現出来ます。
詳しい使い方は後で説明します。
HOMEへ