一番簡単なCSS Spriteのやり方【CSSスプライト】

2011/09/172015/08/28

ブログ共通

code

表示の高速化の手法としてCSS Spriteというものがあります。
今回、これを使ってみたのですがいろいろつまずいたので一番簡単なやり方をまとめてみました。

CSS Spriteが使える場所

背景とイメージタグに使えます。ただし、背景でリピート指定などをしている場合は使えません。

CSS Sprite用の画像を作成する

「CSS Sprite Generator | Project Fondue」を使うと簡単です。

まとめたい画像をZIP圧縮して１ファイルにしてこのサイトにアップロードすると１つの画像にまとめてくれます。

今回は垂直方向に10pxの空白をあけて作成しました。作成したものは以下のようなものです。

ファイル名を仮にsample_pac0.pngとして説明をつづけます。

背景にCSS Spriteを適用する方法

適用前

<style>
cite{
  padding: 2px 0 10px 54px;
  background: url(cite.png) no-repeat top left;
}
</style>

適用後

<style>
cite{
  padding: 2px 0 10px 54px;
  background: url(sample_pac0.png) no-repeat top left;
  background-position: 0 -26px;
  width: 50px;　//適用前の画像の幅
　  height: 26px;　//適用前の画像の幅
}
</style>

background-positionの-26pxの計算方法
一番上の画像の高さ（16px）+空白（10px）でマイナスを付けます。

実行例：
引用元URL

imgタグを置き換える

spacer画像（1ドットの透明画像）を使う方法が一番簡単で手堅いです。 spacer画像は簡単に作れますが、めんどうな方は以下のファイルをお使いください。 spacer.gif
適用前

<img src="rss.gif" />

適用後

<style>
.img_rss{
    background: url(sample_pac0.png) no-repeat top left;
  background-position: 0 -62px; 
  width: 16px; height: 16px; /*適用前の画像サイズを指定*/
}
</style>
<img class="img_rss" height="16" src="spacer.gif" width="16" />