本文へジャンプします。



こんにちは、ゲストさん



現在位置: トップ > CSS Spriteを活用しよう - DesignWalker


閲覧数291 クリップ数5

CSS Spriteを活用しよう - DesignWalker クリップする

http://www.designwalker.com/2008/02/css-sprite.html 本文へ

みんなのタグ:

(本文から引用)

前の画像 次の画像
みなさんお馴染みのYouTube

このYouTubeのプレーヤーに使われている画像は実は↓のような一枚の画像が用意されていて、スタイルでうまく表示されているようです。



画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそうです。

このテクニックをCSS Spriteって言うそうです。。(この手法自体は知ってましたが、CSS Spriteって呼ばれているのは知りませんでした…)

せっかくなので、本日はCSS Spriteをいろいろとまとめてみました。



1. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
一枚ずつ画像をスライスした場合と、CSS Spriteを使った場合の比較をされています。サンプルのコードも公開されているので、わかりやすいですね。


一枚の画像をCSSのbackground-positionで表示してみると。

結果、HTTPリクエストは1回、トータルの画像サイズも7KBほど短縮されてい...

続きを読む

この記事をクリップする

この記事をクリップしたユーザー一覧


みんなのおすすめ商品(Amazon.co.jp)

  あなたもアフィリエイトを始めませんか?    

機動戦士ガンダム THE ORIGIN (18)  ララァ編・後 (角川コミックス・エース 80-21) ストライクウィッチーズ オフィシャルファンブック コンプリートファイル もやしもん 7  限定版  ~nano~  

機動戦士ガンダム THE ORIGIN (18) ララァ編・後 (角川コミックス・エース 80-21)

823人がクリックしました

著者:安彦 良和
出版社: 角川グループパブリッシング

ストライクウィッチーズ オフィシャルファンブック コンプリートファイル

341人がクリックしました

著者:角川書店
出版社: 角川グループパブリッシング

もやしもん 7 限定版 ~nano~

1895人がクリックしました

著者:石川 雅之
出版社: 講談社

 









携帯でアクセス

携帯アクセスバーコード
携帯で左のバーコードを読み取るか
URLを携帯に送信してください。

Powered by モバクシー




推奨画面サイズ
1024×768 以上

クリップBETAトップへ戻る