1と2の間辺りからはじめるCSS講座レイアウトの基本、ボックス

もくじ
目次を飛ばして本文へ
博士H:

今回からはプロパティについて解説していくぞい。
CSSの解説は、大半がプロパティについて
なのじゃ。

今回はその基本と言える、
ボックス関連の解説をするじゃ。

生徒A:

ボックスですか?
ってことは、立体まで描けるんですか!?
すごいですねー。

博士H:

いやいや、
ボックスとはいうものの、
実はただの矩形(くけい)
なんじゃ。

生徒B:

なんでー、アホくさ。

生徒A:

くけい? って、なんですか??

博士H:

四角の事じゃよ。
正方形や長方形のことじゃ。
四角と呼ばれる資格があるヤツ
全部ではないのじゃ。

生徒B:

はいはい、寒いから。

博士H:

つれないのぉ。
やっぱり経済的不況のあおりが強いのかのぉ。

生徒B:

いや、それは絶対関係ないから(キッパリ)。

ただいま博士が落ち込んでいます。
しばらくお待ちください。
博士H:

えぇ、で、ボックスとゆうのは、
こんな風な構造になっとる。

ボックスの図説
博士H:

ボーダー(黒い部分)は、
そのまま境界線のこと、
パディング(灰色の部分)は、
内容(文字や画像など)と境界線(ボーダー)の間の部分、
マージンは、
ボーダー(境界線)の外側の余白のことじゃ。

図ではパディングは灰色になっておるが、
何もしなければ透明じゃ。
マージンは常に透明なのじゃ。

生徒A:

それって、マス一つだけの表みたいなものですか?

博士H:

ふーむ、そういう見方もありかのぅ。

ここでもう一つ、
HTMLについて、おカタい部分の勉強じゃ。

生徒B:

え〜〜

博士H:

まぁそう言わずに、付き合うのじゃ。

HTMLの要素は、大きく
ブロック要素、
インラインレベル要素
の二つに分けられる
のじゃ。

これらに当てはまらない要素もあるのじゃが、
この分類は見栄え上の話じゃからして、
表示に関係しない要素は、含まれないのじゃな。

非推奨でない要素だけをピックアップすると、
ブロック要素
address、blockquote、div、dl、form、hx、hr、
noframes、noscript、ol、p、pre、table、ul

インラインレベル要素
a、abbr、acronym、b、big、br、
cite、dfn、em、i、img、input、
label、map、object、q、script、select、small、
span、strong、sub、sup、textarea、tt、u

大体以上かの。

生徒B:

はっはぁ、
ブロック要素ってのは
前後に改行が入る要素、
インラインレベル要素ってのは
それがない要素

だろ。

博士H:

なかなか良い線いってるぞい。

この二つの違いは、実はボックスの置き方にあるんじゃ。
下の図を見て、何が違うか分かるかの。

ブロックとインラインの違いの図説
生徒B:

ああ、
ブロックはボケと突っ込みで、
インラインはその前置きがある
ってことだな。

博士H:

・・・・・。

博士H:

天然やってんじゃないわよ。

うーんと、ブロックは
縦に並べてあって

一方、インラインは
横に並べて置かれていってある

くらいかな。

博士H:

うむ、その通りじゃ。

ブロックは
ボックスは全体を囲う形で
分割されることがなくて

一方、インラインは
ボックスは一行分の長いものが作られ、
行が変われば分割される

と付け足しておくと、完璧(かんぺき)じゃな。

次回はお待ちかね、関連のプロパティの解説じゃ。

<セレクタというもの[P] ボックスのプロパティ[N]>

▲見出しへ戻る
最終更新日:2004年04月02日
Copyright © 2001-2003 ばあど All Rights Reserved.