HTML

divに関するテクニック

divを使い任意の矩形領域を描画する方法を調査する。もちろん、CSSを指定しなければならないが、いわゆるスタイルシートではなく、その場で指定する方法をとる。

任意の色を指定した矩形を描画するには以下のようにする。

<div style="background-color:red; width:50px; height:100px"></div>

例えば、色違いの矩形を横に並べて描画するには「float:left」が必要。

※spanではwidth/heightの指定はできないので、divを使うしかないが、そのまま二つのdivを並べても横には並ばない。

<div style="background-color:red; width:50px; height:100px; float:left"></div>
<div style="background-color:green; width:50px; height:100px; float:left"></div>

これら二つの描画矩形に枠をつけたい場合、以下のように更にdivを使う。 以下では枠をつけたdivをさらに横に並べている。

<div style="float:left; margin:5px; border-width:2px; border-color:red; border-style:solid">
　<div style="background-color:red; width:50px; height:100px; float:left"></div>
　<div style="background-color:green; width:50px; height:100px; float:left"></div>
</div>
<div style="float:left; margin:5px; border-width:2px; border-color:red; border-style:solid">
　<div style="background-color:red; width:50px; height:100px; float:left"></div>
　<div style="background-color:green; width:50px; height:100px; float:left"></div>
</div>

上では、marginを使っているが、marginは枠の外側にスペースを空けることになる。枠の内側にスペースを空けるには、paddingを使う。枠の内側にも外側にもスペースを空けるには、paddingとmarginを同時に使う。

<div style="float:left; padding: 3px; margin:3px; border-width:2px; border-color:red; border-style:solid">
 ......

ところが、floatの使用には問題がある。floatを使用したボックス(div)の大きさが、親のボックス(div）には反映されないのだ。 この解消については以下を参照。

• http://archiva.jp/web/html-css/clearfix.html

つまり、以下のいずれかを行わなくてはならない。

• 子ボックス並びの最後に、「<div style="clear:both"></div>」という子ボックスを置く。

• 親ボックスに「overflow:hidden」を指定する。