初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL4. CSSにおけるBOX概念とは?

CSSで要素を設定すると、下の図のようにBOXと呼ばれる箱が形成されます。BOXは、以下の4つの部分から構成されています。

１．要素内容そのものが表示される中央の領域 ２．内容領域を囲む枠線 ３．パディング＝枠線から内側へのスペース ４．マージン＝枠線から外側へのスペース

このことからも分かるように、BOXはテーブルにおける各セルがテーブルから切り離されて個別に扱えるようになったものと考えることが出来ます。（c.f. 初級篇1. Vol4.テーブルの基本 その2 ★ 罫線とスペースに関する設定）

従って、そのそれぞれを画面上で任意の位置に配置することが出来る他、もちろんセルと同じように背景やサイズも指定できます。また、枠線に関しては、セルでは四辺を個別に設定することが出来なかったのに比べ、BOXでは四辺それぞれを個別に扱えるため、例えば右辺のみ表示させたり、それぞれの幅を変えたりすることも可能で、線のデザインについても点線、破線、二重線、額縁効果など多様な中から選ぶことが出来ます。

ただ、こうした詳細な設定はブラウザによって解釈が違う場合があり、それゆえ現時点（2006年）においてはBoxレイアウトは定番のテーブル・レイアウトに比べて表示の安定度が低いということは言えるでしょう。例えば、Boxの高さや幅を指定した場合、仕様上でこれは内容領域の大きさを指定するものであるにも関わらず、IE5.5以前のブラウザではこのサイズがパディングと枠線まで含んだ大きさとして解釈されてしまいます。また、IE6.0以降であっても、ドキュメントタイプの記述がなかったり、不完全であったりすると互換モードが適用されるため、表示が変わってくる場合があります（cf. Column3.ドキュメントタイプについて）。IEの普及率が高いことを考えればこれはなかなか問題で、クロスブラウザを考えると、あまり大きく枠線やパディングを取らないように注意する必要が生じると思います。

高さと幅の仕様上の定義

IE5.5以前では高さと幅の設定は 図のように表示に反映する

ブラウザのバージョンが進むにつれ、CSSの基本的な仕様にのっとった解釈がされるようになってゆくと思われますので、今後こうした問題は徐々に改善されてゆくでしょうけれども、新しいバージョンが出たからといって全世界のユーザーの環境が一気に変わるわけではないことを考えると、まだしばらくは頭の痛い問題であることは確かです。

では、次の章からは、さまざまな部分の詳細設定の仕方について解説してゆくことにしましょう。

初級篇2.VOL3.スタイル設定の書式・その2 <<

>> 初級篇2.VOL５.Boxに関する設定その1