ボックスモデル

CSSでは、それぞれのHTML要素について作られる下図のような四角形領域のことを、 「要素ボックス」や単に「ボックス」と呼びます。

要素ボックスには、上図のように４つの領域があり、 それぞれの意味は以下のようになっています。

• HTML要素の内容 (content)
• HTMLの内容と枠線(ボーダ)との間の余白を表わす「パディング」 (padding)
• 枠線を表わす「ボーダ」 (border)
• ボーダと他のHTML要素との間の余白を表わす「マージン」 (margin)

これらの、padding、 border、margin は、 CSSのそれぞれのセレクタ(HTML要素名やclass名など)における プロパティ(設定項目)となっています。 そのため、このプロパティを各セレクタで設定すると、 各HTML要素で表わされるブロック間の余白(間隔)を設定したり、 ブロックを枠線で囲ったりすることができます。

実際に pセレクタ (p要素) でプロパティを設定して、 表示スタイルの変化を確認してみましょう。

マージン(margin)を10pxにしてみましょう。 以下の p.box1 セレクタでは、 (p)要素がボックスで構成されているのが分かるように、 ボーダ(border, 枠線)を 1pxの太さの赤色(red)で表示させておきます。 また、余白をつくる margin と padding の意味の違いが分かるように、 パディング(padding)を無し(0px) にしています。

p.box1 {
  margin: 10px;
  padding: 0px;
  border: 1px solid red;
}

上記のように、p.box1 classセレクタで スタイルを設定し、 以下のようにHTMLで利用してみると、

<p class="box1"> 
  ここは、class名が「box1」の p要素ブロックです。
</p> 

Webブラウザでは、次のように表示されます。

分りやすいように、 margin領域に   の色をつけると、 以下のようになります。

赤い枠線(border)の外側が margin の領域ですので、 上下左右とも、marginプロパティの値である 10px の余白ができています。

ところで、ボックスの幅(margin領域の外枠の幅)は、 HTML要素の内容(content)の長さに関係なく、 Webブラウザの幅 (正確には、囲んでいる親ブロックの幅)になります。 上図では、   の色のついた 左右の領域の外側全体の幅がボックスの幅ですです。

そのため、縱のborder(枠線)は、p要素の内容のすぐ外側ではなく、 ブラウザの左右の外枠より margin の分だけ狭い位置に引かれています。

それでは、marginプロパティの意味を確実に理解するために、 値を 30px に変えた 以下の p.box2 をHTMLに適用してみましょう。p.box2のその他のプロパティの値は、 p.box1 セレクタのそれと同じです。ただ、 適用するHTMLのp要素の内容が、 先の例より文字数が多くなっていることに注意して下さい。

p.box2 {
  margin: 30px;
  padding: 0px;
  border: 1px solid red;
}

<p class="box2"> 
  ここは、 marginを30pxに設定した class名が「box2」の p要素ブロックです。
  その他の設定は、p.box1 と全く同じです。
</p> 

p要素の margin プロパティの値が 30px に変りましたので、 外枠とボーダの間に上下左右とも、30px の余白ができていますね。 更に、p要素の内容が増えているので、 ボーダの内側で自動的に改行されています。

今度は、paddingプロパティの効果を確かめるために、 以下の p.box3 セレクタで、 paddingの値を10pxにしてみましょう。 それ以外は、p.box2 プロパティと全く同じです。

p.box3 {
  margin: 30px;
  padding: 10px;
  border: 1px solid red;
}

上記のように、p.box3 classセレクタで スタイルを設定し、 以下のようにHTMLで利用してみると、

<p class="box3"> 
  marginは30pxのままで、paddingを10pxにした  class名が「box3」の
  p要素ブロックです。 その他の設定は、p.box2 と全く同じです。
</p> 

Webブラウザでは、次のように表示されます。

赤い枠線(border)と、その内側の文字との間が padding の領域ですので、 上下左右とも、paddingプロパティの値である 10px の余白ができています。

枠線は、通常は描かれていませんが、 borderプロパティを設定して描くことができます。 値として、ピクセル単位の「太さ(幅)」、 「形状 (style)」、 カラーコードまたは色名による「色」の3つを、 半角空白で区切って指定します。

それでは、太くて赤い枠線を描いてみましょう。 「太さ(幅)」を20pxに、 「色」を#f33 (すこし薄い赤色)にしています。

p.box4 {
  margin: 30px;
  padding: 10px;
  border: 20px solid #f33;
}

上記のように、p.box4 classセレクタで スタイルを設定し、 以下のようにHTMLで利用してみると、

