CSSの背景画像を解析しまくるブックマークレット SpriteMe

ウェブ制作者必携!相当便利です。
CSSレイアウトで、飾りになる画像はbackground-imageとして指定することが多いです。個別に画像を切り出す場合もありますが、属に言う「CSS Sprite」と呼ばれる手法もこれです。

CSS Spriteとは?

画像を個別にスライスして個別に読み込むより、1枚の画像にして表示位置を調整して出す手法です。
個別に読み込むよりも、スライスの手間を省略・読み込み時のリクエストを1度だけで済むので、使い方によってはCSS Spriteを活用した方が速い場合があります。

Firefox3.5だとソースから画像までのリンクをたどれますが、それよりも便利なブックマークレットがあります。

ブックマークレット配布サイト:SpriteMe

他人のサイトの解析時、画像をまとめて見られるので重宝します。

導入方法

配布サイトへ行き、“SpriteMe”のリンクをブックマークバーにドラッグします。普通にブックマークしても可。
drug

使い方

導入したブックマークレットを、解析したいサイトで実行します。
rei

すると、背景画像で指定されている画像が一覧で出てきます。
x軸にリピートなど、属性ごとに分けられて表示されるほか、リンクして画像のみ表示・個別画像を1つの画像にまとめる機能も備えています。

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


ABOUTこの記事をかいた人

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。