Section 9 : 要素の配置(1)

 属性や記述に関する説明がひととおり済んだところで,要素の配置について復習しながらまとめていこう。

フォーマッティングモデル

 繰り返し強調すると,CSS での要素の配置は要素が長方形のボックスに収まるというフォーマッティングモデルに基づいている。要素の display 属性の値が none でない限りはこれにしたがう。

 このボックスは,要素の内容が表示される領域の外側をパディングマージンに包まれている。同じ“余白”をとる部分であっても,マージンは“枠の外”で背景が適用されない一方,パディングは“枠の中”で背景が適用される。border-style が double であれば,二重線の間にも背景が適用される。

 マージン,枠およびパディングの幅はそれぞれ margin,padding,border-width などの属性で指定することができる。要素自身の大きさは,ブロック要素と置換要素では width と height で指定する。マージンなどを含めてボックスの大きさ(幅,高さ)を定義する。

 要素はいくつかの種類があり,それによってボックスの形や配置が異なっている。

ブロック要素のフォーマッティングモデル

 display 属性に block を与えられた要素は前後に改行を伴うブロック要素である。ブラウザは,一般に,<Hn><P> などをブロック要素と定義することが多い。display 属性が list-item である箇条書きの項目要素も基本的にブロック要素である。ブラウザは,一般に,<LI> を箇条書きの項目とする。float 属性left または right である回り込み要素は,display 属性が none でない限りブロック要素と同様に扱われる。

 ブロック要素のボックスは要素の内容を囲む 1 つの長方形である。

 非回り込みブロック要素は Step forward CSS の Section 12 でみたように垂直マージンの圧縮が起こる場合がある。これは複数の非回り込みブロック要素のマージンが直接(枠やパディングを隔てず)隣り合っている場合に起こる。その場合のマージンの幅は,該当するマージンがすべて負でない場合,最大値がとられる。負の値が含まれている場合は負でない最大のマージン(すべて負の場合は 0 とみなす)から負の最小(絶対値が最大の)マージンを差し引く。すなわち,ある場所に隣り合っている垂直マージンを m1,m2,...,とすると,

(とられるマージン)=max(0, m1, m2, ...)+min(0, m1, m2, ...)

である。

 回り込み要素の場合はこの“マージンの圧縮”は起こらない。また,いかなる水平マージンでも起こらない。

 非回り込みブロック要素のボックスの幅は,その外側の要素(以下,親要素という)の幅,つまり width の値に合わせられる(回り込み要素がある場合はそれを考慮する)。ボックスの幅を決定する属性は margin-left,border-left-width,padding-left,width,padding-right,border-right-width,margin-right の 7 つだが,そのうち auto を指定できる margin-left,margin-right,width の 3 つを使って幅が調整される。

 通常は width が auto になっていて,要素の幅で合わせるが,Section 6 で解説したように 3 つの属性の指定のされかたによって auto のふるまいは変わってくる。

1 つのみが auto ならばそれを用いて調整する。2 つ以上で width が auto ならば auto が指定されたマージンは 0 とする。margin-right,margin-left の 2 つのみが auto ならば,要素をセンタリングする。ひとつも auto がなければ,margin-right を auto に書き換える。

 固有の大きさを持つ置換ブロック要素は,width が auto ならばその値は要素固有の幅になり,“指定されたもの”と見なされるので,事情が異なる。width が auto で margin-left,margin-right が指定された場合はひとつも auto がない場合に相当し,margin-right が auto に設定し直される。margin-left,margin-right の初期値はいずれも 0 なので,このことから特に指定がない場合,置換ブロック要素は左寄せで配置されることがわかる。

 本チュートリアルでは,CSS1 仕様書中の記述に合わせて“親要素の幅”としているが,実際これではうまくいかないケースがある。そこで,CSS2 では収容ブロック(簡単には,ある要素から親要素をたどっていったときに,最初に見つかるブロック要素)を定義して,これを幅合わせの基準にする。以降の同様の議論でも,一般に“親要素”より“収容ブロック”を考えたほうが完全な議論になる。

 ブロック要素のうち,箇条書きの項目になっているものは先頭にリストマーカを伴い,list-style などの属性が適用される(この“先頭”はつねに左側とは限らない。たとえばヘブライ語,アラビア語では文字が右から左へ流れることになるので(これは HTML の属性で指定される),“先頭”は右側になる)。

 回り込み要素は通常のテキストの流れの外側に配置され,Section 4 にあげた規則に従ってできるだけ上へ,そして float 属性に指定した方向へ寄せられる。

 回り込み要素の扱いはブロック要素に準じるが,垂直マージンの圧縮は起こらず,幅あわせもなされない。しかし,テキストを含む回り込み要素の width 属性が auto の場合は注意が必要である。

 回り込み要素のボックスが“いっぱいに寄せられる”のはマージンが負でなく,要素のボックスの幅が親要素(収容ブロック)の幅に比べて小さい場合を想定しているわけで,マージンが負の場合は親要素のパディング領域にあるいはその外に出たりすることもあれば,大きすぎてはみ出す場合もあり得る。