CSSスプライトとは? CSSスプライトという言葉を聞いたことがあるだろうか? ナビゲーションなどで画像を利用した際にマウスオーバーで画像を切り替えるという効果を加えるのによく利用される手法だ。 その昔はJavaScriptを利用していたが、CSSのbackground-position属性の位置情報を変更することで、CSSで置き換えることが一般的になった。 CSSスプライトが紹介される以前は、通常時とマウスオーバー時の画像を対にしてスライスする手法が主だったが、 CSSスプライトではさらに一歩進め、ナビゲーション全体で利用する通常時、マウスオーバー時の画像を1枚の画像にしてしまい、やはりCSSにより必要な画像を表示させる。 なぜCSSスプライト? CSSスプライトはなぜこれまでの手法よりも優れているのだろうか? 大きな1枚画像はページのロード時間を、複数に分けるより遅くしないだろ