ツールとしてのWeb Developer 2010 は、HTMLとスタイルシートを同時に使う編集作業には、古いバージョンのホームページビルダーより、確実に良さそうですね。何せ、編集段階でCSSファイルへの変更が反映されますので。
本箱をあさると、平成１８年発行の「スタイルシート上級レイアウト」の解説本が出て来た。改めて、Web Developer 2010 を使って、やながら読み直すと、実に分かり易く、勉強になりますね。当時は、こんな簡単には、理解できなかった。そんな記憶が有ります。やっぱり、ツールは大事ですね。
レイアウトに関して、結論として、この本では、positionよりfloatを使えと言う事なんでしょうか。２つの比較を載せますね。
Positionの場合、
HTML：
<!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">
<head>
<title></title>
<link rel="Stylesheet" type="text/css" href="StyleSheet4.css" />
</head>
<body>
<div id="wrapper">
<div id="header"><br />ここがHeader<br /></div>
<div id="container">
<div id="primary"><br />Primary<br /></div>
<div id="secondary"><br />Secondary<br /></div>
</div>
<div id=container2">
<div id="footer"><br />Footer<br /></div>
</div>
</div>
</body>
</html>
CSS:
body
{
text-align:center;
}
#wrapper
{ width:760px;
margin:0 auto;
text-align:left;
}
#header
{
background-color: #dddd00;
height: 70px;
}
#container
{ position:relative;
margin:10px 0 10px 0;
width:100%;
height:auto;
}
#primary
{
position:absolute;
margin-left:210px;
width:210px;
background-color:#c7d5ed;
height:70px;
}
#secondary
{ position:relative;
margin-top:0px;
left:0px;
width:200px;
height:90px;
background-color:#f9cfba;
}
#container2
{ position:relative;
margin:10px 0 10px 0;
width:100%;
height:auto;
}
#footer
{
background-color:#dddddd;
height:50px;
width:100%;
}
Floatの場合、
HTML:
<!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">
<head>
<title></title>
<link rel="Stylesheet" type="text/css" href="StyleSheet5.css" />
</head>
<body>
<div id="wrapper">
<div id="header"><br />header<br /><br /></div>
<div id="primary"><br />primary<br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id="secondary"><br />secondary<br /><br /><br /><br /><br /><br /></div>
<div id="footer"><br />footer<br /><br /></div>
</div>
</body>
</html>
CSS:
body {
}
#wrapper
{
width:760px;
}
#header
{
background-color:#dddddd;
height:50px;
}
#primary
{
float:left;
width:550px;
margin-top:10px;
background-color:#c7d5ed;
}
#secondary
{
float:right;
width:200px;
margin-top:10px;
background-color:#f9cfba;
}
#footer
{
clear:both;
background-color:#dddddd;
margin-top:10px;
height:50px;
}