ﾏｳｽを載せるといろいろ変化します。
↓これはｳｨﾝﾄﾞｳｻｲｽﾞを変更しても、自動調整されます。
border 1
border 2000 中央区
border 2001 浪速区
border 2002 天王寺区
border 2003 西成区
<style TYPE="text/css"><!--
.span1 {width:300;padding-left:10;
background-color:azure;
color:navy;font:14pt "Times New
Roman";
border-left:5mm
solid maroon;
border-right:8mm
solid gray}
.span2 {width:300;padding-left:10;
background-color:navy;
color:azure;font:14pt "Times New
Roman";
border-left:10mm
outset lime;
border-right:8mm
inset pink}
--></style>
<script language="JavaScript"><!--
function Init(){ //＜dv1＞を初期化
dv1.style.color = "navy";
dv1.style.backgroundColor = "";
dv1.style.borderTop = "thin solid
green";
dv1.style.borderBottom = "thin solid
green";
dv1.style.borderLeft = "30 solid
green";
dv1.style.borderRight = "solid
green";
dv1.style.borderRightWidth
= document.body.clientWidth
- 30 - 200;
}
function Border1(obj,c){ //＜dv1＞にﾏｳｽ載せた時
obj.style.borderLeftColor = c;
obj.style.color = c;
obj.style.backgroundColor = "black";
}
window.onresize=Init;//ｳｨﾝﾄﾞｳｻｲｽﾞが変化した時に再調整
//--></script>
</head>
<body onload="Init();">
<div id="dv1" style="font:16pt 'Times New Roman';
text-align:center"
onmouseover="Border1(this,'pink');"
onmouseout="Init();">
border 1</div>
<div>
<span class="span1" onmouseover="this.className='span2';"
onmouseout="this.className='span1';">
border 2000 中央区</span>
･･･(以下は省略)
</div>
END(99/8/17)