CSS:ボックスのおはなし

[ kz ]
[ http://miniturbo.org/ ]
[ shono@miniturbo.org ]
[ http://gaiax.co.jp/ ]

この資料についての説明と謝罪

この資料は公開時より24時間内において他サイトの内容を無断で使用しておりました。
これに関して、kzは以下のエントリにおいて説明及び謝罪をしております。

社内勉強会の資料についての説明及び謝罪

はじめに...

今回のお話は、XHTMLの

ブロックレベル要素
インライン要素

と、似ておりますが違う話です。

ご注意ください

みなさん！

CSSを書いたことがありますか？

みなさん！

「あれ？なんでこれカラム落ちしてんだ？」

って思いをしたことがありませんか？

みなさん！

「floatとかpositionとかわからないし...」

といった悩みを抱えていませんか？

みなさん！

IEはいらない子

と思っていませんか？

ご安心ください

この時間でボックスの概念を理解すれば、もう怖いものなしです！

floatも楽々使いこなし、xml宣言を書いてもIEを憎むことがなくなります！

~~おまけに背も伸びます~~
~~ダイエットとしても効果的です~~
~~かわいい彼女も出来ます~~

では本題へと進みます

順路→

CSSには色々なボックスがあるよ！

CSSには色々なボックスがあります

代表的なものとしては...

ブロックボックス
インラインボックス

などがあります

でも、これだけじゃないんです

実は他にも様々なボックスがあります

コンパクトボックス
ランインボックス
マーカーボックス
匿名ブロックボックス
匿名インラインボックス

などがあります

これらのボックスは、displayプロパティで決まる

今までに述べたボックスは、displayプロパティによって指定できます。

(ただし、匿名(ブロック|インライン)ボックスは除く)

div {
   display: block;
}

<div>divはブロックボックスです</div>

1個ずつ追っていきます

順路→

ブロックボックス

displayプロパティがblock, list-item, tableである要素が描くボックスをブロックボックスといいます。
要素全体を囲む1つの長方形として描かれます。

hoge

fuga

piyo

インラインボックス

displayプロパティがinline, inline-tableである要素が描くボックスをインラインボックスといいます。
要素の内容を行ごとに囲む1つ長方形として描かれます。折り返しによって分割されます

いんらいんぶろっくは、ふくすう行にまたがってもちゃんと囲むんだぜー？しかも途中できょうせい改行とかいれても
こんな感じでちゃんと囲むんだぜ？すっげーだろ！

コンパクトボックス

displayプロパティがcompactである要素が描くボックスで、以下の条件のとき特殊なインラインボックスを生成します。

コンパクトボックスの次のボックスが回り込みまたは絶対配置のされていないブロックボックスである。
コンパクトボックスをインラインボックスと仮定して整形したとき、1行に収まり(途中に強制改行などがない)、かつ、その幅が後続するブロックボックスの左マージン幅以下である。

Let's begin CSS -- 4.7より転載

コンパクトボックス

こんな感じです。

コンパクト: で、ハイトなワゴン

コンパクトボックスは、Opera, Safariのみ実装しています。

※dl, dt, dd にて擬似的に似せています。

ランインボックス

displayプロパティがrun-inである要素が描くボックスで、以下の条件のとき特殊なインラインボックスを生成します。
ランインボックスは、Opera, Safari, Mac IEが実装しています。

ランインボックスの次のボックスが回り込みまたは絶対配置のされていないブロックボックスである。

<p style="display: run-in">ここがランイン</p>
<p>ランインをずっとラインインだとおもってすごしてた</p>

ここがランインランインをずっとラインインだとおもってすごしてた

Let's begin CSS -- 4.7より転載

マーカーボックス

割愛 ;)

ここまでおｋですか？

順路→

匿名ブロックボックス

<div>
    らんらららんらららんららん
    <p>りんるんれんろんほげふがぴよ</p>
</div>

このとき、整形の定義づけを容易にするために、"らんらららんらららんららん"の周りにボックスがあることにします。これが匿名ブロックボックスです。

匿名ブロックボックスは、自分を含んでいる非匿名ブロックボックスからプロパティの値を継承します。

匿名インラインボックス

<p>はー<em>ひふへ</em>ほー</p>

"ひふへ"はem要素が生成しているインラインボックスです。"はー"と"ほー"はp要素が生成しています。このとき、"はー"と"ほー"は匿名インラインボックスとして扱われます。

匿名インラインボックスは、親のブロックボックスからプロパティの値を継承できるだけ継承します。

ここまでいいですか？

順路→

行ボックス

アル晴レタ日ノ事

魔法以上のユカイが

限りなく降りそそぐ

このとき、各行に

アル晴レタ日ノ事

魔法以上のユカイが

限りなく降りそそぐ

こんなボックスが出来ています。これが行ボックスです。

行ボックス

つまり、1行を構成する複数のボックスが含まれている矩形領域を行ボックスといいます。

行ボックスにはこんなきまりがあります。

行ボックスは、常にその内部にあるすべてのボックスを含むのに十分な高さを持つ
行ボックス同士は決して重ならない
行ボックスの(左辺|右辺)とその包含ブロックの(左辺|右辺)は重なっている(しかし、間に浮動体が挟まる場合、その限りではない)
1行に含まれるインラインボックスの幅の合計が行ボックスの幅より小さくなる場合、その水平位置はtext-alignで決まる

包含ブロック

ある要素が生成したボックスは、その子孫ボックスの包含ブロックとして機能します。

つまり...

<div>
    <p>シャンプーはエッセンシャル派です</p>
</div>

このとき、div要素が生成したブロックボックスはp要素が生成したブロックボックスの包含ブロックとなります。

また、body要素はルート要素であるhtml要素の矩形領域を包含ブロックとする初期包含ブロックとして機能します。

包含ブロック

包含ブロックはこうやってきまります

ルート要素: キャンバスの原点に固定された表示域のサイズの長方形（＝初期包含ブロック）
通常フロー 浮動ボックス position:relative: 直近のブロックレベル要素、インラインブロック、もしくはテーブルセルの内辺
position:absolute: 直近の布置ボックス（positionがsitaticでない要素）のパディング辺。該当するボックスがなければ、初期包含ブロック
position:fixed: 表示域によって形成される長方形エリア

CSS2.1（仮）- ボックスのタイプと包含ブロックより転載

包含ブロック

特にこんな場合に意識しましょう :(

position: absolute;を使うとき。たとえばleft:100pxなら該当ボックスの左マージン辺を包含ブロックの左辺から100px離す
floatを使うとき。たとえば右フロートはその右マージン辺が先行するフロートのマージン辺か包含ブロックの右辺に接するまで右に寄せられる
marginを使うとき。たとえば通常フローのボックスの左マージンは前後にフロートや絶対配置ボックスがあっても包含ブロックの左辺からの距離である

コンテナブロック（包含ブロック）とはより転載

包含ブロック

こんな等式もあるよ

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + (もし在ればスクロールバーの幅) = 包含ブロックの幅

ボックスモデル

最後にボックスモデルについておさらいしましょう！

CSS2では、このボックスモデルを基にブロックの幅や高さ、配置を決めます

IEの後方互換モードでは、(width|height)にmarginまでを含めてしまうので注意が必要です

ということで

以上でボックス関連についてのおはなしを終わります

どうでしたか？

簡単でしょう？

おわび

浮動とか絶対配置の話もしたかったのですが、資料作成できませんでした。ごめんなさい。

またどこかで話せたらいいですね :D

参考資料

おしまい