レイアウトの基本、ボックス
![博士H:](../style/hakase.gif)
今回からはプロパティについて解説していくぞい。
CSSの解説は、大半がプロパティについて
なのじゃ。
今回はその基本と言える、
ボックス関連の解説をするじゃ。
![生徒A:](../style/aAmaze.gif)
ボックスですか?
ってことは、立体まで描けるんですか!?
すごいですねー。
![博士H:](../style/hAse.gif)
いやいや、
ボックスとはいうものの、
実はただの
![生徒B:](../style/bFuzake.gif)
なんでー、アホくさ。
![生徒A:](../style/aHatena.gif)
くけい? って、なんですか??
![博士H:](../style/hakase.gif)
四角の事じゃよ。
正方形や長方形のことじゃ。
四角と呼ばれる資格があるヤツ
全部ではないのじゃ。
![生徒B:](../style/bAosuzi.gif)
はいはい、寒いから。
![博士H:](../style/hKomaru.gif)
つれないのぉ。
やっぱり経済的不況のあおりが強いのかのぉ。
![生徒B:](../style/seitob.gif)
いや、それは絶対関係ないから(キッパリ)。
ただいま博士が落ち込んでいます。
しばらくお待ちください。
![博士H:](../style/hakase.gif)
えぇ、で、ボックスとゆうのは、
こんな風な構造になっとる。
![ボックスの図説](box.gif)
![博士H:](../style/hakase.gif)
ボーダー(黒い部分)は、
そのまま境界線のこと、
パディング(灰色の部分)は、
内容(文字や画像など)と境界線(ボーダー)の間の部分、
マージンは、
ボーダー(境界線)の外側の余白のことじゃ。
図ではパディングは灰色になっておるが、
何もしなければ透明じゃ。
マージンは常に透明なのじゃ。
![生徒A:](../style/aSee.gif)
それって、マス一つだけの表みたいなものですか?
![博士H:](../style/hakase.gif)
ふーむ、そういう見方もありかのぅ。
ここでもう一つ、
HTMLについて、おカタい部分の勉強じゃ。
![生徒B:](../style/bAosuzi.gif)
え〜〜
![博士H:](../style/hakase.gif)
まぁそう言わずに、付き合うのじゃ。
HTMLの要素は、大きく
ブロック要素、
インラインレベル要素
の二つに分けられるのじゃ。
これらに当てはまらない要素もあるのじゃが、
この分類は見栄え上の話じゃからして、
表示に関係しない要素は、含まれないのじゃな。
非推奨でない要素だけをピックアップすると、
ブロック要素は
address、blockquote、div、dl、form、hx、hr、
noframes、noscript、ol、p、pre、table、ul
インラインレベル要素は
a、abbr、abbr、b、big、br、
cite、dfn、em、i、img、input、
label、map、object、q、script、select、small、
span、strong、sub、sup、textarea、tt、u
大体以上かの。
![生徒B:](../style/bNiyari.gif)
はっはぁ、
ブロック要素ってのは
前後に改行が入る要素、
インラインレベル要素ってのは
それがない要素
だろ。
![博士H:](../style/hakase.gif)
なかなか良い線いってるぞい。
この二つの違いは、実はボックスの置き方にあるんじゃ。
下の図を見て、何が違うか分かるかの。
![ブロックとインラインの違いの図説](blockinline.gif)
![生徒B:](../style/bSee.gif)
ああ、
ブロックはボケと突っ込みで、
インラインはその前置きがある
ってことだな。
![博士H:](../style/hKomaru.gif)
・・・・・。
![博士H:](../style/aAnger.gif)
天然やってんじゃないわよ。
うーんと、ブロックは
縦に並べてあって、
一方、インラインは
横に並べて置かれていってある。
くらいかな。
![博士H:](../style/hakase.gif)
うむ、その通りじゃ。
ブロックは
ボックスは全体を囲う形で
分割されることがなくて、
一方、インラインは
ボックスは一行分の長いものが作られ、
行が変われば分割される
と付け足しておくと、完璧(かんぺき)じゃな。
次回はお待ちかね、関連のプロパティの解説じゃ。