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を使ったちょっと複雑なデザイン