web002 CSS Sprite

CSSスプライトの１事例

■手番
※Illustratorで作成したスプライト用の画像サイズ980x110
※1ボタンは140x50
・ナビゲーションとしてリスト作成(html)
・background-imageで画像を指定(css)
・bakcground-positionで画像の位置指定(css)

■コード
html

<div class="header">
<h1><img src="img/h1-logo.png" alt="hatena"></h1>
<ul class="nav">
<li id="top"><a href="#">トップページ</a></li>
<li id="solution"><a href="#">ソリューション</a></li>
<li id="achivement"><a href="#">実績紹介</a></li>
<li id="pertners"><a href="#">パートナー</a></li>
<li id="customers"><a href="#">カスタマー</a></li>
<li id="company"><a href="#">会社概要</a></li>
<li id="about"><a href="#">お問い合わせ</a></li>
</ul><!-- .nav -->
</div><!-- .header -->

css

.nav {
  overflow: hidden;
}
.nav li {
  float: left;
  white-space: nowrap;
  text-indent: 100%;
}
.nav a {
  width: 140px;
  height: 50px;
  display: block;
  background: url(../img/nav_sprite.png) no-repeat;
}

/*nav-spriteのポジショニング*/
li#top a {background-position: 0 0;}
li#solution a {background-position: -140px 0;}
li#achivement a {background-position: -280px 0;}
li#pertners a {background-position: -420px 0;}
li#customers a {background-position: -560px 0;}
li#company a {background-position: -700px 0;}
li#about a {background-position: -840px 0;}

/*nav-spriteのhover*/
li#top a:hover {background-position: 0 -60px;}
li#solution a:hover {background-position: -140px -60px;}
li#achivement a:hover {background-position: -280px -60px;}
li#pertners a:hover {background-position: -420px -60px;}
li#customers a:hover {background-position: -560px -60px;}
li#company a:hover {background-position: -700px -60px;}
li#about a:hover {background-position: -840px -60px;}