WEBページを見るとき、読み込むデータサイズが同じでもファイル数によって通信負荷が変わります。
同じデータサイズならファイル数は少ない方がサーバとの交信が少なく高速に表示出来ます。それを実現するのがCSSスプライトという技術です。
フラットデザインが主流となった現在では、こまごましたアイコン類の表示はWebフォントに移行しつつあります。しかし、やはり依然として小さいバナーに需要はあるでしょう。
ここではブログ書いてる人にお馴染みの「日本ブログ村」と「人気ブログランキング」のアイコンを例にとって、複数のバナーアイコンを1枚にまとめる経緯について書きました。
CSSスプライトとは
CSSスプライトとは、複数の小さな画像を1枚の大きな画像ファイルにまとめてCSSによる座標指定で見かけ上 切り出して表示するWebデザイン手法です。
表示頻度が高く、かつ頻繁に書き換える必要のないバナー画像やアイコン類がCSSスプライトに向いています。
HTTPリクエストが軽減されてサイト表示が速くなる一方、画像を追加したりコードを書き換えるためのメンテナンス性が悪いというデメリットもあります。
メンテナンスコストに見合うかどうかを検討して導入すると良いでしょう。
スプライト用の画像例
まず、必要な絵を一枚にまとめた画像ファイルを用意します。
サンプルとして、日本ブログ村と人気ブログランキング それぞれ88×31ピクセルの公式バナーを連結した画像を用意しました。
2つ並んで見えますが、これで1枚の画像ファイルです。この画像をスプライトで出し分けます。
ブログランキングのバナー実装例
実際に 日本ブログ村と人気ブログランキング のバナーをスプライトにしてみます。ID差し替えればご自分のサイトでも利用できます。
デモ
CSSでそれぞれ切り出すと、こんな感じで表示されます。当然もっと離して別々の位置に表示することも可能です。
ボタンらしくするために、マウスオーバーでちょっとアクション付けました。
HTML
【HTML】
<a href="http://blog.with2.net/link.php?（ID）" class="snsoz with2" title="このブログの順位を観る" target="_blank"></a>
<a href="http://science.blogmura.com/（登録ディレクトリ）/" class="snsoz blogmura" title="このブログの順位を観る" target="_blank"></a>
aタグのみで、IMGタグの呼び出しがない点に注意して下さい。画像はCSSから呼び出してます。
CSS
【CSS】
.snsoz {
display:inline-block;
width:88px;
height:31px;
text-decoration: none;
border: none;
}
.snsoz:hover{
filter: alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}
// 画像の切り出しここから
.with2 { background : url(blog_ranking.gif) left top no-repeat;}
.blogmura { background : url(blog_ranking.gif) left bottom no-repeat;}
同じサイズのアイコンやバナーをデザイン違いで表示したいときは、複数のクラスを付けてカスケードさせると手間が省けます。
今回の例では2種類のバナーを表示させていますが、もちろん増やすことも可能です。同じサイズの4枚だと上下左右の指定で簡単ですが、座標で細かく指定することも出来ます。
また、ここではボタンらしくするためのアクセントとしてアルファチャンネルで少し白く飛ばしました。多少リアクションがあると押して貰いやすいです。
おわりに
サイト中のあちこちにバナーやボタン類を設置している場合はリクエストが減るので結構効くと思います。
もっとも当サイトではほとんど画像による装飾を利用してないので、ブログランキングのバナーくらいしかスプライトにする絵がありませんでした。これくらいのサイズだとあまり効果はなさそうですが、まぁ気休めと言うことで。
ランキングの方は登録しただけであまり真面目に参加してませんが、もし参考になったら押していって頂けると喜びます。
コメントをどうぞ(´ω｀*)