CSS：区画のレイアウト1

質問

現在、CSSの練習中なんですが、

http://kokoro.es.land.to/HTML/Rensyuu.html

上記のURLで、最終的にURL内の下の図（CSSによる区画のレイアウト）のようなレイアウトにしたいのですが、Kukaku4_3（class名、色：red）のところで画面のあるとおり、Kukaku4_2（class名、色：navy）から下の方に範囲が伸びてしまい、うまくいきません。ほかにもいろいろ試したのですが、URL内の下の図（CSSによる区画のレイアウト）のようにするにはどうすればよいでしょうか？

回答よろしくお願いします。

div { float: left;}

div.Kukaku1 { background-color:blue;
width: 900px;
height: 179px
}
div.Kukaku2_1 { background-color:green;
width: 300px;
height: 20px
}

div.Kukaku2_2 { background-color:aqua;
width: 300px;
height: 20px
}
div.Kukaku2_3 { background-color:gray;
width: 300px;
height: 20px
}

div.Kukaku3_1 { background-color: black;
width: 250px;
height: 300px;
}

div.Kukaku3_2 { background-color: fuchsia;
width: 650px;
height: 150px
}

div.Kukaku3_3 { background-color: lime;
width: 650px;
height: 150px
}

div.Kukaku4_1 { background-color: maroon;
width: 500px;
height: 80px
}

div.Kukaku4_2 { background-color: navy;
width: 500px;
height: 70px
}

div.Kukaku4_3 { background-color: red;
width: 400px;
height: 150px
}

回答No.1

noname#56882 · ベストアンサー

もっと簡単なやり方があるのかもしれませんが、とりあえず下記では出来ました。

CSS記述例
#wrapper{/* 色のボックスをひとまとめにする大きなボックス */
width:900px;
}
div{ float: left;}
div.Kukaku1{
background-color:blue;
width: 900px;
height: 179px;
}
div.Kukaku2_1{
background-color:green;
width: 300px;
height: 20px;
}
div.Kukaku2_2{
background-color:aqua;
width: 300px;
height: 20px;
}
div.Kukaku2_3{
background-color:gray;
width: 300px;
height: 20px;
}
div.Kukaku3_1{
background-color: black;
width: 250px;
height: 300px;
}
div.Kukaku3_2{
background-color: fuchsia;
width: 650px;
height: 150px;
}
div.Kukaku3_3{
background-color: lime;
width: 650px;
height: 150px;
}
div.kukaku4{/* Kukaku4_1とKukaku4_2をひとまとめにするボックス */
width: 500px;
height: 150px;
}
div.Kukaku4_1{
background-color: maroon;
width: 500px;
height: 80px;
}
div.Kukaku4_2{
background-color: navy;
width: 500px;
height: 70px;
}
div.Kukaku4_3{
float:right;/* 右へ */
background-color: red;
width: 400px;
height: 150px;
}

HTML記述例
<div id="wrapper">
<div class="Kukaku1"></div>
<div class="Kukaku2_1"></div>
<div class="Kukaku2_2"></div>
<div class="Kukaku2_3"></div>
<div class="Kukaku3_1"></div>
<div class="Kukaku3_2"></div>
<div class="Kukaku3_3"></div>
<div class="kukaku4">
<div class="Kukaku4_1"></div>
<div class="Kukaku4_2"></div>
</div>
<div class="Kukaku4_3"></div>
</div>

お礼

Kukaku4_1とKukaku4_2を一つにまとめるdivを作るとできるわけですね。

ありがとうございました。