- ベストアンサー
W3C における、width の解釈に関して
今まで漠然と、CSS でデザインを行ってきました。この際きちんとした知識を得たいと思っています。 今まで float を利用して、経験則的に width で幅を決め段組みのデザインをしてきましたが、W3C 的に間違った解釈をしていないのかと思い始め、下記のサンプルソースを制作してみました。 疑問点は、float を利用してボックスを並べる際の、width の値に関しての考え方です。 W3C で言う標準モードを意識しています。また、IE6 の互換モード等は現時点では配慮していません。純粋に W3C の解釈を知りたいと思います。 -- サンプルソース -- <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>widthの検証</title> <style type="text/css"> <!-- body { background-color: #FEE; } #box { width: 300px; border: 1px solid #00F; margin: 0 auto; background-color: #FFF; } .block { float: left; width: 100px; margin: 0px; padding: 0px; border: 0px solid #F00; background-color: #FFE; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } --> </style> </head> <body> <div id="box" class="clearfix"> <div class="block"> <p>ボックス１</p> </div> <div class="block"> <p>ボックス２</p> </div> <div class="block"> <p>ボックス３</p> </div> </body> </html> -- サンプルソース -- 幅300pxのボックスを作り、その中に100pxのボックスを3個 float: left で並べています。上記のサンプルでは、クラスblockにて margin,padding,border を、0px にしていますが、margin,padding,border でどこか1カ所にでも、0以外の値を与えると3個目のボックスが落ちます。 上記挙動を踏まえて考えると、width の値は純粋にコンテンツのみの値と判断出来ます。 ただ、ネットを検索してみると、W3C 的には pading,border まで含めた値が、width の値だと解説されているページを見受けます。 検証した環境は Mac OS X の環境で、FireFox3.0 と、safari になります。width の値に関しては、単にブラウザの解釈の問題で有り、W3C 的には、width とは、padding,border まで含んだ値が正解なんでしょうか。 出来れば W3Cの原書もしくは、W3Cの和訳が有れば width のリファレンスへのリンクを教えて頂ければと思います。 和訳に関しては http://www.a2ztutorial.com/Style/CSS/ のページを見つけましたが、リファレンスを見つけられませんでした。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
いきなりリファレンスはお奨めできないが……。 正式な物は、読破するにも殺人的な体力と持久力と忍耐力を要求され、振りかざせば凶器となるもの。ちょっとわかってきてからの方が挫折しないです。わかってきてから思い通りに行かない場合の確認的に使われることをお奨めします。 邦訳はいろいろあります。 http://www.w3.org/Consortium/Translation/Japanese で、ご希望のwidthですが、多分ボックスモデルの方が求めておられるものだと思います。 http://www.y-adagio.com/public/standards/tr_css2/box.htm おせっかいですが、邦訳の興味のある部分を部分的に参照するために、プロパティから引けるindexを作成されているページがありますので、紹介します。 http://www.lucky-bag.com/appendix/css-property/css-property-list_ja.html えっと、わかっておられると思いますが、仕様書どおりに作成しても、正しく解釈しないブラウザがたくさんありますので、正解だけを求めると、前途多難ですよ。がんばってください。
その他の回答 (2)
- Yama-tani
- ベストアンサー率44% (13/29)
#2です。url間違えてたみたいです。最後のlをコピペしそこなったみたいで。もう一度貼ります。ごめんです。 http://www.y-adagio.com/public/standards/tr_css2/box.html
お礼
再度のアドバイスをありがとうございます。 リンクを確認して頂きありがとうござうます。 リンク先を拝見しましたとても参考になりました。 http://www.y-adagio.com/public/standards/tr_css2/toc.html のページを登録させて頂きました。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
http://www.w3.org/TR/CSS21/box.html をどうぞ。 しょっぱなに図示されたContentの幅と高さが、widthプロパティと heightプロパティで与えられた値を持つと明示され、その周囲に padding、border、marginが取り囲むと書かれています。
お礼
アドバイスをありがとうございました。 BOX モデルですね、アドバイスを頂いて思い出しました。 BOX モデルへのリンクをありがとうございました。 W3C 的には、やっぱりコンテンツのみの値を示すのだと理解できました。 width で、padding,border まで含まれていると言うのは、IE の互換モードの話だったも知れません。 これで疑問がすっきりしました。
お礼
アドバイスをありがとうございます。 はい、原書のリファレンスは厳しい物があります。邦訳が有れば嬉しく思います。 アドバイス頂いた http://www.y-adagio.com/public/standards/tr_css2/box.htm ページですが、残園ながら「Not Found」でした、少しディレクトリを遡ってみましたが、該当のページを見つけ出す事が出来ませんでした。 >プロパティから引けるindexを作成されているページがありますので、紹介します。 http://www.lucky-bag.com/appendix/css-property/css-property-list_ja.html 上記ページとても参考になります。知りたかったのは上記のようなページでした。ありがとうございます。 >えっと、わかっておられると思いますが、仕様書どおりに作成しても、正しく解釈しないブラウザがたくさんありますので、正解だけを求めると、前途多難ですよ。がんばってください。 ありがとうございます。まずは基本が判っていないと、挙動の判断が出来ない為、W3C 本来の趣旨を知りたいと思いました。また、何が何でも W3C に沿って言う気持ちでも無く、柔軟に対応出来るようになりたいと思っています。 アドバイスとても参考になりました。