<p class="box4"> 
  marginとpaddingはp.box3と同じにしたまま(それぞれ30px、10px)、
  太さを「20px」、スタイルを「solid」、色を「#f55」に設定した
  borderを指定しています。赤色の太い枠線が描かれているのがわかりますよね。
</p> 

Webブラウザでは、次のように表示されます。 20px の幅で、 すこし薄い赤色のボーダが描かれていますね。ボーダが、 margin領域の内側で、padding領域の外側であることも確認して下さいね。

ところで、borderの「形状 (style)」は、以下の10種類が指定できます。

前回、bodyセレクタの background-colorプロパティ を使って、 背景色を設定しましたね。このプロパティは、 bodyセレクタ 専用ではなく、CSSのボックスすべてに適用できるプロパティです。

実際、background-colorプロパティで設定される色は、 ボックスモデルのpadding領域とcontent(内容)領域の色になります。 つまり、下図のようにborderの内側 (borderは含みません) 全体に色がつくことになります。

それでは、試しに p要素に背景色をつけてみましょう。先に使った p.box4 セレクタに、background-color だけを追加したものを、 p.box5 セレクタとして以下のように定義してみます。 背景色は、カラーコード #8bf としてみました。

p.box5 {
  margin: 30px;
  padding: 10px;
  border: 20px solid #f33;
  background-color: #8bf;
}

上記のように、p.box5 classセレクタで スタイルを設定し、 以下のようにHTMLで利用してみると、

<p class="box5"> 
  background-colorプロパティの値を #8bf にしてみました。
</p> 

Webブラウザでは、次のように表示されます。 ボーダが赤くて太いので紛らわしいですが、 ボーダの内側にあるpadding領域とcontet領域に、 濃い水色 (#8bf) の背景色がついていますね。

このように、CSSでは、すべての要素に別々の背景色を設定することができます。

これまで、要素ボックスの形を決めるプロパティは、 四角形のすべての辺を一括して設定していました。 実は、下図のように個々の辺に対するプロパティもありますので、 これらのプロパティを使えば、 どれか一つの辺のいずれかのプロパティを設定することも可能です。

あまり良い例ではありませんが、これらを使うと、 以下のようなボーダ(枠線)で囲むことも可能です。

上図は、下記のHTML記述をWebブラウザで表示したものです。 ここで利用した p.strangebox セレクタの定義をHTML文書の下に示しておきます。 各辺専用のborder関連プロパティに、個別の値を設定しています。

<p class="strangebox"> 
   変な枠線で囲まれていますね。
</p> 

p.strangebox {
  margin: 10px;
  border-top:     2px dotted green;
  border-right:   0px none   white;
  border-bottom:  3px dashed red;
  border-left:   20px solid  purple;
  padding: 10px;
  background-color: #8bf;
}

これまでは、 「HTML要素の内容の長さに関係なく、 要素ボックスの幅は、 Webブラウザの幅がボックスの幅になるように自動調整される」 という前堤で説明をしてきました。そのため、ボックスの(いちばん外側の)幅は、 常に一定でした。 これは、上の図で示した width プロパティの設定をしていなかったためです。

それでは、widthプロパティを設定してみましょう。 ボックスモデルの最初の例として用いた、p.box1セレクタの内容に、 widthプロパティを追加した、p.box1width を以下のように定義してみましょう。

p.box1width {
  margin: 10px;
  border: 1px solid red;
  padding: 0px;
  width: 250px;
}

上記のように、p.box1width classセレクタで スタイルを設定し、 以下のようにHTMLで利用してみると、

<p class="box1width"> 
  こちらは、widthプロパティを設定した「box1width」classで表現されます。
  ボックスの幅が短くなっていますね。
</p> 

Webブラウザでは、次のように表示されます。 ボックスの幅が短くなったでしょう？

「え？？？ 右側の margin が長くなっただけでしょう？」 と思ったあなたはえらい！ 確かに、そのように見えます。 しかし、p.box1width セレクタの設定で marginは、 上下左右とも 10pxに設定しましたよね。

それでは、分りやすいようにmargin領域に色をつけてみます。 すると、下図のようになります。

色のついた領域までが、p要素のボックスです。(右側のmarginも10pxですよね。) 色のついた領域の右側は、p要素とは関係の無い余白だったのです。

つまり、 文字が表示されているcontent(内容)領域の横幅を、 widthプロパティで、(250pxに) 設定したため、 ボックス全体の幅が短くなったのです。

この例で分ったように、実は、margin領域まで含めたボックス全体の幅は、 以下のように決まります。

繰り返しになりますが、この節以前のボックス全体の幅が、 常にWebブラウザの幅と同じであったのは、 width プロパティが設定されていなかったためです。