Loading article…
| CSS ボックス モデル モジュール レベル 3 | |
 CSS ボックスモデル | |
| ネイティブ名 | CSS ボックス モデル モジュール レベル 3 |
|---|---|
| 状態 | W3C 候補勧告スナップショット |
| 最新バージョン | レベル3 2020年12月22日[1] |
| 組織 | ワールドワイドウェブコンソーシアム |
| 委員会 | CSSワーキンググループ |
| 編集者 |
|
| 基本基準 | CS |
| ドメイン | CS |
| Webサイト | css-box3 は、 |
ウェブ開発において、CSSボックスモデルとは、 HTML要素がブラウザエンジンでどのようにモデル化され、それらのHTML要素の寸法がCSSプロパティからどのように導出されるかを指します。これは、HTMLウェブページの構成における基本的な概念です。[3]ボックスモデルのガイドラインは、ウェブ標準のWorld Wide Web Consortium (W3C)、特にCSSワーキンググループによって説明されています。1990年代後半から2000年代前半にかけて、主流のブラウザではボックスモデルの非標準準拠の実装が行われていました。1998年にこのプロパティを導入したCSS2box-sizingの登場により、問題はほぼ解決されました。
詳細
カスケード スタイル シート (CSS) 仕様は、Web ページの要素がグラフィカル ブラウザーでどのように表示されるかを説明しています。CSS1 仕様のセクション 4 では、ブロック レベルの要素 ( や など) にp幅blockquoteと高さ、およびそれを囲む 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。
したがって、ボックスの合計幅はleft-margin+ left-border+ left-padding+ width+ right-padding+ right-border+ですright-margin。同様に、ボックスの合計高さはtop-margin+ top-border+ top-padding+ height+ bottom-padding+ bottom-border+ですbottom-margin。
例えば、次のCSSコード
.myClass {幅: 200 px ;高さ: 100 px ;パディング: 10 px ;境界線:実線10 px黒;マージン: 10 px ; }
'myClass' に属する各ブロックのボックス寸法を指定します。さらに、各ボックスの合計高さは 160ピクセル、幅は 260 ピクセルになります。
CSS3はInternet Explorerのボックスモデルを標準に導入し、と呼ばれていますborder-box。[6]
歴史
HTML 4 と CSS 以前は、ボーダーとパディングの両方をサポートする HTML 要素はほとんどなかったため、要素の幅と高さの定義はそれほど議論の余地がありませんでした。ただし、要素によって定義は異なります。テーブルの HTML 幅属性は、ボーダーを含むテーブルの幅を定義します。[7]一方、画像の HTML 幅属性は、画像自体の幅 (ボーダーの内側) を定義します。[8]初期にパディングをサポートする唯一の要素は、テーブル セルでした。セルの幅は、「セル パディングを除いたセル コンテンツの推奨幅 (ピクセル単位)」として定義されました。[9]
1996年にCSS [10]は、より多くの要素にマージン、ボーダー、パディングを導入しました。これは、表のセルの場合と同様の、コンテンツ、ボーダー、マージン、パディングに関する定義幅を採用しました。[11]これはその後、 W3Cボックスモデルとして知られるようになりました。
当時、W3Cボックスモデルを厳密に実装しているブラウザベンダーはごくわずかでした。当時の2大ブラウザであるNetscape 4.0とInternet Explorer 4.0は、どちらも幅と高さを境界線から境界線までの距離として定義していました。[12]これは、従来の[13]またはInternet Explorerボックスモデルと呼ばれています。[14]
Internet Explorerの「Quirksモード」では、指定された幅または高さ内にコンテンツ、パディング、境界線が含まれます。これにより、標準的な動作に従った結果よりもボックスの幅が狭くなったり短くなったりします。[15]
Internet Explorer のボックス モデルの動作は、以前のバージョンのInternet Explorer がWeb ページ内のボックス モデルや要素のサイズを処理する方法が、W3Cが推奨するカスケーディング スタイル シート言語の標準的な方法と異なるため、バグであると考えられることが多かった。 [16] [17] Internet Explorer 6以降、ブラウザーは代替レンダリング モード (「標準準拠モード」と呼ばれる) をサポートしており、この矛盾を解決している。ただし、下位互換性のため、すべてのバージョンはデフォルトで通常の非標準的な方法で動作する (互換モードを参照)。Internet Explorer for Mac はこの非標準の動作の影響を受けない。
回避策
Internet Explorerバージョン6以降では、ページに特定のHTML ドキュメントタイプ宣言が含まれている場合、このバグの影響を受けません。これらのバージョンでは、下位互換性のために、Quirksモードのときにバグのある動作が維持されます。 [18]たとえば、Quirksモードは次のように起動されます。
- 文書型宣言が存在しないか不完全な場合。
- HTML 3 以前のドキュメントに遭遇した場合;
- HTML 4.0 Transitional または Frameset ドキュメント タイプ宣言が使用され、システム識別子 (URI) が存在しない場合。
- SGMLコメントやその他の認識されないコンテンツが文書型宣言の前に現れる場合
- Internet Explorer 6では、ドキュメントタイプ宣言の前にXML宣言がある場合にもQuirksモードが使用されます。 [19]
Internet Explorer バージョン 5 以前で、Web ページを W3C ボックス モデルを使用して表示するように強制するさまざまな回避策が考案されています。これらの回避策は、通常、Internet Explorer の CSS セレクタ処理における無関係なバグを利用して、ブラウザーから特定のルールを隠すものです。これらの回避策の中で最もよく知られているのは、Tantek Çelikが開発した「ボックス モデル ハック」です。彼は元 Microsoft 社員で、Macintosh 版 Internet Explorer の開発中にこのアイデアを考案しました。このハックでは、Windows 版 Internet Explorer の幅宣言を指定し、それを CSS 準拠ブラウザーの別の幅宣言で上書きします。この 2 番目の宣言は、CSS ルールを解析する方法における他のバグを利用して、Windows 版 Internet Explorer から隠されます。これらの CSS「ハック」の実装は、Internet Explorer 7 の一般公開によってさらに複雑になりました。Internet Explorer 7 では、一部の問題は修正されましたが、他の問題は修正されず、これらのハックを使用したページで望ましくない結果を引き起こしています。[18]
ボックスモデルのハックは、ブラウザのCSSサポートのバグに依存しており、後のバージョンで修正される可能性があるため、信頼性が低いことが証明されています。このため、一部のWeb開発者は、同じ要素に幅とパディングの両方を指定しないようにするか、条件付きコメントやCSSフィルターを使用して、古いバージョンのInternet Explorerのボックスモデルのバグを回避することを推奨しています。[14] [20]
Internet Explorer のボックス モデルのサポート
ウェブデザイナーのダグ・ボウマンは、オリジナルのインターネットエクスプローラーのボックスモデルの方が、より優れた、より論理的なアプローチであると述べています。[21]ピーター・ポール・コッホは、物理的なボックスの例を挙げています。このボックスの寸法は常にボックス自体を指し、潜在的なパディングを含みますが、その内容は指しません。[13]彼は、このボックスモデルは、ボックスのコンテンツの幅ではなく、ボックスの可視幅に基づいてデザインを作成するグラフィックデザイナーにとってより便利であると述べています。[22]バーニー・ツィンマーマンは、インターネットエクスプローラーのボックスモデルは、HTMLテーブルモデルで使用されるセルの寸法とパディングの定義に近いと述べています。[23]
W3CはCSS3に「box-sizing」プロパティを含めました。box-sizing: border-box;要素にが指定されている場合、要素のパディングや境界線は指定された幅と高さの内側に描画され、「従来のHTMLユーザーエージェントで一般的に実装されているように」描画されます。[24] 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ブラウザは、ブラウザ固有のプロパティを使用して同じ機能をサポートしています。[25]は、 Bootstrapフレームワークで使用されるデフォルトのボックスモデルです。
-moz-box-sizing border-box
参考文献
- ^ ab Etemad, Elika J. 編 (2020 年 12 月 22 日). 「CSS ボックス モデル モジュール レベル 3」。W3Cレベル3。CSS ワーキング グループ。2021年4 月 9 日閲覧。
- ^ ab Bos, Bert; Prowse, Anton, eds. (2018年7月6日). 「CSS 基本ボックスモデル レベル3」. W3C . 2018年7月31日. CSS ワーキンググループ. 2021年4月9日閲覧。
- ^ 「CSS」。MDN Web Docs。2019年3月23日。 2019年3月30日閲覧。
- ^ ab Wium Lie, Håkon ; Bos, Bert (1999年1月11日). 「Cascading Style Sheets, level 1 § Formatting model」. World Wide Web Consortium . 2017年10月26日閲覧。
- ^ Håkon Wium Lie ; Bert Bos (1996 年 12 月 17 日). 「Cascading Style Sheets, level 1」. World Wide Web Consortium . 2006 年12 月 9 日閲覧。
- ^ Peter-Paul Koch (2013). 「CSS – box-sizing」. quirksmode.org . 2019年3月30日閲覧。
- ^ Raggett, Dave (1996 年 1 月 23 日). 「HTML3 テーブル モデル」. World Wide Web Consortium . 2017 年10 月 26 日閲覧。「RFC 1942 HTML テーブル」。IETF。
デフォルトのテーブル幅は、現在の左余白と右余白の間のスペースです。
- ^ Raggett, Dave; Le Hors, Arnaud; Jacobs, Ian (1999 年 12 月 24 日). 「13 オブジェクト、画像、アプレット § 幅と高さ」. World Wide Web Consortium . 2017 年10 月 26 日閲覧。
- ^ Raggett, Dave (1997年1月14日). 「HTML 3.2 リファレンス仕様」. World Wide Web Consortium . 2017年10月26日閲覧。
- ^ Wium Lie, Håkon ; Bos, Bert (1996 年 12 月 17 日). 「Cascading Style Sheets, level 1」. World Wide Web Consortium . 2017 年10 月 26 日閲覧。
- ^ Wium Lie, Håkon ; Bos, Bert (1996 年 12 月 17 日). 「Cascading Style Sheets, level 1」. World Wide Web Consortium . 2017 年10 月 26 日閲覧。
- ^ Koch, Peter-Paul. 「ボックスモデルの調整」XS4ALL . 2017年10月26日閲覧。
- ^ ab Koch, Peter-Paul. 「CSS – box-sizing」。QuirksMode 。 2017年10月26日閲覧。
- ^ ab Johansson, Roger (2006 年 12 月 21 日). 「Internet Explorer と CSS ボックス モデル」. 456 Berea Street . 2017 年10 月 26 日閲覧。
- ^ Lance Silver (2001 年 3 月)。「Internet Explorer 6 の CSS 拡張機能」。Microsoft Developer Network。Microsoft。2007年6月 24 日閲覧。
- ^ Shafer, Dan (2005). HTML Utopia: CSS を使用したテーブルなしのデザイン。メルボルン: Sitepoint。pp . 124 & 付録C。ISBN 0-9579218-2-9。
- ^ Shea, David ; Molly E. Holzschlag (2005). CSS デザインの禅。バークレー: Peachpit Press。ISBN 0-321-30347-4。
- ^ ab Markus Mielke (2006 年 9 月 26 日)。「Internet Explorer 7 のカスケーディング スタイル シートの互換性」。Microsoft Developer Network。Microsoft。2007年6月 24 日閲覧。「非厳格モード (Quirks) で作成されたページは、IE7 での動作は変更されず、壊れた CSS フィルターの影響を受けません。非厳格モード (または「Quirks モード」) で作成されたページは、IE7 での動作は変更されません。」
- ^ "!DOCTYPE". Microsoft Developer Network . Microsoft . 2007 年1 月 13 日閲覧。「次の例は、!DOCTYPE 宣言を使用してドキュメントが準拠する DTD を指定し、Internet Explorer 6 以降を標準準拠モードに切り替える方法を示しています。」
- ^ Arve Bersvendsen (2004 年 2 月)。「Hack-free CSS for IE」。Arve Bersvendsen のブログ。2007 年 1 月 15 日時点のオリジナルよりアーカイブ。2007年1 月 16 日閲覧。
- ^ 「Vorsprung durch Webstandards | Douglas Bowman が CSS への愛を宣言」 Vorsprungdurchwebstandards.de。2010 年 6 月 14 日時点のオリジナルよりアーカイブ。2010年7 月 7 日閲覧。
- ^ 「Vorsprung durch Webstandards | Peter-Paul Koch が CSS への愛を宣言」 Vorsprungdurchwebstandards.de。2010 年 2 月 27 日時点のオリジナルよりアーカイブ。2010年7 月 7 日閲覧。
- ^ 「Box Model Enlightenment、Bernie Zimmermann」。Bernzilla.com。2003年4月4日。2010年12月27日時点のオリジナルよりアーカイブ。2010年7月7日閲覧。
- ^ 「CSS3 基本ユーザーインターフェイスモジュール」。World Wide Web Consortium。
- ^ "-moz-box-sizing". Mozilla Developer Center . Mozilla . 2009 年 4 月 11 日. 2009 年4 月 11 日取得。
このプロパティを使用すると、CSS ボックス モデル仕様を正しくサポートしていないブラウザーの動作をエミュレートできます。
外部リンク
- ワールドワイドウェブコンソーシアム（W3C）のボックスモデルの仕様
- CSS ボックスモデルのチュートリアル
- Tantek Çelik による「ボックス モデル ハック」の説明
- CSS を使用して Internet Explorer を正常に動作させる方法 – ボックス モデルの問題やその他の IE のバグを回避するさまざまな方法を概説した about.com の記事。
- Internet Explorer 7 のカスケーディング スタイル シートの互換性 – MSDN の記事、2006 年 7 月。
- Firefox と Internet Explorer の CSS ボックス モデルの違い – Mozilla Firefox と Internet Explorer のレンダリングの違いについての詳細な説明。