CSSスプライトを作ってみた

こんにちは山田です。

サイト内に、メニューやボタンなど細かい画像がバラバラとありますが、
それを、一枚の画像にまとめて、ページの読込速度を速める方法があります。
CSSスプライト　というのですが、作ってみたのでその備忘録になります。

■元画像
ペイントで簡単に作成

■HTML

 


TOP
NEWS
ABOUT
Contact Us
FAQ

■CSS

/*----------------------------------------------------------
ナビゲーション
------------------------------------------------------------*/

#navi{
 position:absolute;
}

#navi ul{
 list-style:none;
}

#navi li a{
 display:block;
 width:108px; 
 height:53px;　//←幅と高さを指定
 text-indent:-9999px;
}

#navi li#top{
 background:url(../images/menu.gif)no-repeat 0px 0px;　//←最初から表示したい画像
}
#navi li#top a:hover{
 background:url(../images/menu.gif)no-repeat -108px 0px;　//←マウスオーバー時の画像
}

/*-----------------
同じ要領で残りも書く
------------------*/
#navi li#news{
 background:url(../images/menu.gif)no-repeat 0px -53px;
}
#navi li#news a:hover{
 background:url(../images/menu.gif)no-repeat -108px -53px;
}
#navi li#about{
 background:url(../images/menu.gif)no-repeat 0 -106px;
}
#navi li#about a:hover{
 background:url(../images/menu.gif)no-repeat -108px -106px;
}
#navi li#contact{
 background:url(../images/menu.gif)no-repeat 0px -159px;
}
#navi li#contact a:hover{
 background:url(../images/menu.gif)no-repeat -108px -159px;
}
#navi li#faq{
 background:url(../images/menu.gif)no-repeat 0px -212px;
}
#navi li#faq a:hover{
 background:url(../images/menu.gif)no-repeat -108px -212px;
} 

■画像の数値について
以下のように画像の位置を指定しています。