PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【CSS】 CSS Spritesでナビゲーションを作る

CSS Spritesを利用して、1枚の画像からたくさんの画像(例:ナビゲーション)などを表示する。ブラウザがWebサーバーに要求する画像の量が減り、Webページ表示高速化に繋がる利点がある。

ブラウザプレビュー:

f:id:game-web-design:20140909185232p:plain

ポイント:

CSS Sprites等でテキストを隠す場合はOFF-LEFTを使用します。ここではulに"text-indent: -999em;"を入れてテキストを消しています。
よく隠しテキストはGoogleにペナルティを受けると聞きますが、画像とテキストの内容が一致しない場合ペナルティを受けるようなので、この場合は大丈夫です。

ソース

用意した画像:

f:id:game-web-design:20140909151232p:plain

HTML

<div id="nav">
<ul>
<li id="home"><a href="#">ホーム</a></li>
<li id="food"><a href="#">カフェフード</a></li>
<li id="drink"><a href="#">カフェドリンク</a></li>
<li id="info"><a href="#">インフォメーション</a></li>
<li id="contact"><a href="#">お問い合わせ</a></li>
</ul>
</div>

CSS

#nav{
  width: 150px;
  margin: 20px auto;
}

#nav ul{
  overflow: hidden;
}

#nav li a{
  display: block;
  background: url(../img/btn_h.png) no-repeat left top;
  width: 150px;
  height: 40px;
  border: none;
  text-indent: -999em;
}

li#home a:hover{
  background:url(../img/btn_h.png) no-repeat -150px top;
}

li#food a{
  background: url(../img/btn_h.png) no-repeat left -40px;
}

li#food a:hover{
  background: url(../img/btn_h.png) no-repeat -150px -40px;
}

li#drink a{
  background:url(../img/btn_h.png) no-repeat  left -80px;
}

li#drink a:hover{
  background:url(../img/btn_h.png) no-repeat -150px -80px;
}

li#info a{
  background:url(../img/btn_h.png) no-repeat left -120px;
}

li#info a:hover{
  background:url(../img/btn_h.png) no-repeat -150px -120px;
}

li#contact a{
  background:url(../img/btn_h.png) no-repeat left -160px;
}

li#contact a:hover{
  background:url(../img/btn_h.png) no-repeat -150px -160px;
}