CSS SPRITEについて教えて下さい。

質問

CSS初心者です。

CSS SPRITEという方法でサイトを軽く出来ると聞いてやっているのですが、その中でちょっと気になったのですが、座標ってxもyもマイナスになるんですが、

background-position: -55px -66px;

y座標は下になるからマイナスなのは合ってると思うんですが
x座標はプラスじゃない？

とふと疑問に思ったので教えて頂きたいです。

また私はフォトショップの「情報」でこの座標を見て座標を決めているんですが、「もしいい方法が他にある！」て言う方がおられたら教えて下さい。

お願いします。

回答No.1

abril · ベストアンサー

実際に画像を作って検証してみればすぐ納得されると思いますが。
おそらく、background-positionというプロパティの意味をちょっと勘違いしておられるのではないかと。

この手法がよく使用される、ナビゲーションを例にとって考えます。
※実際はロールオーバー効果を含めるでしょうからy軸の位置も変わる様な指定になりますが、本件ではy軸に関しては納得しておられるという事なので、以下は背景画像が水平方向の表示のみ変わる場合のサンプルです。

【マークアップ】
<ul id="navi">
<li id="navi1">ナビ1</li>
<li id="navi2">ナビ2</li>
<li id="navi3">ナビ3</li>
<li id="navi4">ナビ4</li>
<li id="navi5">ナビ5</li>
</ul>

【実際の表示】※liはCSSでfloatで横並びに表示される様にスタイル設定してあると仮定します。
-----------------------------
【あ】【い】【う】【え】【お】
-----------------------------
※各ナビの描画領域（liの幅・高さ）を仮に100px×20pxとしておきます。

【背景画像】
ナビ1を基準にしてナビ1に【あ】の部分（左の基点から～100pxの領域）、ナビ2に【い】の部分（左の基点から101px～200pxの領域）…という順序で背景画像として表示される様に下記の様な1枚の画像（500px×20px）を作ったとします。
【あ】【い】【う】【え】【お】…仮にファイル名を"navi_background.gif"とでもしておきます。

【CSS】
ナビ1は当然、background-positionの値はx軸もy軸も0です。
ナビ2以降はx軸の値が0のままだったら、ナビ1と同じ【あ】の部分が表示されてしまいますよね。ここでもし、質問者様が考えておられる様に、x軸にプラスの値101pxを入れたとします。

#navi2 {
background: (navi_background.gifのパス) 101px 0px no-repeat;
}

しかしこの場合、ナビ2の部分には背景画像は表示されません。何故なら、background-positionというのは「その画像の内部の座標軸」を示すものではなく、「その画像が背景として描画される際の開始位置」を示すものだからです。つまり、上記の指定だと「<li id="navi2">～</li>の描画領域の左から101pxのポイントからnavi_background.gifの描画を開始する」という事になり、元よりliの幅は100pxしかないわけですから、liの表示領域外に背景画像が押し出される形になり、結果ナビ2には何も表示されなくなってしまうのです。

なので、この場合は下記の様に指定するのが適切という事になります。

#navi2 {
background: (navi_background.gifのパス) -100px 0px no-repeat;
}

上記の指定であれば、「<li id="navi2">～</li>の描画領域の左から-100pxのポイントからnavi_background.gifの描画を開始する」という事になり、navi_background.gifの”左から100px分”がliの表示領域外に引き戻されますので、結果として<li id="navi2">～</li>にはnavi_background.gifの”左から101px”のポイントから描画される事になり、【い】が表示されるわけです。

お礼

ありがとうございます！

やっと理解出来ました！

昔ゲーム作成で作った時の座標と同じように考えてました！