CSSスプライトを使ってアイコンを表示する

1枚の画像でアイコンを切り替えるCSSスプライト

CSSスプライトは1枚の画像に複数のアイコンを配置し、background-positionプロパティで表示を制御するCSSテクニックの1つです。
表示する画像位置の細かい指定が必要ですが、リソースの読み込みを減らすことができるメリットがあります。

今回は次のように10個のアイコンを1枚の画像に配置して、CSSスプライトで表示を制御します。

今回は上のアイコン画像を、グローバルナビゲーションに表示するよう設定していきます。

グローバルナビゲーションのHTMLから紹介します。

HTMLコード例

<nav id="g_navi">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/concept">コンセプト</a></li>
    <li><a href="/menu">メニュー</a></li>
    <li><a href="/access">アクセス</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

メニューボタンをul要素とli要素でマークアップし、さらにナビゲーションを表すnav要素で囲います。
ボタンはそれぞれリンクを設定するため、li要素の子孫要素としてa要素を配置します。

続いて、今回のメニューボタンのCSSコードを紹介します。
赤い箇所はCSSスプライトを使っている部分です。

CSS コード例

#g_navi ul li a::before {
  display: inline-block;
  content: "";
  margin-right: 10px;
  width: 25px;
  height: 25px;
  line-height: 1.6em;
  vertical-align: bottom;
  background-image: url(./images/bg_navigation.png);
  background-size: 125px 50px;
  background-repeat: no-repeat;
}
#g_navi ul li:nth-child(1) a::before {
  background-position: 0 0;
}
#g_navi ul li:nth-child(1) a:hover::before {
  background-position: 0 -25px;
}
#g_navi ul li:nth-child(2) a::before {
  background-position: -25px 0;
}
#g_navi ul li:nth-child(2) a:hover::before {
  background-position: -25px -25px;
}
#g_navi ul li:nth-child(3) a::before {
  background-position: -50px 0;
}
#g_navi ul li:nth-child(3) a:hover::before {
  background-position: -50px -25px;
}
#g_navi ul li:nth-child(4) a::before {
  background-position: -75px 0;
}
#g_navi ul li:nth-child(4) a:hover::before {
  background-position: -75px -25px;
}
#g_navi ul li:nth-child(5) a::before {
  background-position: -100px 0;
}
#g_navi ul li:nth-child(5) a:hover::before {
  background-position: -100px -25px;
}

上から順に、CSSコードの意味を解説していきます。

CSSの解説

まず、擬似要素「::before」を使って、ナビゲーションの全てのボタンに共通で、アイコンを表示するための縦横25pxの空要素を設置しています。

全てのメニューボタンにアイコン表示枠を設定

#g_navi ul li a::before {
  display: inline-block;
  content: "";
  margin-right: 10px;
  width: 25px;
  height: 25px;
  line-height: 1.6em;
  vertical-align: bottom;
  background-image: url(./images/bg_navigation.png);
  background-size: 125px 50px;
  background-repeat: no-repeat;
}

次のようなイメージで全てボタンにアイコンを表示する枠が設置されます。

line-heightプロパティ、vertical-alignプロパティはメニューボタンのテキストとアイコンの表示位置を中央揃えにするために指定しています。

全てのメニューボタンで使用する画像は同じなので、共通の指定となる画像パス、画像サイズ、繰り返し表示についてもここに記述をします。
なお、アイコンの画像は元のサイズは横250px、縦100pxですが、Retinaなど高解像度のディスプレイ向けに1/2サイズを指定しています。

続いて、1つ目の「ホーム」ボタンに対するCSSスプライトを指定しています。

「ホーム」ボタンにアイコンを表示

#g_navi ul li:nth-child(1) a::before {
  background-position: 0 0;
}
#g_navi ul li:nth-child(1) a:hover::before {
  background-position: 0 -25px;
}

セレクタ「li:nth-child(1)」が1つ目のボタンを指します。
これ以降のボタンも同様に、 「コンセプト」は「li:nth-child(2)」、「メニュー」は「li:nth-child(3)」と続きます。

background-positionプロパティは「X軸 Y軸」の形式で画像の表示位置を指定し、通常時は「0 0」、ホバー時(a:hover::before)には「0 -25px」となっています。
この指定は次のようなイメージです。

赤い四角は擬似要素「::before」で指定した縦横25pxの範囲、四角い囲みの左上にある赤丸がbackground-positionプロパティで指定した表示する開始位置です。

ホバー時はY軸のみ「-25px」ずらし、下側のアイコンに切り替える仕組みです。

2つ目以降の画像は、X軸に「-25px」ずつスライドさせて表示させます。
ホバー時のY軸を「-25px」ずらすところは共通です。

以上のように、CSSスプライトでは画像のX軸とY軸を指定して表示を切り替えます。