ボックスモデルについて

CSS の基本中の基本ボックスモデル

まずは基本中の基本、CSS でのボックスモデルからおさらいです。とっても今更なんですけど、CSS でのレイアウト作りをする上で、これが基本になっています。なのでやっぱりここから紹介していきますね！
CSS では、各要素が生成する四角い領域のことを、ボックスモデルと呼んでいます。各要素が生成する四角形の領域 … これはブロックレベル要素に限りません。インライン要素にだってボックスが作られています。例えばインライン要素である a要素にボーダーを指定してあげれば、やっぱり四角い線が引かれますよね！そこに四角いボックスモデルがあるからなんですよね。

そしてボックスモデルは以下の要素で構成されています。

内容（コンテンツ）
ボーダー（border）
内容とボーダーの間の余白（padding）
ボーダーと他のボックスとの間の余白（margin）

Webデザイン – CSS を学んだ人なら、もう何度も目にしていると思いますが、ボックスモデルを図にすると以下のようになります。

また、要素に指定した背景は、ボーダーの内側に敷きつめられ、マージンの領域には指定できませんよね！上の図を見ると、まるでブロックレベル要素の事を説明しているみたいですけど、インライン要素だってこの図に当てはまります。インライン要素の場合は、上下のマージンは効きませんが、基本的には同じですね！まずはこのボックスモデルを、しっかり頭に入れておきましょう！

①包含ブロックとは

ボックスモデルの次は、包含ブロックについて見ていきます。包含ブロック … 少し難しい言葉ですねー。さっきのボックスモデルでできたボックス … このボックスの配置は包含ブロック（コンテナブロック）というものによって決められます。

●サンプルhtml [div]
[p]
こんにちは！
[/p]
[/div]

「div要素によって作られた包含ブロック」

上記の図 … 子要素である p 要素の配置場所や大きさって、何によって決まってるんでしょう？

答えは簡単ですね！位置は親要素である div のパディングの内側に配置されますよねー。そして p 要素の幅も、親要素である div のパディングの内側いっぱいに広がります（width を指定していない場合のお話です）。

②子孫要素の位置と大きさは、包含ブロックが決めています

こんな風に見てみると、p 要素の配置場所や大きさは、p 要素自身ではなくて、div 要素が決めている事になります。上の図で言うと、斜線の部分ですねー！この部分をdivが作り出した包含ブロック（コンテナブロック）と言います。

包含ブロックとは、子孫要素を配置する事ができる領域のこと。逆の言い方をすれば、ある要素の配置場所や大きさは、祖先の要素が作り出した包含ブロックによって決まる … ということですね！包含ブロックは、パディングがある場合はパディングの内側、無い場合はボーダーの内側 … と一致します。

このことは、感覚的に分かっていた事ですけど、この包含ブロックという言葉 … 実はとっても大事なんです。この後、色んな配置ルールを見ていきますけど、何度もこの包含ブロックという言葉が出てきます。なので、ここでしっかり覚えておきましょう！

※包含ブロックが、子孫要素の大きさを決めている … と書いてありますが、その要素自身に width を指定してない場合です。

③包含ブロックは、必ずしも親要素が作るとは限らない

上記の図では、p 要素の直近の親要素である div 要素によって、包含ブロックが作られていましたよねー。でも包含ブロックは、必ずしも直近の祖先要素によって作られる … という訳ではありません。

例えば固定配置、position: fixed を指定した場合は、ウインドウが包含ブロックになりますし、position: absolute を指定した場合は、position: static 以外の直近の祖先要素が包含ブロックを作る事になります。position プロパティーについては後述しますが、包含ブロックは必ずしも親要素が作るとは限らないということを覚えておきましょう！

※子孫要素の位置と大きさは、包含ブロックが決めています！

④包含ブロック内で配置されるボックスの種類

さて、今度は包含ブロックの中で配置される側のボックスのお話です。包含ブロックの中で配置されるボックスは、大きく分けるとブロックボックスとインラインボックスのふたつに分けられます。

ブロックボックスと、インラインボックス … これはもうピンときますね！包含ブロックの中で、ブロックレベル要素は自動的にブロックボックスを生成し、インライン要素はインラインボックスというものを生成します。

「ブロックボックスとインラインボックス」

同じボックスという名前が付いてますが、その性質が違うのはご存知の通りです。ブロックボックスは、「独立したかたまり」として、どんどん下にレイアウトされていきますよね。それに対してインラインボックスは「行内の一部」として配置されていきます…。（すごい当たり前の事を言ってますね … わざわざ記事にする必要があるのかしら … と思ってきました w）でも、まずはコレが基本形ですよね！

⑤補足：匿名ボックスとは

上記ではブロックレベル要素が作るブロックボックスと、インライン要素が作るインラインボックスというものを見てきました。でも HTML のマークアップによっては、特に要素を指定していない部分もあるはずです。要素を指定していない部分 … ちょっと下のマークアップを見てくださいね！

[div]
[p]これは p要素の中にあります。[/p]
これは div要素の直下にあります。
[/div]

こんな場合の時は、ブロックボックス（p 要素の部分）とインラインボックス（テキストの部分）が混在している … というわけではないそうです。「これは div の直下にあります。」のテキストの部分は、匿名ブロックボックスというボックスが自動的に作られているんだそうです。

図にするとこんな感じ…。

[p]
ここは普通のテキストです。[em]ここはem要素です。[/em]ここは普通のテキストです。
[/p]