![[ボックスモデルの概念図]](./image/boxmodel.gif)
HTMLの「ブロック系要素」はブロックボックスという箱、「行内要素」は「行ボックス」という箱によって表示されます。ここでは、CRTに表示を行うWWWブラウザで眺める「ページ」を前提に、CSSによる「ページレイアウト」の基礎知識を説明します。
CSS 1.0仕様は、各要素は箱状の表示領域を持つと規定しています。HTMLの「ブロック系要素」はブロックボックスという箱、「行内要素」は「行ボックス」という箱によって表示されます。
ブロックボックスも行ボックスも、文章や画像など内容そのものの表示領域である「内容ボックス」の周りを、「パディング領域」、「ボーダー」、「マージン領域」が囲む、という構造を持つものだと規定されています。
WWWブラウザの標準設定で「段落は1行空きで各行の行間ゼロ」というような表示になるのは、標準設定ではp要素の上下に1行分のマージンが設定されており、行ボックスの高さ（行の高さ:line height）がフォントサイズと等しくなるよう設定されているからです。これは、スタイル指定によって変更できます。
<style><!--
p {margin-top: 0.5em;
margin-bottom: 0.5em;
line-height: 1.5em;
}
--></style>
この「em」という単位は当該要素中の1文字分の大きさを表すので、上のように指定すれば、各行の高さは1.5文字分（行の間は0.5文字）で、段落の間は0.5文字分となります（隣接する前後のマージンは相殺されます）。
要素には背景色と文字色の指定も行なえますが、CSSでは当該要素の背景色は内容ボックスとパディング領域を塗りつぶし、マージン領域は親要素の背景が透けてみえる状態になると定められています。
CSSのボックスモデルについて、詳しくはCSS 1.0仕様4 整形モデルをご覧ください。
特別な指定がない場合、内容ボックスの大きさは、文章の量や画像の大きさなど、要素の内容に応じて自動的に算出されます。![[不揃いな行の図]](./image/biginline.gif)
このため、ある行の中に行中の他の要素よりも大きい画像等があると、当該行ボックスの高さが変化し、右図のように行が不揃いの状態を引き起こします。
このページのように、図を行から追い出して文章の各行の高さを揃え、文章が図を回り込むようにしたい場合、図を右か左に寄せた「フロート」の状態にします。
<style><!--
img {float: right;}
--></style>
上のように指定すれば、ページ中の全てのimg要素が右寄せのフロート状態になります。
フロート要素について、詳しくはCSS 1.0仕様4.1.4をご覧ください。
フロート状態の要素は、![[変形したマージン領域の図]](./image/margin.gif)
右図のように、当該要素の表示領域に合わせて親要素のマージン領域を変形します。![[複数のボックスをまたいでいるフロート要素の図]](./image/largefloat.gif)
もし親要素のボックスの高さに収まり切らない場合、左図のように、後続のブロックボックスに侵入して行の回り込みを引き起こします。
ここで例えば、「この要素には、左図のようにフロート要素がボックス侵入してくるのは困る」と考えた場合、clearプロパティによって回り込みを解除する指定を行なうと、問題は解決します。
<h3 style="clear: all;">この見出しは回り込まない</h3>
上の指定の場合、当該のh3要素では、直前にある、左右両方向の全てのフロート要素に対する回り込みが回避されます。
フロートを回避するclearプロパティについて、詳しくはCSS 1.0仕様5.5.26をご覧ください。
Webの「ページ」は、紙のページと違って、たいてい巻物状のものとして表示されます。![[キャンバスと表示可能領域の関係]](./image/canvas.gif)
紙のページの大きさは紙の大きさによって決まりますが、Webの「ページ」の大きさは、「ページ」の内容や読み手の環境によって決まります。
実はCSSの仕様には、要素の大きさをピクセル数やポイント数で指定する方法の規定もあります。けれども、読み手の表示装置の大きさは様々でしょうし、WWWブラウザのウインドウの大きさを調節することもあるでしょうから、「この大きさだったらどんな環境でも必ずスクロールなしで表示できる」というようなサイズは、書き手側で事前に算出できるものではありません。どんな環境でも同じ「ページ」を再現させたいというような場合はAdobeのAcrobatなど、HTML+CSS+WWWブラウザ以外の手段を考える方が実用的です。
多くのWWWブラウザの標準設定では、ブラウザの表示可能領域の幅とページ幅と本文表示領域幅は等しい状態で、紙のページで言えば用紙の幅目一杯に文字を印刷しているような具合になっていますけれど、body要素に関してマージン設定を行なうことで、このページのように、ブラウザの表示可能領域と本文表示領域の間に余白を設けることもできます。
紙のページで「用紙」に相当するものがHTML+CSSでは「キャンバス」と呼ばれていて、紙のページの「版面」がHTML+CSSでは「body要素の表示領域」になります。
キャンバスについて、詳しくはCSS 1.0仕様4.5をご覧ください。
Thanks a lot for visits since April 13, 1999.