Section 6 : 要素の大きさ

 繰り返し述べているように,CSS では要素は長方形の“ボックス”によって整形される。ここでは,ボックスのもっとも内側の要素の内容に当たる部分の大きさを指定する方法と,それによって整形にどう影響が生じるかを見てみよう。

要素の大きさ

 要素が作るボックスは,外側からマージン,枠,パディング,そして要素の内容,という層状構造になっていることを Step forwrad CSS の Section 12 で説明した。そのうち最初の 3 つについてはその大きさ(幅)を指定する方法を紹介した。

 CSS には当然要素の内容の大きさを直接指定する属性もあるわけで,これは,ブロック要素と置換要素に適用され,継承されない

width: (長さ または パーセンテージ);
height: (長さ);

 このほかにキーワード auto を指定することができる。この値が初期値であり,通常は要素は適当な大きさで配置されるのである。パーセント指定は width 属性でのみ可能で,100% は“その外側の要素の width”でとる。いずれの属性にも,負の値を与えることはできない。

 width および height 属性は置換要素,すなわち画像やオブジェクトに指定する場合が多い。固有の大きさを持っているオブジェクトの場合,両属性がいずれも auto なら,その(固有の)大きさになる。もし,片方だけが指定されたら,他方は縦横比を変えず拡大・縮小した値に設定される。たとえば,横 400px,縦 300px の画像の width 属性を 200px に指定すると,height 属性が無指定または auto なら横:縦=4:3 が保存されるように縦は 150px に縮小される。

 先に述べたように,ブロック要素にもこの属性は指定できる。整形の結果,指定された大きさに収まらない場合はその要素にスクロールバーがつくこともあり得る。

<P STYLE="width: 50%;">要素の幅をいっぱいに表示できる場合の 50% に指定しています。</P>
<P STYLE="width: 80%;">要素の幅をいっぱいに表示できる場合の 80% に指定しています。</P>

要素の幅をいっぱいに表示できる場合の 50% に指定しています。

要素の幅をいっぱいに表示できる場合の 80% に指定しています。

 ブラウザは,置換要素以外の height 属性はサポートしていなくてもよいことなっている(つねに auto と解釈される)。

 IE4  width および height 属性は,ブロック要素には <DIV> のみに適用される。インライン要素の <SPAN> にも有効となっている。

 IE3  width,height 属性はサポートされていない。

ブロック要素の水平整形

 要素のボックスの幅は,次のように定義された。

(box-width)=(margin-left)+(border-left-width)+(padding-left)+(width)+(padding-right)+(border-right-width)+(margin-right)

 回り込み指定がなされていないブロック要素は,ボックスの幅が,その外側の要素の width に一致しなければならないという制約がある。ただし,左右に回り込み要素がある部分は,その幅を差し引く。

 ボックスの幅を決める 7 つの値のうち,margin-left,width,margin-right の 3 つは auto を指定できる。7 つすべての値が指定されてはいない状況では,この auto を使って幅を合わせるが,7 つの値すべてを指定されたら,どのようにボックスの幅を合わせるのだろうか。

 これらボックス属性の auto のふるまいと幅あわせを解説しよう。

 先ほどの width 属性を使った例を考えてみよう。margin-left,margin-right の初期値は 0 だから,width の指定 50% あるいは 80% で 3 つの属性に auto はひとつもない。したがって margin-right は auto に書き換えられ,幅と合うようにマージンをとっている。

 次の例と比較してほしい。

<P STYLE="margin: 0 auto; width: 50%;">要素の幅をいっぱいに表示できる場合の 50% に指定しています。</P>

要素の幅をいっぱいに表示できる場合の 50% に指定しています。

 IE4/5, NN4  width を auto 以外,margin-left,margin-right を auto にすると margin-left が 0 に指定される。

 IE3  width 属性がサポートされていないことに再び触れておく。