CSSスプライトは複数の画像を1枚の画像に詰め込んで、その中から必要な部分だけを表示して使用するテクニック。
画像の読み込みが1回で済むのでサーバーへのリクエストの回数が減る(= 表示スピードアップ)に繋がる一方で、画像の追加やサイズ変更の際にはメンテが大変というデメリットがある。
目次
ソースコード
サンプルでは1枚のスプライト画像の中に10種類の画像を用意している。
各画像の表示設定(= background-positionの設定)を1つずつ設定するのが面倒だったのでjQueryでまとめて処理しているが、もちろん全てCSSで設定しても全く問題ない。
HTML
スプライト画像(50 x 20)
※各正方形のサイズは 10 x 10
スプライト画像から欲しい部分だけを表示
※各正方形のサイズは 10 x 10
CSS
body {
margin: 20px;
}
h2 {
padding: 10px 0;
margin-top: 50px;
}
ul {
list-style: none;
}
li {
width: 10px;
height: 10px;
background-image: url('845_sprites.png');
background-repeat: no-repeat;
/* background-positionはjQueryで設定 */
margin-bottom: 10px;
}
jQuery
$(function(){
/*
liにスプライト画像を表示
background-positionの設定
*/
$('li').each(function(i, element) {
// 各要素で使用するスプライト画像の座標
var w = i % 5; // 0, 1, 2, 3, 4
var h = (i 5) ? 0 : 1; // 0, 1
var pos_left = -10 * w;
var pos_top = -10 * h;
// console.log(`${pos_left}, ${pos_top}`);
// background-positionを設定して、スプライト画像から欲しい部分だけを表示する
$(element).css({
'background-position' : `${pos_left}px ${pos_top}px`
});
});
});