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

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

ブラウザプレビュー：

ポイント：

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

参考

隠しテキストと隠しリンク - Search Console ヘルプ
text-indent-9999pxによる画像置換えと隠しテキストスパム(ペナルティ)について | WP SEOブログ

ソース

用意した画像：

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;
}