CSSスプライトを使おう

　CSSスプライトとは、アイコンやロゴを1つの画像にまとめ、背景として読み込む手法です。
HTTPリクエストの数を減らすことができるため、サイトパフォーマンスに劇的な効果があります。
完成イメージ
1つの画像ファイルを読み込み、分割して表示します。

手順

①アイコンの画像を用意します。
以下のサイトの素材を利用しました。
→　IFN イラスト無料ネット
また、TwitterやFacebookが配布している素材もあります。
→　Twitter
→　Face book
②アイコン、背景を1つにまとめた画像を作ります。
以下のサイトを利用すると、簡単に画像をまとめることができます。
→　CSS Sprite Generator
画像が完成しました。

③CSSの背景と「background-position」を利用して、アイコンの位置を指定します。
デフォルトでは、背景画像は左上から表示されます。
たとえば、電源マークは左上からの位置（x:100px、y:90px）をbackground-position: -100px -90px;で調整します。

コード

index.html

<ul class="INF50-50-links">
  <li><i class="sprite-ifn0001"></i><a href="">0001リンク</a></li>
  <li><i class="sprite-ifn0002"></i><a href="">0002リンク</a></li>
  <li><i class="sprite-ifn0003"></i><a href="">0003リンク</a></li>
  <li><i class="sprite-ifn0004"></i><a href="">0004リンク</a></li>
  <li><i class="sprite-ifn0005"></i><a href="">0005リンク</a></li>
  <li><i class="sprite-ifn0006"></i><a href="">0006リンク</a></li>
  <li><i class="sprite-ifn0007"></i><a href="">0007リンク</a></li>
  <li><i class="sprite-ifn0008"></i><a href="">0008リンク</a></li>
  <li><i class="sprite-ifn0009"></i><a href="">0009リンク</a></li>
  <li><i class="sprite-ifn0010"></i><a href="">0010リンク</a></li>
</ul>

<a href=""><i class="sprite-ifn0001"></i></a>
<a href=""><i class="sprite-ifn0002"></i></a>
<a href=""><i class="sprite-ifn0003"></i></a>
<a href=""><i class="sprite-ifn0004"></i></a>
<a href=""><i class="sprite-ifn0005"></i></a>
<a href=""><i class="sprite-ifn0006"></i></a>
<a href=""><i class="sprite-ifn0007"></i></a>
<a href=""><i class="sprite-ifn0008"></i></a>
<a href=""><i class="sprite-ifn0009"></i></a>
<a href=""><i class="sprite-ifn0010"></i></a>

style.css

/* スプライト共通スタイル */
i {
	display: inline-block;
	background: url(../images/sprite-img.png) no-repeat top left;
	vertical-align: middle;
	width: 50px; height: 40px;
}

.INF50-50-links {
	list-style: none;
	margin: 0;
	padding: 0 0 2em;
}

.INF50-50-links li {
	padding: 0 0 0 22px;
}

.sprite-ifn0001{ background-position: 0 0;}
.sprite-ifn0002{ background-position: 0 -90px; }
.sprite-ifn0003{ background-position: 0 -180px; }
.sprite-ifn0004{ background-position: 0 -270px; }
.sprite-ifn0005{ background-position: 0 -360px; }
.sprite-ifn0006{ background-position: 0 -450px; }
.sprite-ifn0007{ background-position: 0 -540px; }
.sprite-ifn0008{ background-position: 0 -630px; }
.sprite-ifn0009{ background-position: 0 -720px; }
.sprite-ifn0010{ background-position: 0 -810px; }

解説

index.html

<ul class="INF50-50-links">
  <li><i class="sprite-ifn0001"></i><a href="">0001リンク</a></li>

・iタグにアイコンを表示します。
・iタグのクラス（class=””）に表示するアイコンを指定します。
・例えば手紙のアイコンを表示する場合は、「class=”sprite-ifn0001″」を指定します。

<a href=""><i class="sprite-ifn0001"></i></a>

・iタグをリンクタグで囲います。
・iタグにアイコンを表示します。
・iタグのクラス（class=””）に表示するアイコンを指定します。
・例えば手紙のアイコンを表示する場合は、「class=”sprite-ifn0001″」を指定します。

style.css

/* スプライト共通スタイル */
i {
	display: inline-block;
	background: url(../images/sprite-img.png) no-repeat top left;
	vertical-align: middle;
	width: 50px; height: 40px;
}

・スプライト共通のスタイルをiタグに指定します。
・「display: inline-block」で高さと幅を指定できるようにします。
・「background: url」で背景画像を指定します。

.sprite-ifn0001{ background-position: 0 0;}

・それぞれのアイコンの位置を指定します。