ボックスについて質問

質問

以下の、2つの質問にお答えいただけましたら幸いです。

質問１：先ず以下の画像をご覧ください。

http://uploda.cc/img/img51e249c4df49b.JPG

画像にあったボックスモデルの図について、『ボーダーで囲まれた四角』がボックスであり、破線で囲まれた四角はボックスでは
ないですよね？
僕は最初破線で囲まれた四角までがボックスだと思い、ボックス内にマージン領域があるかと思っていて混乱しました。
(その解説書では『ボックス間の余白を形成する領域』と書いてあったので、マージン領域はボックスの外側にあるはず。
それなのに何故ボックス内部にマージン領域があるかわからなくて混乱しました。)
もし『ボーダーで囲まれた四角』がボックスであればマージンはボックスの外側にあり、『ボックス間の余白を形成する領域』というのも
納得できるのです。

質問2:これは国語の読解力の質問となるかもしれませんが、以下は私が使っているcssの解説書に記載されているボックスモデルについて解説されているものを写した画像です。
http://uploda.cc/img/img51e24a1e01780.JPG

これは『CSSのボックスモデル』と題名に書いてあるので、『ボックス(モデル)とはコンテンツ領域、パディング領域、ボーダー領域、マージン領域の４つの領域に分かれている』
であって、ボックス自体が４つの領域で構成されているわけではないですよね？あくまでも『ボックスモデルが４つの領域で形成されている』ということを言いたいのですよね？この解説書は。

因みにボックス自体が４つの領域で構成されていると私は解釈してしまい、混乱してしまいました。

回答No.3

naokita · ベストアンサー

正しい用語が、正しく使われずに、別の意味として多く広まる事もあって、どちらも正しい用語になる場合もある。その矛盾を理解した上での質問でしょうか？・・・
人によって解釈が違うのだから、どちらかを否定したり論議するのは意味の無い話になります。
-----------------------
＞画像にあったボックスモデルの図について、『ボーダーで囲まれた四角』がボックスであり、破線で囲まれた四角はボックスでは
ないですよね？
Ａ、
どちらにも解釈できるのでYesでもNoでもない。
ブロック要素の話なら「Yes!　ないです」と言えます。

ボックスを何処から見るかの視点での解釈の問題があって、
「ここにボックスを入れるので、その領域を確保して下さい」と指示されたとしたら、
貴方ならどうする？
「そのボックスにマージンを含めるのか？」と、いちいち質問しますか？
自分なら、マージンを含めた幅や高さの領域を確保するので、捉え方によってはマージンを含めた見たままの「破線で囲まれた四角はボックス」をボックスと判断します。
なので、
この場合のボックスとは、マージンを含める領域。
また、
ボーダーを含むか含まないかも問題で、DTDによって表示される大きさも違います。
ボーダーは、マージンの代わりにもなるしパディングの代わりにもなるからであって、ソースを見ないとボックスの領域は判断出来ず、
視覚的にはボックスやブロックの領域が判断出来ないという事。
なので、見える該当範囲全体を一概にボックスと言ってしまうケースが多い。
（他のボックスの影響もあるのにね・・・見えないのだからしょうがない・・・）
更に、
マージンやボーダーを含めるのか？の解釈に関しては、
CSS3からbox-sizingなるどちらにでもスイッチできるプロパティがあります。
なので、
box-size ＝ 「ボックスのサイズを決める規格」と解釈すると、
「ボックスはボーダーを含む事もできるし、別にする事もできる！」
と解釈できる。
しかし、
「marginは含んでいない」との解釈になります。
これは困った・・・
ボックスって何処から何処までの事やねん？・・・
とすると、どっちが正しいなんて事は言えませんね。矛盾。

ボックス ＝ 「該当の領域」 と云う大まかな枠として捉えれば良いのかも。
つまり、曖昧な用語なので決まりはない。

ブロック要素については、仕様によって明確な決まりがある。
なので、貴方が理解しているのは、ブロック要素と限定した話ですよね？

------------

ボックスは、コンテンツの主領域があり、
　１、外包スペース＝マージン領域、
　２、罫線＝ボーダー領域、
　３、内包スペース＝パディング領域
がある。
ブロック要素は、主にコンテンツ領域があり、
　１、外包スペース＝マージン領域、
　２、罫線＝ボーダー領域、
　３、内包スペース＝パディング領域
を設定する事ができる。
と解釈した方が良いかもしれませんね。

