ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
QNo.4186634 W3C における、width の解釈に関して
質問者：nori_007 今まで漠然と、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/​
のページを見つけましたが、リファレンスを見つけられませんでした。
困り度：
  • 困っています
質問投稿日時：
08/07/18 19:35
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答
ANo.3 #2です。url間違えてたみたいです。最後のlをコピペしそこなったみたいで。もう一度貼ります。ごめんです。

​http://www.y-adagio.com/public/standards/tr_css2/box.html​
回答者：Yama-tani
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/07/19 13:54
この回答へのお礼再度のアドバイスをありがとうございます。

リンクを確認して頂きありがとうござうます。
リンク先を拝見しましたとても参考になりました。

​http://www.y-adagio.com/public/standards/tr_css2/toc.html​
のページを登録させて頂きました。

回答良回答20pt
ANo.2 いきなりリファレンスはお奨めできないが……。
正式な物は、読破するにも殺人的な体力と持久力と忍耐力を要求され、振りかざせば凶器となるもの。ちょっとわかってきてからの方が挫折しないです。わかってきてから思い通りに行かない場合の確認的に使われることをお奨めします。

邦訳はいろいろあります。
​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...​

えっと、わかっておられると思いますが、仕様書どおりに作成しても、正しく解釈しないブラウザがたくさんありますので、正解だけを求めると、前途多難ですよ。がんばってください。
回答者：Yama-tani
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/07/19 08:36
この回答へのお礼アドバイスをありがとうございます。

はい、原書のリファレンスは厳しい物があります。邦訳が有れば嬉しく思います。

アドバイス頂いた
​http://www.y-adagio.com/public/standards/tr_css2/box.htm&#8203;​
ページですが、残園ながら「Not Found」でした、少しディレクトリを遡ってみましたが、該当のページを見つけ出す事が出来ませんでした。

>プロパティから引けるindexを作成されているページがありますので、紹介します。
​http://www.lucky-bag.com/appendix/css-property/css-property-list_ja...​
上記ページとても参考になります。知りたかったのは上記のようなページでした。ありがとうございます。

>えっと、わかっておられると思いますが、仕様書どおりに作成しても、正しく解釈しないブラウザがたくさんありますので、正解だけを求めると、前途多難ですよ。がんばってください。

ありがとうございます。まずは基本が判っていないと、挙動の判断が出来ない為、W3C 本来の趣旨を知りたいと思いました。また、何が何でも W3C に沿って言う気持ちでも無く、柔軟に対応出来るようになりたいと思っています。

アドバイスとても参考になりました。

回答良回答10pt
ANo.1 ​http://www.w3.org/TR/CSS21/box.html​ をどうぞ。

しょっぱなに図示されたContentの幅と高さが、widthプロパティと
heightプロパティで与えられた値を持つと明示され、その周囲に
padding、border、marginが取り囲むと書かれています。
回答者：grumpy_the_dwarf
種類：回答
どんな人：一般人
自信：参考意見
回答日時：
08/07/18 20:03
この回答へのお礼アドバイスをありがとうございました。

BOX モデルですね、アドバイスを頂いて思い出しました。

BOX モデルへのリンクをありがとうございました。
W3C 的には、やっぱりコンテンツのみの値を示すのだと理解できました。

width で、padding,border まで含まれていると言うのは、IE の互換モードの話だったも知れません。

これで疑問がすっきりしました。
 
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