del.icio.usのタグ一覧を再現する
CSSでロールオーバーすると、オーバー時に読み込みを開始するため、一瞬真白になってしまう。JavaScriptを使えば事前に読み込ませることもできるけど、余計なファイルが増え、HTMLが汚くなるのであんまり使いたくない。でもCSSでなんとかやりたい。
それを実現するテクニックとして最近よく使われるのが背景画像の位置をずらすやり方です。Googleも節約のためにこの技使ってます。今回はdel.icio.usのタグ一覧が良いサンプルになりそうだったので、勉強がてら、再現してみました。
こんなの
まず素材をダウンロードします。自前で用意するの面倒なので、そのまま使っちゃいます。
http://l.yimg.com/hr/10331/img/del_sprite_tags.gif
見てのとおり、すべての画像が一枚に収められています。
画像指定のポイントはこれ。
>|html|
a{
background-image: url('del_sprite_tags.gif');
background-position: 0px -159px;
}
a:hover{
background-position: 0px -119px;
}
||<
background-positionは背景画像の位置を指定します。bottomやrightなら結構使う機会もありますが、ピクセル単位でも指定できます。要素の左上位置からのoffsetを指定するっぽいです。正の値を入れるとどんどん見えないところにいってしまうので負の値を入れます。これだけで画像の切り替えができます。
あとはブラウザのCSSをリセットして、paddingを適当に指定して揃えるとできあがり。複雑そうに見えて結構簡単です。
メリットは
- HTMLソースがきれい
- JavaScriptを使わない
デメリットは
ってところでしょうか。画像とpositionの対応表さえあれば難なく使えそうな気はします。
del.icio.usのこのデザインはパンくずリストにも使えそうですね。
全ソース
>|html|
<html>
<head>
<style type="text/css">
{
margin:0px;
padding:0px;
line-height: 1;
}
ul{
margin: 20px;
}
li{
display:inline;
}
span{
background-color: #6C6C6C;
padding-right: 10px;
font-size: 13px;
padding-top: 4px;
padding-left: 4px;
padding-bottom: 2px;
}
a{
background-image: url('del_sprite_tags.gif');
background-position: 0px -159px;
background-repeat: no-repeat;
padding-bottom: 2px;
padding-top: 1px;
padding-left: 8px;
text-decoration: none;
color: #FFF;
margin-left: -10px;
}
a:hover span{
background-color: #8F8F8F;
}
a:hover{
background-position: 0px -119px;
}
</style>
</head>
<body>
<ul>
<li><a href=""><span>hoge</span></a></li>
<li><a href=""><span>hoge</span></a></li>
<li><a href=""><span>hoge</span></a></li>
<li><a href=""><span>hoge</span></a></li>
</ul>
</body>
</html>
||<
たしかにスマート！