スタイルシートでのレイアウトには、この
<DIV>のネスト（入れ子）という感覚がとても大切です。
それでは、まず、<DIV>でつくったボックスの中に、
１つだけ<DIV>でつくったボックスをネストしてみてください。
一般的に、ネスト先のボックスを親ボックス。
ネストするボックスのことを、子ボックスと呼びます。
親ボックスの定義内容は、
横幅 300px 、
縦幅 200px 、
背景色 #FFCCCC
子ボックスの定義内容は、
横幅 20px 、
縦幅 20px 、
背景色 #CC0000
この２つのボックスをつかって、下のような<DIV>のネストをつくってみてください。
まず、親と子ボックスの、スタイルシートの定義内容から。
.box-oya{
width: 300px;
height: 200px;
background-color: #FFCCCC;
}
.box-ko{
width: 20px;
height: 20px;
background-color: #CC0000;
}
そして、このように、スタイルシートの定義をすませたら、
HTMLソース部分に、下のように書き込んでやり、
<DIV>のネストを完成させます。
<div class="box-oya">
<div class="box-ko">
</div>
</div>
親ボックス、<div class="box-oya">〜</div>の間に、
子ボックス、<div class="box-ko"></div>が、ネスト（入れ子）になってます。
これが、<DIV>ボックスのネスト。
こうすることによって、
子ボックスは、親ボックスのスタイルシートの定義内容に影響を受けるようになります。
たとえば、親ボックス「box-oya」の定義内容に、
「テキストカラーを白にする」という定義内容を書き込んであげた場合、
子ボックスでは、テキストカラーの定義をしていないのに、
<div class="box-ko">〜</div>の間に書かれたテキストは、ホワイトで表示されるようになります。
box-oya{
width: 300px;
height: 200px;
background-color: #FFCCCC;
color: #FFFFFF;
/*親ボックスにテキストカラーを定義*/
}
.box-ko{
width: 20px;
height: 20px;
background-color: #CC0000;
}
HTMLソースを書き込んであげます。
<div class="box-oya">
<div class="box-ko"> ★ </div>
</div>
すると、こんなふうに表示されます。
テキストカラーの設定は、親ボックスにしかしてません。
でも、子ボックス内に書かれたテキスト（★）は、ホワイトで表示されてます。
こんなふうに、ネストした<DIV>ボックスは、
ネスト先のボックスの定義を継承するので、（属性により）
この関係を表すために、
親ボックス、子ボックスなどと呼ばれます。
親ボックスと子ボックスの関係をしっかり認識していくと、
スタイルシートの定義が上手になると思います。
