CSSスプライト

仕事でマークアップはじめたてのころCSSスプライトで何回もつまづいて、未だにあんまりわかってないので整理

CSSスプライト

• アイコンやナビゲーションなど、いっぱいあるものを一枚の画像にして、cssで1部分だけ見せるテクニック
• サイトの中で何回も出てくる汎用的な部分につかう

メリット
いっぱい画像使わないのでサイトの読み込みが早くなるみたいです

使い方
1.画像を作る

ナビの部分つくるときは、こんなかんじでボタンの画像ぜんぶくっつける
上にoff画像、下にhover用の画像くっつける

2.HTML

<ul id="globalNav">
　<li class="nav01"><a href="/">TOP</a></li>
　<li class="nav02"><a href="/">ABOUT</a></li>
　<li class="nav03"><a href="/">NEWS</a></li>
　<li class="nav04"><a href="/">LINK</a></li>
　<li class="nav05"><a href="/">CONTACT</a></li>
</ul>

3.CSS

ul#globalNav {position: relative; height: 35px;}

liの親要素になるulにposition: relative;で基準値に指定して、高さつける

ul#globalNav li{
 float: left;
 width: 100px;
 height: 35px;
 text-indent: -9999px;
 background: url(files/img/top/globalnav.png) no-repeat 0 0;
 position: absolute;
}

横並びにしたいのでfloat:left;で左づめ
ボタン１こぶんの横幅と高さとる
text-indent: -9999px;で文字かくす
背景画像おく
position: absolute;で、ulからのliいっこずつの位置を決めます

ul#globalNav li a{
 display: block;
 height: 35px;
}

a要素をブロック要素にして、高さつけてボタン１こぶんのリンクの範囲を指定

 ul#globalNav li.nav01{left: 0; background-position: 0 0;}
 ul#globalNav li.nav02{left: 100px; background-position: -100px 0;}
 ul#globalNav li.nav03{left: 200px; background-position: -200px 0;}
 ul#globalNav li.nav04{left: 300px; background-position: -300px 0;}
 ul#globalNav li.nav05{left: 400px; background-position: -400px 0;}

ボタンいっこずつ表示させるために、
親要素のulからの位置と、表示させたい背景画像の位置を指定します
このとき、liいっこずつに背景画像を0,0の位置からはってるので、マイナスの値になるみたいです

 ul#globalNav li.nav01:hover{left: 0; background-position: 0 -35px;}
 ul#globalNav li.nav02:hover{left: 100px; background-position: -100px -35px;}
 ul#globalNav li.nav03:hover{left: 200px; background-position: -200px -35px;}
 ul#globalNav li.nav04:hover{left: 300px; background-position: -300px -35px;}
 ul#globalNav li.nav05:hover{left: 400px; background-position: -400px -35px;}

hoverしたときの表示
ボタンいっこぶんの高さが35pxなので、-35pxして画像を上にあげます

こうやって原理わかってるとすぐできそうっておもうのに
いざ使うときいっつもなんかいっこ抜けてててこずったり
別のとこでpositionつかいすぎてわけわからんようになったりする。。。

参考
CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス
[CSS]CSSスプライトで容量を節約しつつロールオーバーを実現する | クロノドライブ