OKANOWEB WEB PARTS SAMPLE

メニュー1
メニュー2
メニュー3
メニュー4
メニュー5

戻る

DIV要素で重ね順を指定することにより、TABLEでは表現できないデザインが可能になります。
<div style="position: absolute; width: 133px; height: 374px; z-index: 2; left: 9px; top: 79px; background-color: #008000" id="layer1">
</div>
<div style="position: absolute; width: 145px; height: 31px; z-index: 3; left: 46px; top: 101px; border: 3px outset #009933; background-color: #33CC33" id="layer2">
<span style="background-color: #33CC33">メニュー1</span></div>
<div style="position: absolute; width: 145px; height: 31px; z-index: 3; left: 46px; top: 149px; border: 3px outset #009933; background-color: #33CC33" id="layer3">
<span style="background-color: #33CC33">メニュー2</span></div>
<div style="position: absolute; width: 145px; height: 31px; z-index: 3; left: 47px; top: 200px; border: 3px outset #009933; background-color: #33CC33" id="layer4">
<span style="background-color: #33CC33">メニュー3</span></div>
<div style="position: absolute; width: 145px; height: 31px; z-index: 3; left: 49px; top: 253px; border: 3px outset #009933; background-color: #33CC33" id="layer5">
<span style="background-color: #33CC33">メニュー4</span></div>
<div style="position: absolute; width: 145px; height: 31px; z-index: 3; left: 50px; top: 302px; border: 3px outset #009933; background-color: #33CC33" id="layer6">
<span style="background-color: #33CC33">メニュー5</span></div>
<div style="position: absolute; width: 145px; height: 31px; z-index: 3; left: 51px; top: 357px; border: 3px outset #009933; background-color: #33CC33" id="layer7">
<span style="background-color: #33CC33">メニュー6</span></div>
<div style="position: absolute; width: 509px; height: 375px; z-index: 2; left: 144px; top: 78px; background-color: #99FF99" id="layer8">
</div>
<div style="position: absolute; width: 411px; height: 328px; z-index: 4; left: 218px; top: 102px" id="layer9">
DIV要素で重ね順を指定することにより、TABLEでは表現できないデザインが可能になります。<p></div>

DIVを使ったちょっと複雑なデザイン