【ハウツー】

CSS Spritesの必要素材をサクッと生成! お手軽ブックマークレットSpriteMe

1 まずは使ってみよう

 
  • <<
  • <

1/2

ブックマークレットで手軽にスプライト画像/CSSコード生成

Steve Souders氏は14日(米国時間)、自身のブログ上SpriteMeを公開したとアナウンスした。SpriteMeはCSS Spritesを使うにあたりcoolRunningsを使用して必要なスプライト画像を生成、および表示のためのCSSコードを出力してくれるWebサイト。同Webサイトにはブックマークレットが用意されており、ユーザはブックマークレットを任意のWebサイトで実行するだけで簡単にスプライト画像と必要なCSSコードを入手できる。

SpriteMeの動作の流れはおもに次のとおり(Demoより抜粋)。

  1. CSSより背景画像(background-image)が指定されている箇所を抽出
  2. 抽出した画像の幅や高さをもとに、グルーピングをおこなう
  3. グループごとにスプライト画像を生成
  4. 生成したスプライト画像を現在表示しているWebページに挿入
  5. CSS background-positionを再計算

SpriteMeはApache License, Version 2.0のもとオープンソースソフトウェアとして公開されている。興味がある方はspriteme - Project Hosting on Google Codeよりチェックアウトされたい。

CSS Spritesのためのスプライト画像やCSSコードを生成するWebサービスやソフトウェア、Webブラウザのプラグインはこれまでにもいくつかあったが、SpriteMeはブックマークレットをお気に入りに登録しておいて実行するだけでこれらの作業ができてしまう。複数のWebサイトに対して作業する場合でも、次々と最適化をおこなえる。

本稿では、SpriteMeの使い方を紹介しよう。

Hello, SpriteMe! - まずは使ってみよう

動作環境は次のとおり。

  • OS: Mac OS X 10.5.8
  • Webブラウザ: Firefox 3.5.3

なお、SpriteMeは次のWebブラウザで動作確認がおこなわれているようだ。

  • Firefox 3.x
  • Ineternet Explorer 6-8
  • Google Chrome 2
  • Safari 4
  • Opera 10

まずはブックマークレットの追加だ。FirefoxでSpriteMeにアクセスする。Installationの下にSpriteMeのブックマークレットが用意されているので、右クリックしてブックマークに追加する。

SpriteMeにアクセス。InstallationのSpriteMeリンクを右クリックし、ブックマークに追加する

あとはCSS Spritesテクニックを使いたいWebサイトにアクセスし、ブックマークレットを実行するだけだ。ブックマークレットを実行し、表示しているWebページ上に最適化できるCSS Imageがあれば候補が表示される。

SpriteMe上でブックマークレットを実行。CSSの解析がおこなわれ、スプライト画像のもととなるファイル一覧が表示された

CSS上で画像を使っていない場合はこのようなエラーが表示される

スプライト画像の候補がある場合、続けてmake spriteボタンを押せば、グループごとに最適化されたスプライト画像とCSSコードが生成される。

make spriteボタンを押すと、グルーピングされた画像ごとにスプライト画像・表示用のCSSコードが表示される

最後に作成されたスプライト画像をダウンロードし、CSSコードをコピペする。ブックマークレットを実行して数回操作をおこなうだけで、簡単にCSS Spritesテクニックに必要な素材を揃えることができる。

  • <<
  • <

1/2

インデックス

目次
(1) まずは使ってみよう
(2) Hello, SpriteMe! - それぞれの機能・結果の見方について


転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

故障したNASAの太陽探査機から2年ぶりに信号届く - 通信途絶から復活果たす
[11:32 8/24] テクノロジー
羽鳥アナ、高畑容疑者逮捕に「これだけ活躍している時期に、なぜ…」
[11:31 8/24] エンタメ
【特別企画】現役女子高生ダンサーが初体験! 『制服×カホン』で踊ってみた
[11:30 8/24] スマホとデジタル家電
炊飯器だけで家族の夕食は作れる! 子どもが喜ぶトマトチキンライスプレート
[11:30 8/24] ライフスタイル
ドリーム・アーツ、メッセンジャーを追加した多店舗運営支援「Shopらん」
[11:30 8/24] 企業IT

求人情報