CSSスプライトとは？

通常，ウェブページを制作する場合，
デザインファイル（psdやpngなどの画像）をスライスし，HTMLのimg要素として埋め込んだり，
CSSの背景画像として指定していることと思います。

それらの画像を一つにまとめ，１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。

このテクニックは，以前からマウスオーバーメニューを実現する際にも使われていたものでもありますが，
YouTubeのプレーヤーやGoogleなど，大手サイトでもこのテクニックが使われるようになり，
CSS Spritesの名前と共に注目を集めるようになりました。

独学で極める “Webデザイン”の技と心：第10回　CSS Spritesでサイトを高速化より

HTML

<div class="navi1">
  <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="#"></a></li>
  </ul>
</div>

CSS

.navi1 {
    display:block;
    height:72px;
    margin:0 auto;
    position:relative;
    width:525px; }
.navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.navi1 ul li {
    background-image:url(tab-1.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.navi1 ul li:hover {
    z-index:1000; }
.navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.navi1 ul li.sm5:hover {
    background-position:-498px -75px; }

イメージファイルはPNGとPSDの二つがあるようです。
Cool Sprites – Free overlapped CSS menu using CSS Sprites

Black Estate

スクロールされないメニューが特徴的ですね。
大きな見出しもイイですね。





Mark Dearman

プロジェクト毎で、画像をスライド出来るようになっています。
余計なスペースを使わず便利ですね。

Best of CSS Design 2009

marginとpaddingやfloatなど、初心者がつまづきやすい部分が載っています。
文は英語ですが、画像が多めにあるので
直感的に分かるかと思います。
また、ソースもあるので技術的な部分でも分かりやすいかと思います。