CodeZine(コードジン)

特集ページ一覧

ゼロから学ぶ「CSS Sprite」

Yahoo! JAPANの制作チームによる、さまざまなWebサイト最適化手法 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

CSS Spriteの手順詳細

  1. 複数の画像をひとまとめにしてSprite画像を作成します。今回は「New!アイコン」と「カメラアイコン」を使用して説明します。
  2.  文字サイズ拡大時に見切れないようするためにも、縦に並べる方が使い勝手がよいです。画像を横に繰り返して表示させたい場合にも対応がしやすいです。例外として横に並べた方がよい場合もありますが、ここでは言及しません。

    ※注意

     この複数の画像をひとまとめにする作業はツールを用いて省略することも可能です。画像編集ソフトを持っていない方や、手軽にSprite画像を作成したい方は後に説明する「Sprite画像作成補助ツール」の項を見てください。

  3. 作成した画像を保存します。このときの画像フォーマットを何にするべきか考えると思いますがPNGがお勧めです。減色などを行ったときに圧縮率がよく、GIFよりも綺麗に書き出しを行えることが多いためです。
  4.  しかし、IE6をサポートブラウザとして含んでいる場合、半透過のPNGを用いると透過部分が灰色として表示されてしまうので注意してください。IE6でも半透過の処理を施したい場合は、IE独自のCSSプロパティであるfilterを用いて表示することが可能になります。

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sprite.png');
    
  5. できあがった縦並びのSprite画像を用いてHTMLとCSSを記述し、表示を調整します。まずはNEW!アイコンを表示させます。
  6. <style type="text/css">
    .sprite{
    /* スプライト画像を読み込む */
    background-image:url(sprite_img.png);
    /* 画像の繰り返しを設定する */
    background-repeat:no-repeat;
    /* 表示位置を調整する */
    background-position:0 5px;
    /* 画像を表示する分のpaddingを設定する */
    padding-left:30px;
    }
    </style>
    <p class="sprite"><a href="#">Yahoo! JAPANのサンプル</a></p>
    
  7. カメラアイコンを表示させたい時には、「background-position」の値を調整すれば表示させることができます。 background-positionは「background-position:x y;」という様にx軸の値、y軸の値を入れることで位置をずらせます。下の例ですと、画像を上側に34px移動させて表示させる、といった意味になります。
  8. <style type="text/css">
    .sprite{
    /*スプライト画像を読み込む */
    background-image:url(sprite_img.png);
    /* 画像の繰り返しを設定する */
    background-repeat:no-repeat;
    /* 【カメラアイコンが表示される】表示位置を調整する */
    background-position:0 -34px;
    /* 画像を表示する分のpaddingを設定する */
    padding-left:30px;
    }
    </style>
    <p class="sprite"><a href="#">Yahoo! JAPANのサンプル</a></p>
    

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Yahoo! JAPANの制作チームによる、さまざまなWebサイト最適化手法

著者プロフィール

  • 岡部 和昌(ヤフー株式会社)(オカベ カズマサ)

    ヤフー株式会社 R&amp;D統括本部 制作本部 ウェブデベロップメント部 所属。 1983年生まれ、埼玉県出身。大学で応用化学を学んだ後2006年にヤフー株式会社初のデザイナー新卒採用にて入社。同社では、Yahoo! JAPANトップページ、My Yahoo!などでマークアップの主担当。 ペー...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5