セラースプライトを駆使した商品リスト作成のコツ

セラースプライトを駆使した商品リスト作成のコツ

セラースプライトを駆使した商品リスト作成のコツ

セラースプライトとは、複数の画像をひとつの画像にまとめておくことで、Webページの読み込みを高速化する技術のことです。今回は、このセラースプライトを駆使して、商品リストを作成する方法をご紹介します。

1. セラースプライトの準備

まずはじめに、セラースプライトを準備しましょう。セラースプライトは、Photoshopなどの画像編集ソフトを使って作成することができます。複数の商品画像をひとつの画像にまとめ、各画像の周りに余白をつけておきます。余白の部分は、後でコードで指定した時に切り取られるため、商品画像と同じサイズになるように調整しましょう。

2. CSSでセラースプライトを設定する

次に、CSSでセラースプライトを設定します。画像のURLを指定する際に、背景位置も指定する必要があるので、backgroundプロパティを使用します。下記のように、background-imageに作成したセラースプライトのURLを指定し、background-positionに切り取る位置を指定します。

    
.list-item {
    background-image: url(セラースプライトのURL);
    background-position: 左上の画像から切り取る位置;
}

ここでは、.list-itemというクラス名を付けた要素にセラースプライトを適用する例を示しています。background-positionには、背景位置を指定する際に使用できる単位であるpxや%などを使うことができます。

3. 商品画像のサイズを指定する

セラースプライトを使用する際には、background-sizeプロパティで商品画像のサイズを指定する必要があります。background-sizeには、セラースプライトにまとめた画像の縦幅と横幅を指定します。この際、商品画像の縦幅や横幅と同じ値を指定することで、元画像と同じサイズで表示することができます。

    
.list-item {
    background-image: url(セラースプライトのURL);
    background-position: 左上の画像から切り取る位置;
    background-size: 商品画像の縦幅 商品画像の横幅;
}

4. 商品画像を切り替える

ここまでの設定を行うことで、セラースプライトを使用した商品リストが作成できます。最後に、JavaScriptを使って商品画像をマウスオーバーした際に切り替える機能を実装しましょう。下記のようなコードを使用することで、マウスオーバーした時にbackground-positionの値を変更することができます。

    
// マウスオーバーした時の処理
$('.list-item').on('mouseover', function() {
    // .list-item要素の背景位置を切り替える
    $(this).css('background-position', 'マウスオーバー時の画像の左上の座標');
});

// マウスアウトした時の処理$('.list-item').on('mouseout', function() {
    // .list-item要素の背景位置を切り替える
    $(this).css('background-position', 'マウスアウト時の画像の左上の座標');
});

ここではjQueryを使用していますが、JavaScriptで同様の処理を行うこともできます。商品リスト内のすべての商品に対して、同じようにマウスオーバーした時の処理を行うことで、セラースプライトを駆使した商品リストが完成します。