divとfloatで骨格を作る
ドリル式ホームページの作り方TOP >> Lesson8〜floatを使ったレイアウト〜 >> divとfloatで骨格を作る
divでくくられた包括ブロックをfloatを使って左に寄せることによって、2カラムのサイト骨格を作ります。
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.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>
<title>ホームページ作成講座</title>
<meta name="description" content="ホームページ作成の方法を初心者さんにもわかるように、簡単に解説している講座です。" />
<meta name="keywords" content="ホームページ,作成,講座" />
<meta name="author" content="wakabagari" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<div id="b1234">
<div id="b1">タイトル</div>
<p id="a2"><img src="gif/25.gif" alt="境界画像" /></p>
<div id="b2">サイドメニュー</div>
<div id="b3">コンテンツ</div>
<div id="b4">フッター</div>
</div>
</body>
</html>
上のように、htmlにdiv骨格を作ったら、style.cssを編集します。
div#b2,div#b3に共にfloat:left、もしくはfloat:leftとfloat:rightを指定して左右に寄せたあと、div#b4にclear:bothを指定して、フッターの流し込みを解除します。
カラム落ちを防ぐために、width(幅）も一緒に指定します。
（div#b2の幅＋div#b3の幅＝div#b1234の幅）になるようにwidthを指定すると共に、b1234とb1にposition:relativeを指定して、基点を変更します。
#b1234 {
border-top:5px solid #222;
width:640px;
background:#fff;
position:relative;
margin:auto;
}
#b1 {
position:relative;
}
#b2 {
float:left;
width:180px;
}
#b3 {
float:right;
width:440px;
}
#b4 {
clear:both;
width:640px;
}
p#a2 {
margin:0 0 10px 10px;
}