CSSスプライトとは、複数の画像を一つにまとめ、CSSで表示位置を変更するテクニックのことです。通常、画像はボタンやアイコン等のパーツに分かれていますが、それらをまとめて一つにすることで、画像の読み込みが１度で済みます。
それによって、リクエスト数を減らすことができ、サーバへの負担が少なくなります。また、ブラウザでリソース（画像）が再利用されるので、ページの読み込み時間も早くなります。
しかし、CSSスプライトの欠点として、画像が背景画像となるのでAltを入れることができません。また、代わりにテキストをいれ、 indent：-9999px;という技法もありますが、検索エンジンのスパムの対象になる恐れがあります。
そのため、ナビゲーションやボタンは画像ではなく、テキストリンクになります。
一枚にまとめた画像はその部品ごとに、CSSの「background」プロパティで、表示位置をピクセル単位で指定します。例として、ナビゲーションをCSSスプライトで表示します。
画像
デモ
HTMLのソース
<ul id="cssNav">
<li id="navCompany"><a href="company.html">会社概要</a></li>
<li id="navIR"><a href="ir.html">IR情報</a></li>
<li id="navRecruit"><a href="recruit.html">採用情報</a></li>
<li id="navAccess"><a href="access.html">アクセス</a></li>
</ul>
CSSのソース
/* ナビゲーション全体の指定 */
ul#cssNav li a {
text-decoration:none;
color:#222222;
font-weight:bold;
font-size:12px;
float:left;
width:100px;
height:40px;
min-height:40px;
line-height:40px;
text-align:center;
display:inline;
}
/* 会社概要 */
li#navCompany a:link,
li#navCompany a:visited {
background:url(images/csssprites.gif) no-repeat left top;
}
li#navCompany a:hover,
li#navCompany a:active {
background:url(images/csssprites.gif) no-repeat left -40px;
}
/* IR情報 */
li#navIR a:link,
li#navIR a:visited {
background:url(images/csssprites.gif) no-repeat -100px top;
}
li#navIR a:hover,
li#navIR a:active {
background:url(images/csssprites.gif) no-repeat -100px -40px;
}
/* 採用情報 */
li#navRecruit a:link,
li#navRecruit a:visited {
background:url(images/csssprites.gif) no-repeat -200px top;
}
li#navRecruit a:hover,
li#navRecruit a:active {
background:url(images/csssprites.gif) no-repeat -200px -40px;
}
/* アクセス */
li#navAccess a:link,
li#navAccess a:visited {
background:url(images/csssprites.gif) no-repeat -300px top;
}
li#navAccess a:hover,
li#navAccess a:active {
background:url(images/csssprites.gif) no-repeat -300px -40px;
}
CSSスプライトについてのお問い合わせ・ご相談はこちらからお願いいたします。
