スプライトシート向けCSS background-positionの解説

スプライト向けCSS background-position

background-positionプロパティはCSSスプライトを機能させるコアメカニズムです。要素内での背景画像の位置決め方法を理解することは、スプライトシートの操作に不可欠です。

座標系

CSS background-positionは以下の座標系を使用します：

• (0, 0)は要素の左上隅
• 正のXは画像を右に移動
• 正のYは画像を下に移動
• 負のXは画像を左に移動
• 負のYは画像を上に移動

スプライトの場合、ほぼ常に負の値を使用します。大きなスプライトシートを左と上にシフトして、要素の可視領域内に目的のスプライトを配置するためです。

ピクセルオフセットの計算

均一グリッドのスプライトシートの場合：

列インデックス: 0    1    2    3
               ├────├────├────├────┤
行0            │ A  │ B  │ C  │ D  │
               ├────├────├────├────┤
行1            │ E  │ F  │ G  │ H  │
               └────└────└────└────┘

セルサイズ: 48x48px、パディング: 2px

スプライトG（列2、行1）を表示するには：

.sprite-G {
  width: 48px;
  height: 48px;
  background-position: -100px -50px;
  /* X: -(2 * (48 + 2)) = -100px */
  /* Y: -(1 * (48 + 2)) = -50px */
}

計算式

Xオフセット = -(列 * (スプライト幅 + パディング))
Yオフセット = -(行 * (スプライト高さ + パディング))

デバッグのヒント

• ブラウザDevToolsを使用してリアルタイムでbackground-positionを調整
• 一時的な可視ボーダーを追加して要素の境界を確認
• 要素インスペクタで計算されたbackground-positionを確認
• 要素のwidth/heightがスプライトのサイズと正確に一致することを確認