CSSスプライトの使い方・書き方

サンプル

CSSスプライトは複数の画像を1枚の画像に詰め込んで、その中から必要な部分だけを表示して使用するテクニック。

画像の読み込みが1回で済むのでサーバーへのリクエストの回数が減る(= 表示スピードアップ)に繋がる一方で、画像の追加やサイズ変更の際にはメンテが大変というデメリットがある。

ソースコード

サンプルでは1枚のスプライト画像の中に10種類の画像を用意している。

各画像の表示設定(= background-positionの設定)を1つずつ設定するのが面倒だったのでjQueryでまとめて処理しているが、もちろん全てCSSで設定しても全く問題ない。

HTML
CSS
jQuery

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です