ウェブ制作者必携！相当便利です。
CSSレイアウトで、飾りになる画像はbackground-imageとして指定することが多いです。個別に画像を切り出す場合もありますが、属に言う「CSS Sprite」と呼ばれる手法もこれです。
CSS Spriteとは？
画像を個別にスライスして個別に読み込むより、1枚の画像にして表示位置を調整して出す手法です。
個別に読み込むよりも、スライスの手間を省略・読み込み時のリクエストを1度だけで済むので、使い方によってはCSS Spriteを活用した方が速い場合があります。
Firefox3.5だとソースから画像までのリンクをたどれますが、それよりも便利なブックマークレットがあります。
ブックマークレット配布サイト：SpriteMe
他人のサイトの解析時、画像をまとめて見られるので重宝します。
導入方法
配布サイトへ行き、“SpriteMe”のリンクをブックマークバーにドラッグします。普通にブックマークしても可。
使い方
導入したブックマークレットを、解析したいサイトで実行します。
すると、背景画像で指定されている画像が一覧で出てきます。
x軸にリピートなど、属性ごとに分けられて表示されるほか、リンクして画像のみ表示・個別画像を1つの画像にまとめる機能も備えています。
関連する投稿
コメントを残す