• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2014/07/02
書いた人:
yanoppa!
カテゴリ:
CSS   Web制作
24,411 views

CSS Sprite(スプライト)を使って画像をロールオーバーする方法を紹介します。 JavaScriptが使えない、どうしてもCSSでやりたい!って方はご参考ください。

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

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

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

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


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

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


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

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


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


アイコンにCSS Spriteを使う


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

youtube_icon

この乱立しているアイコンを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-positionhoverと同じにしましょう。


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

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


それでは!よきコーディングライフを!(・ω<)ノシ


この記事を読んだ人はこんな記事も読んでいます