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

Posted at 4:05 pm in

マージンやパディング、ボーダーなどCSSの説明図CSSでのBOXのレイアウトデザインについて紹介します。
将来的にCSSは、これからの主流(もうなってる?)になるそうですが、古いWEBブラウザでは対応できないモノもある為、テーブルを使ったり、テーブル+CSSといったWEBサイトも見かけます。
ここでは、テーブルは使わず、ボックスだけのレイアウトデザインをしていこうとい思います。
HTMLを使ってテーブルでレイアウトしているとボックスの考え方とテーブルの考え方がごっちゃになってしまい、ワケがわからなくなってしまうので(私だけ?)テーブルの事はいったん忘れてボックスにとりかかりましょう。
ボックスとは、その名の通りハコですね。そう四角いハコです。
ボックスの考え方は、ハコの中にテキストや画像を入れて、デザインするというものです。
ボックスは、ボックスの中身、パディング、ボーダー、マージンに分かれます。
あっ、後、背景領域もありますね。
文章だけだと少しわかりづらいんで、画像で説明します。
それぞれの領域は数値で指定できるので、様々なデザインに変化させることが出来ます。

テキスト等表示領域からボーダーまでの範囲(ハコの内側)がパディング。 ボーダーはハコのふちどりの様なモノ。ハコの外側から他のハコまで、他のハコが無い場合はブラウザのスミまでの距離がマージンになります。 この範囲を数値で指定する事ができます。(ゼロにすることもできます。)
CSSを使ったレイアウトデザインはボックスの配置がカギとなります。
ボックスの配置を自由自在にできる様になれば、デザインの幅がグンとひろがるでしょう。

Written by admin on 10月 26th, 2010