ボックスの概念

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

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

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

ボックスに関するスタイルシートの主な属性
ボックスとして形成するスタイルシートでは、以下の属性を利用することができます。
これらのスタイルシートを駆使することにより、より視覚的な効果を演出することができます。
属性機能
border-style
  • solid ---- 直線
  • dotted --- 点線
  • dashed --- 破線
  • double --- 2重線
  • 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要素も1つの大きな
ボックスであるということがいえるでしょう。
  〜 以下省略 〜
</div>

</body>
</html>


This Page is HTML4.01 Valid! 初版公開日 2002年5月3日   最新更新日 2003年7月15日
Copyright(C) 2002-2008 banban