affiliate.ks-product

アフィ収入月10万円以下の初心者を対象に、アフィリエイト、SEO、セールスライティング、マーケティングなどネットで安定して稼ぐ方法を分かりやすくまとめています!関連書籍のレビューも書いています

CSSスプライトの有用性|jQueryプラグインの紹介

      2015/11/13

CSSスプライトとは

プラグインを紹介する前にCSSスプライトとは何か?簡単に解説します。

通常webページに表示させる画像は1要素につき1ファイルです。例えば”お問い合わせ”というボタンは”contact.gif”といった名前をつけて保存します。

CSSスプライトは上記とは異なる方法で画像を管理します。下記のように複数のボタンやパーツを一つのファイルにまとめる手法をとります。

何故CSSスプライトを使うのか

上記の方法は慣れないと扱いにくいし、何故わざわざこのような方法で管理するのか?と思われる方もいらっしゃることでしょう。
実は(CSS)スプライトはファミコンのゲームなど古くから使われている手法です。一つのファイルに複数の画像を埋め込むことでファイルの読み込み回数を大幅に減らすことができるので、低スペックな環境ではパフォーマンスに大きく影響します。WEBコンテンツはインターネット上でデータのやり取りをする為、より重要といえます。

個別に書き出す場合(従来の手法)と、まとめて書き出す場合(CSSスプライト)、トータルのファイルサイズには大差はありませんが、通信回数(HTTPリクエスト数)に大きな違いがあります。上記の例では1ファイルにまとめれば1回のやりとりで済みますが、個別に書き出した場合は12回のやり取りを要します。
身近な例に例えると電話のようなものです。1回で要件を伝えればすぐ済むものを12回に分けて電話をかけていたら相当無駄な時間を要しますよね。

CSSスプライトの概念はPCサイトではさほど重要ではないものの、スマートフォンではレスポンスに大きな違いが現れます。今やPCよりスマートフォンでサイトを閲覧する割合が多い時代です。積極的に導入したほうが良いかもしれませんね。

jQuery.CSSSpriteRolloverプラグインの紹介

CSSスプライトの利点についてはこの辺にしておいて、jQuery.CSSSpriteRolloverプラグインの紹介です。CSSスプライトを使ったロールオーバーって座標調べるのがちょっと手間だったりしますよね。そこでこのプラグインの出番です。上記の画像のようにロールオーバー後のイメージを隣接するように配置するだけでロールオーバーを手軽に実現します。ロールオーバー後のCSSの記述は不要です。

簡単に仕組みを解説すると、スプライトを表示する要素に指定されたwidth、height情報を元にbackground-positionを動的に変化させているだけです。つまりwidth、heightを適切に指定しないと正常に動作しないということでもあります。

地味なjQueryプランインですが確実に役に立ちます。是非ご利用ください。

デモや使用方法はjQuery.CSSSpriteRolloverプラグイン特設ページへ

お知らせ
このライブラリの上位版となるクロスフェードをはじめ、様々な画像ロールオーバーをJavaScriptの知識なしで実装できるjQueryプラグイン「jQueryCrossFadeRollOver」を作りました。特別な理由が無い限りはこちらを使用することを強く勧めます。
http://blog.ks-product.com/2013/11/201311250204.html

 - Web制作テクニック , , , , , , ,