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/
のページを見つけましたが、リファレンスを見つけられませんでした。
お礼
回答ありがとうございます。 なにぶん初心者なもんで、本のレイアウトを参考にしておりました。