CSSボックスモデル

ウェブ開発において、CSSボックスモデルとは、ブラウザエンジンでHTML要素がどのようにモデル化され、それらのHTML要素の寸法がCSSプロパティからどのように導出されるかを指します。これはHTMLウェブページの構成における基本的な概念です。 ^{[ 3 ]}ボックスモデルのガイドラインは、Web標準ワールドワイドウェブコンソーシアム（W3C）、特にCSSワーキンググループによって記述されています。1990年代後半から2000年代初頭にかけて、主流のブラウザではボックスモデルの非標準準拠の実装が多数存在していました。 1998年にプロパティを導入したCSS2の登場によりbox-sizing、この問題はほぼ解決されました。

Cascading Style Sheets (CSS) 仕様は、Web ページの要素がグラフィカル ブラウザーによってどのように表示されるかを記述しています。CSS1 仕様のセクション 4 では、 <p>pやblockquote<p> などのブロック レベル要素に幅と高さ、およびそれを囲む 3 レベルのボックス (パディング、ボーダー、マージン) を与える「フォーマット モデル」が定義されています。^{[ 4 ]}仕様では「ボックス モデル」という用語は明示的に使用されていませんが、この用語は Web 開発者や Web ブラウザー ベンダーによって広く使用されるようになりました。

すべてのHTML要素は「ボックス」とみなすことができ、これにはdivタグ、pタグ、aタグなどが含まれます。これらのボックスにはそれぞれ5つの変更可能な寸法があります。

• ボックス内の実際のコンテンツ（テキスト、画像など）の寸法を記述しますheight。width
• これは、paddingこのコンテンツとボックスの境界線の間のスペースを表します。
• borderボックスを囲む線（実線、点線、破線など）があれば、
• これmarginは境界線の周りの空間です

1996 年に W3C によってリリースされ、1999 年に改訂された CSS1 仕様によると、ブロック レベル要素に幅または高さが明示的に指定されている場合、表示される要素の幅または高さのみが決定され、その後パディング、境界線、およびマージンが適用されます。^{[ 4 ] [ 5 ]} CSS3 より前は、このボックス モデルはW3C ボックス モデルとして知られていましたが、CSS3 では、として知られていますcontent-box。

したがって、箱の全幅はmargin-left+ border-left+ padding-left+ width+ padding-right+ border-right+ですmargin-right。同様に、箱の全高さはmargin-top+ border-top+ padding-top+ height+ padding-bottom+ border-bottom+ですmargin-bottom。

例えば、次のCSSコード

.my - class { width : 200px ; height : 100px ; padding : 10px ; border : solid 10px black ; margin : 10px ; }​​​​

これは、「my-class」に属する各ブロックのボックスの寸法を指定します。さらに、各ボックスの高さは140ピクセル、幅は240ピクセルになります。

CSS3 は、Internet Explorer ボックス モデルを標準に導入し、 と呼ばれていますborder-box。^{[ 6 ]}

HTML 4 と CSS が登場する以前は、境界線とパディングの両方をサポートする HTML 要素はごくわずかだったため、要素の幅と高さの定義はそれほど議論の的になりませんでした。ただし、要素によって定義は異なっていました。テーブルの HTML の width 属性は、境界線を含めたテーブルの幅を定義していました。^{[ 7 ]}一方、画像の HTML の width 属性は、画像自体の幅 (境界線の内側) を定義していました。^{[ 8 ]}当時、パディングをサポートしていた唯一の要素はテーブルのセルでした。セルの幅は、「セルのパディングを除いた、セルコンテンツの推奨幅 (ピクセル単位)」として定義されていました。^{[ 9 ]}

1996年、CSS ^{[ 10 ]}は、より多くの要素にマージン、ボーダー、パディングを導入しました。テーブルセルと同様に、コンテンツ、ボーダー、マージン、パディングに関連する定義幅を採用しました。^{[ 11 ]}これはその後、 W3C ボックス モデルとして知られるようになりました。

当時、W3C ボックス モデルを厳密に実装したブラウザ ベンダーはごく少数でした。当時の主要な 2 つのブラウザ、Netscape 4.0とInternet Explorer 4.0は、幅と高さを境界から境界までの距離として定義していました。^{[ 12 ]}これは、従来の^{[ 6 ]}またはInternet Explorer ボックス モデルと呼ばれています。^{[ 13 ]}

Internet Explorerの「互換モード」では、指定された幅または高さ内にコンテンツ、パディング、境界線が含まれます。これにより、標準の動作に従う場合よりもボックスが狭く、または短くレンダリングされます。^{[ 14 ]}

Internet Explorer のボックス モデルの動作は、以前のバージョンのInternet Explorer がWeb ページ内の要素のボックス モデルまたはサイズを処理する方法が、 W3Cが推奨するCascading Style Sheets言語の標準的な方法と異なるため、バグと見なされることが多かった。^{[ 15 ] [ 16 ]} Internet Explorer 6以降、このブラウザは、この不一致を解決する代替レンダリング モード (「標準準拠モード」と呼ばれる) をサポートしています。ただし、下位互換性の理由から、すべてのバージョンはデフォルトでは依然として通常の非標準的な方法で動作します (互換モードを参照)。Mac版 Internet Explorer はこの非標準的な動作の影響を受けません。

ウェブデザイナーのダグ・ボウマンは、オリジナルのインターネットエクスプローラーのボックスモデルの方が、より優れた、より論理的なアプローチであると述べています。^{[ 20 ]}ピーター・ポール・コッホは、物理的なボックスを例に挙げ、その寸法は常にボックス自体（パディングを含む）を指し、その内容は指さないと述べています。^{[ 6 ]}彼は、このボックスモデルは、内容の幅ではなくボックスの見える幅に基づいてデザインを作成するグラフィックデザイナーにとってより有用であると述べています。^{[ 21 ]}バーニー・ジマーマンは、インターネットエクスプローラーのボックスモデルは、HTMLテーブルモデルで使用されるセル寸法とパディングの定義に近いと述べています。^{[ 22 ]}

W3C は CSS3 に「box-sizing」プロパティを追加しました。box-sizing: border-box;要素に が指定されると、要素のパディングや境界線は、従来の HTML ユーザー エージェントで一般的に実装されているように、指定された幅と高さの内側に描画されます。 ^{[ 23 ]} Internet Explorer 8、Apple Safari 5.1 以降やGoogle ChromeなどのWebKitブラウザ、Mozilla Firefox 29.0 以降、Opera 7.0 以降、Konqueror 3.3.2 以降などのGecko ベースのブラウザは、CSS3 の box-sizing プロパティをサポートしています。29.0 より前の Gecko ブラウザは、ブラウザ固有のプロパティを使用して同じ機能をサポートしています。 ^{[ 24 ]}はBootstrap フレームワークで使用されるデフォルトのボックス モデルです。-moz-box-sizingborder-box

• レイアウト（コンピューティング）

• ワールドワイドウェブコンソーシアム（W3C）によるボックスモデルの仕様
• CSSボックスモデルに関するチュートリアル
• タンテク・チェリクによる「ボックスモデルハック」の説明
• Internet ExplorerでCSSをうまく動作させる方法– about.comの記事で、ボックスモデルの問題やその他のIEのバグを回避するためのさまざまな方法が説明されています。
• Internet Explorer 7 におけるカスケードスタイルシートの互換性– MSDN の記事、2006 年 7 月。
• FirefoxとInternet ExplorerにおけるCSSボックスモデルの違い– Mozilla FirefoxとInternet Explorerのレンダリングの違いに関する詳細な説明。