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）には反映されないのだ。 この解消については以下を参照。
つまり、以下のいずれかを行わなくてはならない。
子ボックス並びの最後に、「<div style="clear:both"></div>」という子ボックスを置く。
- 親ボックスに「overflow:hidden」を指定する。