CSS Sprites風なことをインライン画像でやってみた

HTML&CSS

ishida

2009.08.27

イメージ

こんばんは、お弁当に入っている梅干しは最後に食べるishidaです。

暑い時期になるといつもは全然飲まないのに、やたら炭酸飲料が飲みたくなります。
特に好きなのがスプライト。ブランド名の語源は、英語のSpirit（元気の意）とSprite（妖精）に由来しているみたいです。

といった感じで無理やり話題につなごうとしていますが…スプライトと言えばCSS Sprites。

背景画像としてCSS Spritesを使うパターンは多いと思いますが、背景じゃなく通常の画像でも CSS Spritesみたいなことができないかな？と思ったので、今回はそれをご紹介。

画像を用意

まずは、以下のような画像を作ります。

　sprite_icon.gif

画像のサイズはきりがイイほうが設定しやすいので 90x90 としています。
1つのアイコンが 30x30 ってことです。

サンプル

以下がサンプルです。

サンプル01の場合はこんな感じになります。

サンプル02の場合はこんな感じになります。

サンプル03の場合はこんな感じになります。

サンプル04の場合はこんな感じになります。

サンプル05の場合はこんな感じになります。

サンプル06の場合はこんな感じになります。

サンプル07の場合はこんな感じになります。

サンプル08の場合はこんな感じになります。

実際は

以下のような感じで表示領域を指定して画像位置をずらしてます。

XHTML

XHTMLの記述は以下です。

<p><span class="sprite"><img src="sprite_icon.gif" alt="" class="clip person01" /></span>サンプル01の場合はこんな感じになります。</p>

<p><span class="sprite"><img src="sprite_icon.gif" alt="" class="clip person02" /></span>サンプル02の場合はこんな感じになります。</p>

<p><span class="sprite"><img src="sprite_icon.gif" alt="" class="clip person03" /></span>サンプル03の場合はこんな感じになります</p>

<p><span class="sprite"><img src="sprite_icon.gif" alt="" class="clip person04" /></span>サンプル04の場合はこんな感じになります。</p>

<p><span class="sprite"><img src="sprite_icon.gif" alt="" class="clip person05" /></span>サンプル05の場合はこんな感じになります。</p>

<p><span class="sprite"><img src="sprite_icon.gif" alt="" class="clip person06" /></span>サンプル06の場合はこんな感じになります。</p>

<p><span class="sprite"><img src="sprite_icon.gif" alt="" class="clip person07" /></span>サンプル07の場合はこんな感じになります。</p>

<p><span class="sprite"><img src="sprite_icon.gif" alt="" class="clip person08" /></span>サンプル08の場合はこんな感じになります。</p>

img の属性に width と height は設定しないのがミソです。設定してしまうと画像がすべて表示されちゃいます。

CSS

CSSの記述は以下のようになります。

span.sprite {
	position: relative;
	display: inline-block; /* ココがキモ */
	overflow: hidden;
	width: 30px;
	height: 30px;
	margin-right: 5px;
	border: 1px solid red;
}

img.clip { position: absolute; }

/* 各個人の顔アイコンを左上基準として設定 */
.person01 {	top: 0;	left: 0; }
.person02 {	top: 0;	left: -30px; }
.person03 { top: 0; left: -60px; }
.person04 { top: -30px; left: 0; }
.person05 { top: -30px; left: -30px; }
.person06 { top: -30px; left: -60px; }
.person07 { top: -60px; left: 0; }
.person08 { top: -60px; left: -30px; }

クラス名sprite にて displayプロパティにinline-blockを設定するところがキモとなります。

IE6～IE8、Firefox3.0、Safari4、Google Chrome2では表示確認はできていますが、その他については未確認ですのでご了承ください。