【CSS】で画像をロールオーバーする方法【CSS Sprite(スプライト)】

おはこんばんちわ、やのっぱっぱっぱらっぱ・・パールライスです(´・ω・｀)

今回は初心者様向けにcssスプライトについて書きます。

そんなん知ってんよ・・・という紳士淑女のみなさまにはお目汚しになるかもしれません

さて、CSSスプライトですが、ロールオーバーやアイコンなどでよく使います。
ロールオーバーの場合はbackgroundの画像位置を要素のhover時に変えることで、表示画像を変えます。
アイコンはアイコン画像を一式並べた一枚画像を使い、画像の読み込みを最適化するときに使います。

アイコンは問題無いのですが、ロールオーバーの場合はテキストの処理の方法をどう取るかが問題です。

なぜ問題かと言うと、これまでtext-indent: -9999;でテキストを画面外へぶっとばしていたのですが、Googleさんの品質に関するガイドラインにCSSを使用してテキストを画面の外に配置することはガイドラインに違反していると明記されているからです。

Googleの評価を視野にいれると、text-indent:-9999;で飛ばすのはあまりよろしくないのですね。

では、アイコンからご説明していきます。

アイコンにCSS Spriteを使う

まず、例としてほとんどのアイコンやボタンなどの画像をCSS Spriteで表示しているyoutubeさんのSprite画像を見てみましょう。

この乱立しているアイコンをbackgroundプロパティで制御して、切り出して表示しているのがCSS Spriteです。

なぜ一枚にあつめているのかですが、画像の読み込みが一回で済むため、軽くなるのですね。
動画を扱うyoutubeさんが使うのもなっとくです。

ではどう使うのか、ここでロールオーバーの実践で説明していきましょう。

ロールオーバーでCSS Spriteを使う

まず、このような画像を用意します。
100px×200pxの画像に100px×100px内でボタンを2パターン作りました。
これをSpriteでONとOFFを変えていきましょう。

やり方はまず、表示したい領域の箱をつくります。
ボタンですので<a>をブロック要素にします。

<style>
.spriteBox {
}
.spriteBox a {
  display:block;   /* ブロック要素にします */
  overflow:hidden; /* はみ出ないようにします */
  width:100px;
  height:100px;    /* 表示領域を指定するためheigthも指定 */
  margin:0 auto;
  background:url(btn.gif) no-repeat;
}
</style>
<div class="spriteBox">
  <a href="#">ボタン</a>
</div>

テキストが残っているので、見えないようにします。

<style>
.spriteBox {
}
.spriteBox a {
  display:block;   /* ブロック要素にします */
  overflow:hidden; /* はみ出ないようにします */
  width:100px;
  height:100px;    /* 表示領域を指定するためheigthも指定 */
  margin:0 auto;
  background:url(btn.gif) no-repeat;
  /* 追加で記入　テキストを見えなくします。 */
  text-indent:100%;
  white-space:nowrap;
}
</style>
<div class="spriteBox">
  <a href="#">ボタン</a>
</div>

これでテキストが見えなくなりました。
次に、hover時にon画像になるようにします。（細かくすると通常・:hover・:activeなど必要に応じた画像を一枚に用意します。）

<style>
.spriteBox {
}
.spriteBox a {
  display:block;   /* ブロック要素にします */
  overflow:hidden; /* はみ出ないようにします */
  width:100px;
  height:100px;    /* 表示領域を指定するためheigthも指定 */
  margin:0 auto;
  background:url(btn.gif) 0 0 no-repeat;
  text-indent:100%;
  white-space:nowrap;
}
.spriteBox a:hover { /* hover時のイベント */
  background-position: 0 -100px; /* 横は0　縦に-100pxずらす 起点は左上なので注意*/
}
</style>
<div class="spriteBox">
  <a href="#">ボタン</a>
</div>

これで完成です！
押したままの状態などはcurrentなどclassをつけて、初期状態のbackground-positionをhoverと同じにしましょう。

アイコンも同じ原理で、大きさを指定し、座標を取ればその場所のアイコン画像が表示される仕組みです。

ロールオーバーのポイントとしては、text-indent: -9999;ではなく、text-indent: 100%;とwhite-space:nowrap;でテキストを隠すことです。

それでは！よきコーディングライフを！(・ω<)ﾉｼ