背景画像じゃないのに1枚画像でナビゲーションを作る方法

もう2年近く前のエントリーなんだけど、今でも何気にアクセスが多いのが 僕がCSSによる “画像置換” を使わなくなった3つの理由 というエントリー。当ブログへのアクセスが一気に増えるきっかけとなったのが、このエントリーでした。

基本的にこの頃から僕のポリシーは変わってません。印刷用ページやモバイルのことを特に考える必要がないならば、画像置換はあんまり使わない。
だから画像はIMGタグで配置していくわけなんですが、今回はIMGタグでも背景画像を使ったCSS Spriteみたいなことができるよ、というのを参考までにご紹介。

たとえば、こういう（↑）普通のナビゲーション。
これをIMGタグを使って1枚画像で実現するには、以下のようなHTMLとCSSを書けばOKです。

HTML

<ul id="sample_navi">
<li class="home"><a href="#"><img src="navi.png" alt="HOME"
width="500" height="100" /></a></li>
<li class="service"><a href="#"><img src="navi.png" alt="製品・サービス"
width="500" height="100" /></a></li>
<li class="company"><a href="#"><img src="navi.png" alt="会社情報"
width="500" height="100" /></a></li>
<li class="csr"><a href="#"><img src="navi.png" alt="CSR"
width="500" height="100" /></a></li>
<li class="recruit"><a href="#"><img src="navi.png" alt="採用情報"
width="500" height="100" /></a></li>
<li class="contact"><a href="#"><img src="navi.png" alt="お問い合わせ"
width="500" height="100" /></a></li>
</ul>

CSS

ul#sample_navi {
overflow:hidden;
margin:2em auto;
width:500px;
height:50px;
}

ul#sample_navi li {
float:left;
height:50px;
list-style:none;
overflow:hidden;
position:relative;
margin:0;
}

ul#sample_navi li img {
position:absolute;
}

ul#sample_navi li.home {
width:72px;
}

ul#sample_navi li.home img {
left:0;
top:0;
}

ul#sample_navi li.home a:hover img {
left:0;
top:-50px;
}

ul#sample_navi li.service {
width:106px;
}

ul#sample_navi li.service img {
left:-72px;
top:0;
}

ul#sample_navi li.service a:hover img {
left:-72px;
top:-50px;
}

ul#sample_navi li.company {
width:81px;
}

ul#sample_navi li.company img {
left:-178px;
top:0;
}

ul#sample_navi li.company a:hover img {
left:-178px;
top:-50px;
}

ul#sample_navi li.csr {
width:61px;
}

ul#sample_navi li.csr img {
left:-259px;
top:0;
}

ul#sample_navi li.csr a:hover img {
left:-259px;
top:-50px;
}

ul#sample_navi li.recruit {
width:80px;
}

ul#sample_navi li.recruit img {
left:-320px;
top:0;
}

ul#sample_navi li.recruit a:hover img {
left:-320px;
top:-50px;
}

ul#sample_navi li.contact {
width:100px;
}

ul#sample_navi li.contact img {
left:-400px;
top:0;
}

ul#sample_navi li.contact a:hover img {
left:-400px;
top:-50px;
}

単純にリストタグ内の画像を絶対値で配置しているだけです。難しいことはしてません。
画像の表示位置の計算も背景画像を使ったCSS Spriteのときと同じです。CSSを書くのは少し大変だけど、画像側に修正が入ったときは1枚画像のほうが楽かも。

少し前のGoogleのトップページがこの方法で画像を表示していました。
ページ最適化を考えると、何枚も画像を読み込むのはよくないですからね。

まあ、こういう方法もあるということで。