DN*blog

CSS Spriteを追加しました。

参考にしてみてください！

Demo - CSS Sprite

Googleでも使われているCSS Sprite

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

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

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

利点

• 画像の読み込みが一回ですむ
• 面倒なスライスの作業をしないですむ
• 修正するときも一枚の画像をいじればOK
• 画像の枚数が減るので管理が楽になる

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

しかし、欠点もあります。
CSSを切るとその一枚画像が全部表示されてしまう。

これは、結構ひどいレイアウトになってしまいます・・・（笑）
やはり、コチラのテクニックもご利用は計画的に考えないといけません。
GoogleのトップページのCSSを切ってみるとよくわかります。

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

このように、全てのリンク画像を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で表示させるのも一つの手かもしれないですね。