• twitter
  • Facebook
  • はてなブックマーク
2012年05月27日(日)

[CSS] CSS Spriteで複数画像を効率的に読み込み

「CSS Sprite」は、1枚の大きな画像をロードして、backgroundの各設定を行う事により、スライスをかけて表示させる方法です。yahooや、ブログサービス等でもよく見られます。沢山のリスト用アイコン画像や、リンク画像などを個別にimgタグで読み込むよりも、1枚だけの画像ロード処理で済むためパフォーマンス的に良い結果が得られます。

画像の準備

背景画像としてロードする画像には複数の画像を好きなように配置し、それぞれ配置した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タグ

  1. <a id="link1" href="#">リンクテキスト1<span></span></a>

CSSの指定

  1. a#link1 {
  2. width:56px;
  3. height:56px;
  4. background-image:url(画像URL);
  5. background-position:0 0;
  6. background-repeat:no-repeat;
  7. text-indent:-9999px;
  8. display:block;
  9. position:relative;
  10. }
  11. a#link1 span {
  12. left:0;
  13. top:0;
  14. width:56px;
  15. height:56px;
  16. background-image:url(画像URL);
  17. background-position:0 0;
  18. background-repeat:no-repeat;
  19. display:block;
  20. position:absolute;
  21. z-index:1;
  22. }

親となるアンカーリンクと、span要素をどちらもブロック表示し、上下に重ねて表示します。リンクテキストは、text-indent:-9999pxを指定する事で画面の外へ追いやってしまいます。(SEO的に問題があるかも？とされていますが、jQueryUIなどでもこの方法が採用されています)hover時にロールオーバー画像を切り替える時にも便利です。背景画像を2枚用意して、spanの表示非表示を切り替えるだけで実装できます。

残りのリンクに対しても同じように記述をします。id属性を指定する事で、background-positionだけを個別の内容に変更します。例えば、一番上の行、左から2番目の列の画像を指定する場合はbackground-position:-56px 0;というようにマイナス指定で画像の位置をずらして指定します。(左に-56pxずらして表示する)

当然ですが、背景として画像を設定しているため、印刷には向いていない方法です。スタイルシートを読み込む際は、media="print"は外しておきます。

関連投稿記事

Comment:


トラックバック送信先