以下の手順に沿って、divを重ねてウェブページのレイアウトを作りましょう。

1.縦にdivタグを重ねる

<div>
outline
<div> a </div>
<div> b </div>
<div> c </div>
<div> d </div>
</div>

2.idタグで色を付ける（わかりやすさのためにも）

/*cssファイル*/
div#site-box{ border-style: solid; }
div#a-box{ background-color: pink; }
div#b-box{ background-color: orange; }
div#c-box{ background-color: red; }
div#d-box{ background-color: blue; }

/*htmlファイル*/
<div id="site-box">
outline
<div id="a-box"> a </div>
<div id="b-box"> b </div>
<div id="c-box"> c </div>
<div id="d-box"> d </div>
</div>

3.floatタグで左右に配置

/*cssファイル*/
div#site-box{ (変更なし) }
div#a-box2{ background-color: pink; }
div#b-box2{ background-color: orange; float: left;}
div#c-box2{ background-color: red; float: right;}
div#d-box2{ background-color: blue; }

/*htmlファイル*/
<div id="site-box">
outline
<div id="a-box2"> a </div>
<div id="b-box2"> b </div>
<div id="c-box2"> c </div>
<div id="d-box2"> d </div>
</div>

bとcは左と右によっているが、横幅の指定がないのでdが隙間に入り、レイアウトが崩れる。

4.widthタグで横幅を指定＆clearタグでレイアウトの崩れを防ぐ

上記のどちらか一つでも崩れを防げる場合もありますが、念のため両方指定します

/*cssファイル*/
div#site-box3{ border-style: solid; width : 750px ;}
div#a-box3{ background-color: pink; width : 750px ;}
div#b-box3{ background-color: orange;width : 500px ; float: left;}
div#c-box3{ background-color: red; width : 250px ; float: right;}
div#d-box3{ background-color: blue; width : 750px ; clear: both;}

/*htmlファイル*/
<div id="site-box3">
outline
<div id="a-box3"> a </div>
<div id="b-box3"> b </div>
<div id="c-box3"> c </div>
<div id="d-box3"> d </div>
</div>

5.borderラインを加えよう

更にborderで枠線をつけるとメリハリがつきますが、borderの幅を考えて指定をしないとレイアウトが崩れます。

/*cssファイル*/
div#site-box4{
border : 3px solid white;
width : 756px ; /*両サイドのborder幅を含めた幅なので6px足す*/
}
div#a-box4{
background-color: pink;
width : 756px ;
border-bottom: 3px solid white;
}
div#b-box4{
background-color: orange;width : 500px ; float: left;
border-right: 3px solid yellow;
}
div#c-box4{
background-color: red;
width : 250px ;
float: right;
border-left: 3px solid white;
}
div#d-box4{
background-color: blue;
width : 756px ;
clear: both;
border-top: 3px solid white;
}

/*htmlファイル*/
<div id="site-box4">
outline
<div id="a-box4"> a </div>
<div id="b-box4"> b </div>
<div id="c-box4"> c </div>
<div id="d-box4"> d </div>
</div>

Page Title

Content 1

aaaaaa aaaaaa aaaaa aaaaa aaaaa aaa

Content 2