|    | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  |

CSSのボックスモデル

CSSにおけるボックスモデルを理解する

ボックスモデル

ボックスモデルは4つの領域で構成される

ボックスモデル概念図CSSで Web ページのスタイルをデザインする時に使われるのがボックスモデルで、その概念図は右図の通り、四角形の領域を表す。

各ボックスは 「内容領域」 または 「コンテント」(content) を持ち、その周囲に 「パディング」( padding、内部の余白 ) 、「ボーダー」( border、枠線 )、「マージン」( margin、外部の余白 )という領域を持つ。

この4つの領域の境界を 「辺」(edge) と呼ぶ。4つの領域は、上下左右の4辺に分けて表現することもある。

ボックスの(width)は、左右マージン、左右ボーダー、左右パディングと内容領域幅の合計となる。

また、ボックスの高さ(height)は上下マージン、上下ボーダー、上下パディングと内容領域の高さの合計である。

互換モードでは width プロパティや height プロパティの解釈に注意する

width プロパティに指定された値は、コンテント領域の横幅として適用されるが、一部の旧式ブラウザや互換モードにおいては、左右のパディングやボーダーまでを含めて width プロパティの値を適用する。

同じことが縦幅の height プロパティにも言える。

この違いについては、これらの関係を紹介している標準と互換表示の違いのページを参照のこと。

マージン領域は常に透明として扱われる

ボックスと背景の関係ボックスに背景を指定した場合、内容領域、パディング、ボーダーの各領域には、指定した背景が適用されるが、マージンの領域は常に透明として扱われる。

よって、ボックスに指定した背景はボーダー領域の背後まで適用され、その外側のマージン領域には、親ボックスに指定した背景が透過される。

ページトップへ

垂直方向のマージンは相殺される

垂直方向に隣接したマージンは相殺されるマージンの相殺とは、一定条件のもとで、隣接する垂直方向(上下)のマージンが結合して単一のマージンを形成することを言う。水平方向(左右)のマージンは相殺されない。

右図は垂直方向に隣接するボックス(div.shita-box)のマージン値(1em)が、数値の大きい上のボックス(div.ue-box)のマージン値 (3em) で相殺されることを示している。すなわち、両方のボックス間のマージンが 1+3=4 の 4em ではなく、大きい方のマージン 3em となる。

マージン値がすべて正の場合、数値の大きいほうが適用される。正と負の値の組み合わせの場合は、両方を合算した値が適用される。また、すべて負の値の場合は、もっとも小さい(絶対値が最大のもの)マージンが適用される。

親ボックスとの間でのマージン相殺の図また、子ボックス (div.ko) が親ボックス (div.oya) に含まれていて分離されていない場合、親ボックスとの間でも相殺が生じる。

右図は数値の大きな子ボックスのマージン( 2em )で親ボックスのマージンを相殺することを示している。

ページトップへ

ホームページ・ビルダーでボックスレイアウトを指定する

「スタイルの設定」 ダイアログ [レイアウト] タブを開いて指定する。

この [レイアウト] タブ ページでは、マージン、ボーダーの幅、スタイル、色、パディングを上、下、左、右の 4 方向に対して指定することができる。

[マージン] グループ

マージン・グループ[マージン] スピン ボックス/リスト ボックス

ヒントのアイコン

margin-top : auto 指定の場合

マージン上(margin-top) に自動 (auto) と指定した場合、auto の値は使用されるブラウザに依る、となっている。

当該要素における縦方向のプロパティ (上下の余白, 枠線, パディング及び高さなど) から導き出される適切な位置を取るとのことだが、その位置の計算方法は仕様で明確に定められているが、かなり複雑なので、紹介を取りやめます。

[ボーダー] グループ

ボーダー指定[幅] スピン ボックス/リスト ボックス

[スタイル] リスト ボックス

[色] リスト ボックス

ボーダースタイル

ボーダースタイルの設定4方向とも、幅 1em、オレンジ色で指定したボーダーはスタイル別に以下のように見える。マージンは 0.5em、パディングは 1.0em を指定している。

なし (none)
不可視 (hidden)
点線 (dotted)
破線 (dasshed)
実線 (solid)
二重線 (double)
くぼみ (groove)
浮き出し (ridge)
インセット (inset)
アウトセット (outset)
注意アイコン

ボーダースタイルによっては全然違った色に見える

FireFox や Operaでは色が忠実に再現されるが、IEでは思った色が出ないことがある。特に 「浮き出し」 の場合はどのような色を使っても全体が黒めの色になる。


ページトップへ

[パディング] グループ

パディングの指定[パディング] スピン ボックス/リスト ボックス

ページトップへ

画像や表を余白なしで左側に配置するのをマージンスタイルの適用で実現する

① メニューバーから 「表示」 → 「スタイルシート マネージャ」 を選択する。

マージンスタイルの設定

「スタイルシート マネージャ」 ダイアログが表示される。

② [追加] ボタンをクリックする。

「スタイルの設定」 ダイアログが表示される。

[HTML タグ名] がスタイルを適用する対象の [img]、 [div]、 [table] などとなっていることを確認する。

③ [レイアウト] タブをクリックし、左に表示されるリスト ボックスから [上方向] を選択する。

④ [マージン] の設定を [予約語] から他の単位に切り替え、数値を [0] に設定する。

これで [上方向] に対し、余白なしでレイアウトが設定される。

⑤ 今度は左に表示されるリスト ボックスから [左方向] を選択し、同じようにマージンを [0] に設定する。

⑥ [OK] ボタンをクリックする。

「スタイルシート マネージャ」ダイアログに戻る。

⑦ [閉じる] ボタンをクリックする。

編集中のページに、設定したスタイルが自動的に反映される。

ページトップへ

|    | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  |