2016/06/09HTTPリクエストの負荷が地味にかかる小さな画像を、CSSスプライトで高速化させる方法です。twitterfacebookhatebugooglepluspocketlineWEBページを見るとき、読み込むデータサイズが同じでもファイル数によって通信負荷が変わります。同じデータサイズならファイル数は少ない方がサーバとの交信が少なく高速に表示出来ます。それを実現するのがCSSスプライトという技術です。フラットデザインが主流となった現在では、こまごましたアイコン類の表示はWebフォントに移行しつつあります。して小さいバナーに需要はあるでしょう。ここではブログ書いてる人にお馴染みの「日本ブログ村」と「人気ブログランキング」のアイコンを例にとって、複数のバナーアイコンを1枚にまとめる経緯について書きました。切り出して表示するWebデザイン手法です。表示頻度が高く、かつ頻繁に書き換える必要のないバナー画像やアイコン類がCSSスプライトに向いています。HTTPリクエストが軽減されてサイト表示が速くなる一方、画像を追加したりコードを書き換えるためのメンテナンス性が悪いというデメリットもあります。メンテナンスコストに見合うかどうかを検討して導入すると良いでしょう。スプライト用の画像例まず、必要な絵を一枚にまとめた画像ファイルを用意します。それぞれ88×31ピクセルの公式バナーを連結した画像を用意しました。2つ並んで見えますが、これで1枚の画像ファイルです。この画像をスプライトで出し分けます。バナーをスプライトにしてみます。ID差し替えればご自分のサイトでも利用できます。デモCSSでそれぞれ切り出すと、こんな感じで表示されます。離して別々の位置に表示することも可能です。ボタンらしくするために、マウスオーバーでちょっとアクション付けました。target="_blank"></a>aタグのみで、IMGタグの呼び出しがない点に注意して下さい。画像はCSSから呼び出してます。no-repeat;}同じサイズのアイコンやバナーをデザイン違いで表示したいときは、複数のクラスを付けてカスケードさせると手間が省けます。今回の例では2種類のバナーを表示させていますが、もちろん増やすことも可能です。同じサイズの4枚だと上下左右の指定で簡単ですが、座標で細かく指定することも出来ます。ここではボタンらしくするためのアクセントとしてアルファチャンネルで少し白く飛ばしました。多少リアクションがあると押して貰いやすいです。おわりにサイト中のあちこちにバナーやボタン類を設置している場合はリクエストが減るので結構効くと思います。当サイトではほとんど画像による装飾を利用してないので、ブログランキングのバナーくらいしかスプライトにする絵がありませんでした。これくらいのサイズだとあまり効果はなさそうですが、まぁ気休めと言うことで。ランキングの方は登録しただけであまり真面目に参加してませんが、もし参考になったら押していって頂けると喜びます。技術部についておち研技術部ではWeb関連技術やサイト運営に関する情報をお知らせしています。お探しの記事がありましたら下の検索窓からどうぞ。姉妹サイトいろいろやってます。Mizuki花鳥風月をこよなく愛する体育会系エンジニア。めざせフルスタック~(白目)。コメントをキャンセルメールアドレスは開示されません。エラーが出たら違うCaptchaコードもお試し下さい。