ボックスについて。
CSSにおけるボックスの概念に関して解説します。
ボックスとは。
CSSにおいては、視覚系のユーザエージェントでは各要素はボックスと呼ばれる領域に納められます。
ボックスを構成するもの。
ボックスは以下のもので構成されております。
- 本体
- ボックスに収められる、要素の内容本体です。背景のプロパティが適用され、非置換インラインボックス以外では、幅と高さの概念を持ちます。
- パディング
- 要素の内容本体周囲の空間で、上下左右にそれぞれ 0以上の幅が指定出来ます(不要なら幅を0とします)。
パディングには本体と同様に背景のプロパティが適用されます。
- 枠線(ボーダ)
- 要素に引かれる枠線で、上下左右にそれぞれ 0以上の幅が指定出来ます(不要なら幅を0とします)。
枠線(ボーダ)には本体と同様に背景のプロパティが適用されます。
- 破線や二重線など、枠線の一部に線が引かれない部分がある場合、その部分が背景となります。
- 余白(マージン)
- 枠線より外側の空間で、上下左右にそれぞれ幅が指定出来ます(不要なら幅を0とします)。
- パディングと違って、負の値も指定出来ます。
この領域には背景のプロパティは適用されません(透明扱い)。
- また、枠線(ボーダ)の周囲には輪郭線(アウトライン)を描く事も出来ます。
CSSで定められているボックスのタイプ。
CSSでは、ボックスには大きく分けて四つのタイプがあります。
ブロックレヴェルボックス。
ブロックレヴェルボックスとは、主にブロックレヴェル要素を治めるのに用いるボックスです。
通常、ブロックレヴェルボックスは、特に指定されない限り、上から下に並べられていきます。
- 特に指定される場合とは、フローティングやポジショニングにより表示位置が決められる場合を指します。
また、ブロックレヴェルボックスには以下の特徴があります。
- 横幅や高さの概念があります。
- 上下左右に余白を取る事が出来ます。
匿名ブロックレヴェル要素。
例えば、HTMLで以下のような記述がされていたとします。
<ul><li>(テキスト1)<p>…</p></li></ul>
このとき、<li>要素には内容として(テキスト1)
と<p>要素が含まれております。
通常、テキストはインライン要素となりますが、インライン要素とブロックレヴェル要素が並ぶと言うのは表現上あり得ないので、CSSでは(テキスト1)
は「マークアップされていないブロックレヴェル要素」と見なします。
このように文脈により「マークアップされていないブロックレヴェル要素」と見なされる生テキストを匿名ブロックレヴェル要素と言います。
インラインボックス。
インラインボックスは、主にインライン要素を収めるのに用いるボックスです。
ブロックレヴェルボックスと違って上から下に並べず、書字方向に従って連結されていきます。
入り切らない場合は適宜折り返されます。
また、インライン要素では、幅や高さの概念が無く、余白に関しても、左右の余白はボックスの先頭と末尾に存在しますが、上下には余白はありません。
置換インライン要素。
画像などオブジェクトに置き換えられるインライン要素には、通常のインライン要素と違って以下の特徴があります。
- 入り切らなくても折り返しにはなりません。
- 横幅や高さの概念があります。
- 上下にも余白を取る事が出来ます。
匿名インライン要素。
マークアップされていない生テキストは通常インライン要素ですが、CSSにおいてはこの生テキストも当然インラインボックスに入れられているものとしなければなりません。
このようにマークアップされていない生テキストを、CSSでは特に匿名インライン要素と言います。
- 但し、他のブロックレヴェル要素と並んでいる生テキストは匿名ブロックレヴェル要素となります。
コンパクトボックス。
コンパクトボックスは、CSSにより実現出来る特別なボックスです。
コンパクトボックスもブロックレヴェルボックスの一種ですが、
- 後続するブロックレヴェルボックスがあり、
- 且つそれはフローティングやポジショニングで表示位置を決められていない
場合に限り、以下のような扱いになります。
- 後続するブロックレヴェルボックスの書字方向先頭側(左から書く場合は左側)余白に当該コンパクトボックスを埋め込める幅がある場合
- 当該コンパクトボックスは後続するブロックレヴェルボックスの余白に埋め込まれます。
- 後続するブロックレヴェルボックスの書字方向先頭側(左から書く場合は左側)の余白に当該コンパクトボックスが入り切らない場合
- 当該コンパクトボックスは通常のブロックレヴェルボックスと同様の配置となります。
ラン・インボックス。
ラン・インボックスも、CSSにより実現出来る特別なボックスです。
ラン・インボックスもまたブロックレヴェルボックスの一種ですが、後続するブロックレヴェルボックスがある場合には以下のような扱いになります。
- 後続するブロックレヴェルボックスがフローティングやポジショニングで表示位置を決められていない場合
- 当該ラン・インボックスは後続するブロックレヴェル要素の一番目のインラインボックスであるかのように埋め込まれます。
- あくまでもマークアップ上は隣接するブロックレヴェル要素同士であるにも拘らず、先行するラン・インボックスは後続するブロックレヴェル要素に一番目のインライン要素として含まれているように描かれると言うのが特徴です。
- 後続するブロックレヴェルボックスがフローティングやポジショニングで表示位置を決められている場合
- 当該ラン・インボックスは通常のブロックレヴェルボックスと同様の配置となります。