HiGash.Net ホームページへ戻る

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

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

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

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

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

  • HOME
  • 製品・サービス
  • 会社情報
  • CSR
  • 採用情報
  • お問い合わせ

たとえば、こういう(↑)普通のナビゲーション。
これを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のトップページがこの方法で画像を表示していました。
ページ最適化を考えると、何枚も画像を読み込むのはよくないですからね。

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

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

5 件のコメント/トラックバックをいただきました。ありがとうございます!!

  1. masu より:

    はじめまして。

    すごい!!
    と思い上記のソースをそのままコピーさせていただいたのですが、
    どうしても【hover】の際に画像が変わりません。

    何か他にも必要なことがあるのでしょうか?

    もう1点ですが、上記にプラスして、
    【今いるページ】をさらに別の画像に入れ替える方法は
    ありますでしょうか?

    ありましたらアドバイスお願いします。

  2. HiGash.Net より:

    > masuさん
    コメントありがとうございます。
    エントリーには書いていませんが(すいません)、
    aタグに何かしらスタイルが適用されていないと
    IEでうまく動かないことがあるようです。
    a { visibility:visible; } とか、適当でいいので
    aタグに何かスタイルを適用してみてください。

    あと、今いる(カレント)ページを別画像にする方法ですが、
    カレントの場合の画像も1枚絵にしてしまって、
    liかaのclassをカレントの場合だけ変更してしまえばよいかと。
    またはyuga.jsのように、
    JavaScriptを使ってカレントリンクの画像を変更する方法もあります。
    http://www.kyosuke.jp/yugajs/
    ご参考まで。

  3. jyon より:

    こんにちは。
    とてもいい記事ですね。「なるほど!」と感嘆いたしました。
    さっそく試してみたのですが
    上記にあるように、aタグにスタイルを適用させても
    IEでhoverした際に画像が変わらないのです。
    まだ他に必要なことはありますか?(IE6でのみ確認してます)
    他のブラウザではうまくいくのですが。。。
    それとも自分の記述ミスなのでしょうか。
    気が向いたらで結構ですので、お教えいただけると幸いです。

  4. HiGash.Net より:

    > jyonさん
    コメントありがとうございます。
    そしてレスが遅くなってすいません。。。
    うーん。IE6でうまくいかないですか。なんででしょうねぇ。。。
    aタグにスタイルを当てて解決したという事例以外はちょっとわかりません。
    ゴメンナサイ。

  5. パンダ より:

    こんにちは。
    Webサイト制作会社への就職を目標に勉強している者です。

    さて、上記のソースを参考につくってみたのですが、
    リンクがうまくつながりません。
    すべてのaタグが、一番最後のliで指定したリンク先につながってしまいます。
    a:hoverは使っていません。marginやlist-styleはリセット済みです。

    わかりづらいかもしれませんが、ご教授いただけたらと存じます。

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20100731/how_to_make_navi_wo_csssprite.html/trackback/

Preview

トラックバック
http://higash.net/20100731/how_to_make_navi_wo_csssprite.html/trackback/

Page Top