つまり、
仕様書が何と言おうが、
世の中の多くの人が曖昧に利用するのだから、ボックスは実用的には定義のない言葉です。
仕様書の枠を超えた文章の問題であって、
人間が作って人間が利用しているのだから、コンピュータのように正か負かのような判定は出来ない。

回答No.2

ORUKA1951

マニュアルがマニュアルの役目をしていないですね。
この手の本がなぜ売れるか、私には理解に苦しむのですが(^^)
仕様の解説書なのに仕様書のほうが分かりやすい。

　そもそもCSSでいうボックスとは、[視覚整形モデル]で言うところの、内容の周囲を取り巻く四角い囲いを言います。(HTMLで言うところのブロック要素とは違います。)
　HTMLでは、要素そのものですが、CSSでは視覚整形における整形方法に関する説明です。それが分かっていると簡単な話です。

HTMLでは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
整形
　デフォルトでは、ブロックレベル要素は行内要素とは異なるように整形される。 一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )］より・・これに続く文章も重要なので読んでおくこと。
ですが、ここで登場する「整形」についての説明が、CSSにおけるブロックです。

　ブロックの整形において、（その要素の）内容(content)の周囲にpaddin領域があり、paddinの外にborder領域があり、空にその外側にmargin領域があるのがブロックです。これらの４つを持つのがブロックで矩形をしています。
　ブロックのmarginは他の要素のmarginと相殺されるなどがありますから、それぞれのルールを知っておくこと。
・content:　その要素の内容
・padding: borderとの隙間
・border: 凝らすイシスの外側　背景はここまで塗られる。
・margin: 他の要素との間隔
　を持つのがボックスです。

　よって、あなたが質問されている意味でのブロックとは何かは意味がないのですが、実際の整形に当たっては、どれをブロックとするかは極めて重要になります。
　例えば、ボックスのサイズを考えるときには、それ自身のサイズは内容(content)のサイズですが、他のブロックと並ぶときにはborderやmarginのサイズを含めないとなりません。また、内部に含まれるブロックのサイズが親のコンテナブロックのサイズを参照するときは、直近のstaticでない親の内容(content)のサイズを参照します。
　言い換えればボックスは、TPOによってcontentであったり、pqddingであったり、borderであったり、marginであったりするという事です。

　いずれにしても仕様書を読むほうが早くて完結でしかも正確です。
　⇒REC-CSS2 邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )
このブロックについては
　　8.ボックスモデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html )
　　9.視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html )
　 10.視覚整形モデル詳細( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html )
　 11.その他の視覚効果( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visufx.html )
　が該当します。
　　これらに目を通すと、意味が正確に分かるでしょう。

★この邦訳は、CSS2のものです。現在利用されているのはCSS2.1です。いくつか重要な改訂がありますが、良い邦訳を知りません。(この部分については大きな変更はない)
　原文をお読みください。文学ではない技術文書ですから難しくはないでしょう。オンライン邦訳も利用できますしね。
　⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification( http://www.w3.org/TR/CSS2/ )
CSS2.1の
　⇒8.1 Box dimensions( http://www.w3.org/TR/CSS2/box.html#box-dimensions )
に図示されています。
CSS2.1原文『Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:』
CSS2邦訳『各ボックスはテキストや画像などの内容領域（content area）を持ち、その周囲には更にパディング（padding）、ボーダー（border）、マージン（margin）といった周辺領域を持つこともある。 各領域の大きさは先の章で定めるプロパティによって指定される。 以下に、各領域の相互関係及び各用語が参照する周辺領域について図示する: 』
　変更はありませんね。
　※paddingの定義や背景の範囲の変更はあります。

★firefox + firebugを使用すると視覚的にとっても分かりやすいでしょう。

　すくなくとも、そのマニュアルよりは分かりやすいでしょう。

回答No.1

aky_nil

どちらも書かれている通りで正解です。
恐らくその解釈で誤解は無いと思います。

何かの試験をやるのではないなら、感覚で理解してしまってもいいと思います。
ページを作るときには、そこまで厳密に「ボックスモデルがどうこう・・・」なんて考えたりはしませんから。
ボックスは箱本体（背景指定で可視）、コンテンツはそこに入れる文字や写真など、ボーダーは外枠（表示も可能）、
パッティングはコンテンツと枠との余白、マージンは隣のボックスやページの端との間隔。
これだけわかれば十分です。