DN*BLOG

2008.5.12

CSS Sprite

Googleでも使われているCSS Sprite

CSS Spriteとは、
表示させる画像を一枚の画像にまとめて、CSSのbackground-position等を使って表示させるという手法。

前から結構使っていた手法なんですが、このような名前がついているとは思っていませんでした。
先日、「Designer meets Designers 03」に行ってきたときに名称を知りました。

さて、そのCSS Spriteですが。普通に一枚画像で表示させるのと何が違うの?って思うと思いますが、
結構違います。(と思う・・・)

利点

などなど。
個人的にはこの4点はとても助かっているのでCSS Spriteはよく使っています。

しかし、欠点もあります。
CSSを切るとその一枚画像が全部表示されてしまう。
よく考えたらその画像すらCSSで読み込んでいるので切ったらテキストリンクになるだけでした・・・。すいません。

しかし、下記のGoogleのサイトはCSSを切ると画像が表示されるのでどんな状態なのかがわかると思います。
GoogleのトップページのCSSを切ってみるとよくわかります。

使い方なんですが、
例えば、下記のような画像を用意します。
CSS Sprite sample

このように、全てのリンク画像をhover時のものと一緒にまとめてしまいます。

CSSソース

a.home,
a.css,
a.news,
a.link,
a.blog,
a.prof {
	height:7px;
	display:block;
	text-indent:-9999em;
	background:url(img/btn_gnavi.jpg) no-repeat;
}

a.home {
	width:31px;
	background-position:0 0;
}

a.css {
	width:22px;
	background-position:-39px 0;
}

a.news {
	width:31px;
	background-position:-74px 0;
}

a.blog {
	width:25px;
	background-position:-121px 0;
}

a.link {
	width:29px;
	background-position:-160px 0;
}

a.prof {
	width:46px;
	background-position:-203px 0;
}

/* hover */
a.home:hover {
	background-position:0 -7px;
}

a.css:hover {
	background-position:-39px -7px;
}

a.news:hover {
	background-position:-74px -7px;
}

a.blog:hover {
	background-position:-121px -7px;
}

a.link:hover {
	background-position:-160px -7px;
}

a.prof:hover {
	background-position:-203px -7px;
}

という感じにCSSをくみます。
多分、普通に画像を分けてつくるよりもソースは簡単になると思います。

画像なんですが、見やすいようにスペースを空けていますが作成するときはスペースはあまりない感じです。
画像を少しでも軽くする為に無駄なスペースは空けないようにしています。

背景要素的な画像(アンダーバーやリピート背景画像、リストのアイコンなど)を一枚の画像にまとめてCSS Spriteで表示させるのも一つの手かもしれないですね。

FavoriteLoadingAdd to favorites

Category : CSS , Web Design

関連する記事