10. ボックスモデル

上図は、W3Cが推奨するボックスモデルであり、初期設定はこのモデルになっている。 「box-sizing:content-box;」が初期値であり、「box-sizing:border-box;」とすると、 width,heightはborder、paddingを含むサイズを表すようになる。（下図）

どちらが良いかは時と場合による。 同じサイズのボックスを複数作成する場合、 レイアウト崩れ防止のためにborder-boxにすることも多い。

ボーダーborderは枠線であり、前節ではサイズをほとんど無視していたが、 厚みを任意に設定することもできる。

htmlタグの内のどれが、このボックスモデルを適用できるのかは重要な問題である。

HTML5以前は、ブロックレベル要素とインライン要素の２つに分類されていたが、 HTML5以降は、7種類の分類に変更になってしまった。 正直言って、この分類、まだよくわからん！ しかし、従前のブロックレベル要素の考え方はまだ踏襲できそうに思える。

より具体的に、タグ毎に見ていくことにしよう。

<p>paragraph</p>

<h3>h3</h3>

上図は、同じCSSを上記すべてのタグに適用した場合の表示である。

style="margin:10px; border:3px solid grey; padding:10px; background-color:yellow; width:200px; height:40px;"

が、適用スタイルシートである。

<p>,<div>,<h3>,<nav>,<header>はブロックレベル要素と呼ばれるタグであるが、 ほぼ指定通りにマージン、パディング、サイズが設定されている。

しかし、<a>,<img>,<br>,<strong>,<b>は異なる様相を示している。 特に、サイズ指定は完全に無視されているものの、横マージンとパディングは有効になっている。

imgとbrについてはIEとchromeで表示が異なっている。このような使い方は規格外なのであろう。

これ以上議論してもあまり意味を成すとも思えないが、<br>を除くほとんど全てのタグには領域が設定されていることは理解できる。

結論として、領域表示にあまり意味をなさないタグにボックスモデルを適用するのは、ほとんど無意味である。

しかし、それ以外のブロックレベル要素として領域表示に意味のあるタグはたくさんあり、 ボックスモデルを十分意識してWeb制作を行うことは重要である。

次は、CSSの基礎について、より詳しく見てみよう。

• CSSの基礎へ