opactyを使ってナビゲーションボタンを作ってみる…

ナビゲーションボタンを作るとき、背景だけ画像にして、テキストは画像化しないという方法があります。

でもこの方法だと、カッコいいフォントを使ったり、細かいカーニングとかがうまくいかないので、テキストごと画像化してしまうことがあります。で、実際の画像はHTML上でimgとしておくのではなく、CSSで背景として指定してやれば、hoverを使って、マウスオーバーのときと通常のときとで、表示を変えられるので、ナビゲーション感が出ます。

でも、HTML上に書かれたテキストをどのようにして非表示にするか、という問題がでてきます。text-indent:-9999pxとかで、うーんと遠くまでテキストを飛ばしてしまうというテクニックを使うことが多いみたいです。あと、根性で とか入力しちゃうという、かなりな力技もあるかも。( 技は、実際にHTML上でなにもないわけだから、リンクとしてかなりマズイというのは、見習でも分かります…)

ただ、うわさによると、text-indentを使いすぎると、SEO的にあれだったり、google先生がお嫌いだったりするらしいので、考えないわけではないです。

ということで、先日使ったopactyですが、これ、バナーとかだったら、ちょっと色がうすくなったりすると、「あぁ、マウスが乗っかってるな」って十分分かるのですが、ナビゲーションボタンで、色がうすくなるだけだと、ちょっと物足りないかもです。

(X)HTML

<ol>
<li><a href="#"><img src="img/btn01.gif" width="100" height="50" alt="ボタン" /></a></li>
<li><a href="#"><img src="img/btn01.gif" width="100" height="50" alt="ボタン" /></a></li>
<li><a href="#"><img src="img/btn01.gif" width="100" height="50" alt="ボタン" /></a></li>
<li><a href="#"><img src="img/btn01.gif" width="100" height="50" alt="ボタン" /></a></li>
</ol>

CSS

* {
margin:0;
padding:0;
}
ol {
list-style-type:none;
background-color:#FF6633;
height:50px;
margin:auto;
width:400px;
}
li {
float:left;
}
a {
text-decoration:none;
opacity:1;
}
a img{
width:100px;
filter: alpha(opacity=100);
border:none;
}
a:hover{
opacity:0.5;
}
a:hover img{
width:100px;
filter: alpha(opacity=50);
}

サンプルはこちら

つまりは、liにimgを張り込んでいるのですが、hoverしたときに、半分だけ色がうすくなります。で、olがliの後ろ側にあるので、olに背景色として指定した色が透けて見えるという仕組みです。ちなみに、liにfloatがかかっているので、その親要素であるolがそのままではliの高さを認識してくれないので、背景色が出てくれません。ということで便宜的に高さだとか、幅をolに指定してありますが、クリアフィックスを使うとか、いろいろ方法はあるかと思います。

と、とりあえず、コーディング的にはナビゲーションができましたが、opactyを使って、上の画像の色と、下の背景色で、きれいなhoverの色を指定するのって、難しいよな、やっぱり。なんか、いい計算方法とかあるのかなぁと悩む、見習です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントフィード

トラックバックURL: https://pc.beginners-luck.net/pcwp/2011/12/07/opacity-navi-btn.html/trackback