今回は本格的にHTMLとCSSのコーディングをしました。いつもはWebデザイナーさんにすっかりお任せするか、シンプルな画面を作るかだったので、今回ほどにがっつりとコーディングを行うことはあまりありません。
しかし、いまいち勝手が分かりません。非常に仕組みは簡単なのですが、ブラウザ毎に挙動が違ったり、裏技があったり・・・。プログラムを書くのとは、ちょっと違う世界に思えます。
とはいえ、HTMLとCSSの仕様書をじっくり読んで・・・という時間もなかったので、Google先生とひたすら自己流でやっつけました。
その中でも、ちょっと手こずったところを書いてみます。
トップページの吹き出しは、CSSのhoverを利用して出しています。
hoverはとても便利で、jqueryを使わないでも簡単な動きができます。
仕組みはとても簡単。
<style type="text/css">
.d1{
position:absolute;
width:100px;
height:100px;
border: medium solid #D40000;
top:100px;
left:100px;
}
.d1:hover div{
display:block;
}
.d2{
display:none;
position:absolute;
width:100px;
height:100px;
border: medium solid #2A1FFF;
top:10px;
left:10px;
}
</style>
<div class="d1">
<div class="d2">テストテスト</div>
</div>
と思ったのですが、IE8で動きません。
分かりやすいように枠線を出していますが、この枠線の上にマウスがあるときしかd2のDIVタグが表示されません。枠線を消してしまうと、一切反応しなくなります。
結局どうしたかというと・・・。
.d1{
background-image:url(img/spacer.gif); /*透過GIFで埋める*/
background-repeat:repeat;
position:absolute;
width:100px;
height:100px;
border: medium solid #D40000;
top:100px;
left:100px;
}
こんな感じで、昔ながらのspacer.gifでd1のDIVタグを埋めたところ、うまくいきました。
うーん・・・解決してもいまいちすっきりしないところも、プログラミングとは違いますね。。。
