CSSファンの皆さん、こんにちは。
すでにご存じの方も多いかと思いますが、今回は「CSS Sprite」についてです。
"CSS Sprite"
この手法は、サイト内で使用するイメージを一つのマスター画像として作成し、
CSSにて随時マスター画像から切り取り（実際は切り取りではないかも）ページ内にイメージを読み込むという手法。
恩恵としては、
通常通りにイメージを配置するよりデータが軽くなり、さらにリクエスト数が減ることによって、
結果としてサイト表示の体感速度が飛躍的に向上するというもの。
（制作側としてはスライス時間短縮の恩恵があるかも...）
GoogleやYoutubeのプレイヤーなどがこの手法で有名です。
例として、
≪通常のイメージ配置方法≫
XHTMLで、
<div id="head">
<img src="/img/logo.png" /></a>
</div>
またはCSSで、
div#head {
width: 250px;
height: 60px;
background-image: url(/img/logo.png);
background-repeat: no-repeat;
}
などと記述しますが、
≪CSS Spriteでののイメージ配置方法≫
CSSで、
div#head {
width: 250px;
height: 60px;
background-image: url(/img/logo.png);
background-repeat: no-repeat;
background-position: 0 -34px; /* マスター画像のうち，どの場所の画像を出すのか座標 x軸，y軸の順に指定する*/
}
XHTMLで、
<div id="head"></div>
上記でdivの背景画像としてアッサリと表示完了です。
表示速度の改善をお求めの方など、試してみてはいかがでしょう？
...ただしセオリーどおりIE6の透過pngにはくれぐれもご注意を。
すでにご存じの方も多いかと思いますが、今回は「CSS Sprite」についてです。
"CSS Sprite"
この手法は、サイト内で使用するイメージを一つのマスター画像として作成し、
CSSにて随時マスター画像から切り取り（実際は切り取りではないかも）ページ内にイメージを読み込むという手法。
恩恵としては、
通常通りにイメージを配置するよりデータが軽くなり、さらにリクエスト数が減ることによって、
結果としてサイト表示の体感速度が飛躍的に向上するというもの。
（制作側としてはスライス時間短縮の恩恵があるかも...）
GoogleやYoutubeのプレイヤーなどがこの手法で有名です。
例として、
≪通常のイメージ配置方法≫
XHTMLで、
<div id="head">
<img src="/img/logo.png" /></a>
</div>
またはCSSで、
div#head {
width: 250px;
height: 60px;
background-image: url(/img/logo.png);
background-repeat: no-repeat;
}
などと記述しますが、
≪CSS Spriteでののイメージ配置方法≫
CSSで、
div#head {
width: 250px;
height: 60px;
background-image: url(/img/logo.png);
background-repeat: no-repeat;
background-position: 0 -34px; /* マスター画像のうち，どの場所の画像を出すのか座標 x軸，y軸の順に指定する*/
}
XHTMLで、
<div id="head"></div>
上記でdivの背景画像としてアッサリと表示完了です。
表示速度の改善をお求めの方など、試してみてはいかがでしょう？
...ただしセオリーどおりIE6の透過pngにはくれぐれもご注意を。
