[CSS] CSS Spriteで複数画像を効率的に読み込み
画像の準備
背景画像としてロードする画像には複数の画像を好きなように配置し、それぞれ配置したx座標、y座標、幅、高さをメモしておきます。同じ矩形サイズの画像を隙間なく並べれば、計算だけで済むので簡単です。

幅56px 高さ56pxの正方形画像を適当に配置したものを用意してみました。それぞれの座標は左上から順に次のようになります。
- (1) x:0 y:0
- (2) x:56px y:0
- (3) x:112px y:0
- (4) x:0px y:56px
- (5) x:56px y:56px
- (6) x:112px y:112px
この画像をリンクテキストの代わりに使います。背景画像に指定するため、<a href="#">リンク文字</a>だと当然「リンク文字」が上に表示されてしまいます。対応策として、空のspan要素をリンク文字の後ろに配置し、親要素となるaタグの上に重なるように(z-indexを指定)して、スタイルシートの方で調整していきます。
HTMLタグ
- <a id="link1" href="#">リンクテキスト1<span></span></a>
CSSの指定
- a#link1 {
- width:56px;
- height:56px;
- background-image:url(画像URL);
- background-position:0 0;
- background-repeat:no-repeat;
- text-indent:-9999px;
- display:block;
- position:relative;
- }
- a#link1 span {
- left:0;
- top:0;
- width:56px;
- height:56px;
- background-image:url(画像URL);
- background-position:0 0;
- background-repeat:no-repeat;
- display:block;
- position:absolute;
- z-index:1;
- }
親となるアンカーリンクと、span要素をどちらもブロック表示し、上下に重ねて表示します。リンクテキストは、text-indent:-9999pxを指定する事で画面の外へ追いやってしまいます。(SEO的に問題があるかも?とされていますが、jQueryUIなどでもこの方法が採用されています)hover時にロールオーバー画像を切り替える時にも便利です。背景画像を2枚用意して、spanの表示非表示を切り替えるだけで実装できます。
残りのリンクに対しても同じように記述をします。id属性を指定する事で、background-positionだけを個別の内容に変更します。例えば、一番上の行、左から2番目の列の画像を指定する場合はbackground-position:-56px 0;というようにマイナス指定で画像の位置をずらして指定します。(左に-56pxずらして表示する)
当然ですが、背景として画像を設定しているため、印刷には向いていない方法です。スタイルシートを読み込む際は、media="print"は外しておきます。
トラックバック送信先