今回は本格的に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タグを埋めたところ、うまくいきました。
うーん・・・解決してもいまいちすっきりしないところも、プログラミングとは違いますね。。。