スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

背景画像を使わずにCSSスプライトをする方法

背景画像を使わずにCSSスプライトを実現する方法が紹介されていたので、参考にしてメニューを作成してみました。背景画像ではないので、プリントアウトしても問題なく表示されます。

背景画像なしのメニューサンプル

  • menu1
  • menu2
  • menu3
  • menu4

画像を背景として指定するのではなく、普通に imgタグで設定します。

メニュー画像

サンプルで使用している画像はこうなっています。

背景画像なしメニュー

サンプルのソース

HTMLとCSSのソースです。

<style type="text/css">
#sample_menu {
  width: 500px;
  height: 60px;
  margin: 2em 0;
  overflow: hidden;
}
#sample_menu li {
  list-style-type: none;
  float: left;
}
#sample_menu li a {
  display: block;
  width: 125px;
  overflow: hidden;
}
#sample_menu li img {
  border: none;
}
#sample_menu li.li_02 img {
  margin-left: -125px;
}
#sample_menu li.li_03 img {
  margin-left: -250px;
}
#sample_menu li.li_04 img {
  margin-left: -375px;
}
#sample_menu li a:hover img {
  margin-top: -60px;
}
* html #sample_menu li a:hover {
  zoom: 1;   /* for IE6 */
}
</style>
<ul id="sample_menu">
  <li class="li_01"><a href="#"><img src="menu.jpg" alt="menu1" /></a></li>
  <li class="li_02"><a href="#"><img src="menu.jpg" alt="menu2" /></a></li>
  <li class="li_03"><a href="#"><img src="menu.jpg" alt="menu3" /></a></li>
  <li class="li_04"><a href="#"><img src="menu.jpg" alt="menu4" /></a></li>
</ul>

ポイントは、要素に対してメニューの高さを指定し、aタグに overflow: hidden; を設定すること。そしてロールオーバー時にマイナスマージンで画像を移動させることです。

あと、元サイトではIE6は非対応になっていますが、対応させる場合は aタグの :hover に zoom: 1; を設定すると動作します。

CSSスプライトを覚えたての頃は、メニューを作るときに使っては印刷の問題に悩まされたりもしましたが、この方法なら大丈夫ですね。次にサイトを作るときは試してみようと思います。

元サイト
CSS Sprites w/out Using Background Images | HTML/CSS Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。