小粋空間  -  a cheap joke and a play on words site

CSS「ボックスモデル」の意味

CSSのボックスモデルについて、他の記事とは異なる観点で解説したいと思います。

１．はじめに

いきなりですいませんが、CSSの「ボックスモデル」とは、次のようなものを指します（詳細は色々端折ってます）。

この図は、CSSのボックスモデルの解説では必ずといっていいほど登場します。

ただ、そこにmarginやborder、padding、floatやマージンの相殺といった説明があっても、「結局ボックスモデルって一言でいうと何？」という感じで、それ自体が何を指すものかといった説明がされていないものが多いのではないか？と感じてました（探せばあるのかもしれませんが）。

ということで、ボックスモデル自体の意味について、自分なりに解説してみたいと思います。

認識誤りがありましたらどこかでつぶやいてください。

２．「ボックスモデル」について

まず、ボックスモデルについては、CSS2.1仕様の8章に次のように記述されています。

8 Box model

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. （CSSボックスモデルは、ドキュメントツリーの要素のために生成され、視覚的なフォーマット・モデルによってレイアウトされる長方形の箱について述べます。）

ちなみに「ドキュメントツリー」とは、CSS2仕様の3.1の定義で次のように書かれています。

3.1 Definitions

The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none. （ソースドキュメントの中でコード化された要素のツリー。親要素を持っていないルート要素を除き、ツリーの要素はそれぞれ1つの親要素を持っています。）

「視覚的なフォーマット・モデル」の詳細については、CSS仕様の「9 Visual formatting model」を参照してほしいのですが、要するに複数のボックスモデルを組み合わせた場合などのレイアウトの概念を示すもののようです。

で、上記の仕様の説明を要約すると、「ボックスモデル」とは次のことのようです。

• 長方形の箱（ボックス）は個々のHTML要素ごとに生成される
• ボックスは視覚的なフォーマット・モデルによってレイアウトされる

３．個人的な見解

２項の内容がボックスモデルを指しているのですが、もう少し抽象的にまとめると、「ボックスモデル」は「HTML文書内に記述した要素に対する考え方・概念を示したもの」という風に捉えています。

前述のとおり、CSSの仕様上、HTML文書内の要素（div要素やp要素など）のひとつひとつが「ボックス」という矩形（くけい＝四角形）の領域を生成します。

この要素ごとに生成されたボックスのスタイル、あるいはボックス同士の組み合わせについてのスタイルに対する考え方が「ボックスモデル」ということになります。

そして、そのモデルの中に、冒頭の図のようなmarginやborder、paddingというプロパティが用意されている、ということです。

４．おわりに

ということで、ボックスモデルの意味ついて考察して、個人的にはすっきりした感じです。

皆さんもご自身の解釈を行い、ボックスモデルの意味について理解をよりいっそう深めてみてはいかがでしょうか。