ボックス/HTML基礎講座

ブロックレベル要素では、基本的にボックスという概念を持っています。その領域は初期値として左から右までの矩形を確保します。

一般的な視覚系ブラウザでは、ブロックレベル要素の中のいくつかが、前後に空白行を持って改行することがあります。しかし、こうした表現方法は仕様書には何も決められていません。つまり、Webブラウザ側の「スタイル」によってレンダリングされるのが一般的です。

スタイルシートでは、こうしたブロックレベル要素を１つのボックスとして扱い、様々な表現方法を提供することが可能になっています。

■ ボックスに関するスタイルシートの主な属性

ボックスとして形成するスタイルシートでは、以下の属性を利用することができます。

これらのスタイルシートを駆使することにより、より視覚的な効果を演出することができます。

属性	機能
border-style	`solid ----` 直線 `dotted ---` 点線 `dashed ---` 破線 `double ---` ２重線 `groove ---` 立体的に望んだ感じの線 `ridge ----` 立体的に隆起した感じの線 `inset ----` 立体的に要素ごと望んだ感じの矩形 `outset ---` 立体的に要素ごとに隆起した感じの線
border-width	枠の太さを指定する
border-color	枠の色を指定する
margin	マージンを指定する
padding	コンテンツと枠の間の余白の大きさを指定する
width	内側領域の横幅を指定する
height	内側領域の高さを指定する

■ ボックスの構造

ボックスの構造は言葉で説明するのは難しいので、下記の図を参考にしてください。

ボックスの構造

Webページのブロック要素はすべて「ボックス（領域）」という四角のエリアを持っています。ボックス領域はマージン、ボーダー（枠線）、パディングとコンテンツから成り立っています。スタイルシートでは、すべての要素のマージン、ボーダー、パディングを制御することができます。

実はこのページを含めて、このサイトではボックスを多用して表現されています。

＜サンプル＞

下記のサンプルと HTMLコードについて説明します。

まず、div要素によって囲んでコンテナ化し、横幅300ピクセル、高さ400ピクセルの背景色の白いボックスとして、ウィンドウの上端から40ピクセル、左端から40ピクセルの位置に配置しました。ボックスの枠線は幅4ピクセルの青い点線で枠線を設け、枠線とコンテンツの間（パディング）は10ピクセルの余白を設けました。なお、枠線の外側の余白（マージン）は、あえて設けていません。

ボックスの構造

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" 
　　　content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ボックスのサンプル</title>
<style type="text/css">
<!--
body     { background-color: #fc0 }
div.box  { position: absolute; top: 40px; left: 40px; width: 300px;
           height: 180px;padding: 10px; background: #fff; 
           border: 4px dotted #006; font-size: 16px; color: #000 }
h4       { font-size: 18px; color: #c00 }
-->
</style>
</head>

<body>
<div class="box">
<h1>ボックスの定義</h1>
ボックスは、大きく分類すると、body要素も１つの大きな
ボックスであるということがいえるでしょう。
  ～　以下省略　～
</div>

</body>
</html>

初版公開日 2002年5月3日最新更新日 2003年7月15日

■ ボックスの概念