目次を飛ばして本文へ パン屑リストへ
Powered by Google
目次
様々な種類の箱
ブロック要素とインライン要素、置換要素
箱の構造
マージン
マージンの相殺
パディング
ボーダー

箱の基礎 前編 -箱の種類と構造-

拙者、この章を担当仕る。ぼっくす、ぼっくす と横文字で呼べば大層に聞こえるだろうが、要は「箱」の事でござるよ。しいえすえす というのは、外国産であるが、わざわざ横文字を使えば、それで良いというわけでもないのでござるな。縦ロール氏辺りが好んで使うのでござろうな。('縦ロール氏'=文字と(たはむ)れるの解説を担当している人)この章では、分かりやすく日本語を用いて説明するでござるよ。

概要先に申し述べておかねばならぬが、「箱」とは言うものの、矩形(くけい)の事でござる。奥行きは無いでござるよ。矩形とは、正方形と長方形の総称だとでも思っておいて下され。

様々な種類の箱

箱にも色々な種類があるでござるよ。まずは、それから説明していかなければいけないでござるな。

ブロック要素とインライン要素、置換要素

まずその前に、要素は大きく塊(ブロック)要素行内(インラインレベル)要素の二つに分けられる事をご存知かな。塊要素とは、塊的な要素、行内要素とは、一行以上の行で構成される要素の事でござるよ。・・・と、これでは元よりも分かりづらいでは無いか。

気を取り直して参ろう。まず、以下に示す要素が塊要素でござる。
address、blockquote、center、div、dl、fieldset、form、hx、hr、ol、p、pre、table、ul

そして、次に示す要素が行内要素でござるよ。
a、abbr、acronym、applet、b、basefont、big、br、button、cite、code、dfn、em、embed、font、i、iframe、img、input、kbd、label、nobr、object、q、s、samp、script、select、small、span、strong、sub、sup、textarea、tt、u、var、wbr

もう一つ、序でだから置換要素も紹介しておくでござるよ。
hr、applet、button、embed、iframe、img、input、object、select、textarea

一通り紹介したのでござるが、塊要素、行内要素の違い、オマケの置換要素の特徴などは推測出来たでござるか?

塊要素は必ず内容の前と後ろに改行が入るのだが、行内要素だとそれが無いでござろう。これが大きな違いでござるよ。必ず前後に改行が入るという事は、必ずその要素の周囲を矩形で囲む事が出来るでござろう。ところが、改行の入らない行内要素では、矩形で囲めない場合があり候。実際に、しいえすえす を用いた箱の例を見てみる事にするぞ。

まずは、塊要素同士で箱関連の特性(つまり、プロパティ)を使ったところでござる。

次に、行内要素同士で箱関連の特性を使ったところでござるな。

つまり、塊要素に箱関連の特性を使うと、その要素全体を囲うのだが、行内要素の場合は、行毎に分割された、細長い箱が作られるのでござる。これが、塊要素と行内要素の大きな違いでござる。塊要素は箱を縦に並べていくのに対して、行内要素は箱を横に並べている点も違っているでござるな。まだ色々と違いがあるのだが、それは追ってお話し致そう。

さてさて、最後に置換要素の説明でござるが、これはぱっと見て気が付い者もござろう。すべて、テキストでは無い何かに置き換えられるものでござろう。属性などを用いて大きさが定められた、普通のテキストとは違ったものでござろう。これらも、しいえすえす を使う際に、少々特殊な扱いを受けるのでござる。覚えておいて下され。

フロートボックス

この さいと の製作者の ばあど 氏が勝手に考案するものに候。拙者も同感でござるな。この箱は、行箱(インラインボックス)と共存可能な特殊な塊箱(ブロックボックス)なのでござる。詳細は、'float'をご参照下され。

箱の構造

さて、箱の種類と特徴については、一通り理解して頂けたでござるかな。ここからは、やっと箱の構造についてでござるぞ。とは申しても、解説の図はたった一つしか必要無い、とても簡単なものでござる。まずはその図を見るでござるよ。

うわわ、また横文字だらけでござるな。流石、西洋渡来の仕様でござる。

という事なのだが、どこかで見覚えがあるでござろう。これはつまり、セル一つ分の表のようなものでござるよ。また、

と呼ぶでござる。

塊要素(ブロック要素)では一般に内容辺までの部分をコンテナブロックと呼ぶでござるよ。木構造の根にあたる要素(つまり、HTMLで言うhtml要素やbody要素)の形成するコンテナブロックは、特に初期コンテナブロックと呼ばれているでござる。このコンテナブロックの高さと幅は、それぞれ'width''height'特性で指定するでござるよ。指定しない場合は、ゆぅえぇ が自由に指定して良いそうでござる。

そうそう、一般に、単に「コンテナブロック」と呼ぶ場合は、その箱を含んでいる、親要素のコンテナブロックの事を指し候。間違えぬよう、注意して欲しいでござる。

内容領域の高さと幅を、決めてしまう事も出来るのでござるが、その話はハンドゥリング・ボックスに譲るでござる。

後編へ


page top
最終更新日:2003年09月29日
Copyright © 2002-2004 ばあど All Rights Reserved.