CSS スプライト作成に便利な拡張機能「CSS Sprite Extension」

本記事では、最近のWeb制作で利用されている「CSSスプライト（CSS Sprites）」という手法と、その実装を便利にしてくれるFireworksの拡張機能「CSS Sprite Extension」について解説します。

CSSスプライト（CSS Sprites）とは

CSSスプライトは、複数の画像を1つにまとめてCSSのスタイルで部分的に表示し使い回す手法です。

CSSスプライトの仕組み

CSSスプライトはたいてい、今まで独立した１枚画像にしていた部分や画像置換※で表示していた画像と置き換えることができます。

※ 画像置換：HTMLにテキストだけを記載しておいて、CSSのスタイルで文字を隠し、その代わりに画像を表示しているように見せる手法。画像をHTMLからimg要素で呼び出している時とは違い、CSSでデザインを変更したときに一緒に見た目を変えることができるのでデバイスに合わせた幅で表示したい場合にもHTMLを変更する必要がないので便利です。

例えば、既存のサイトにCSSスプライトを適用する場合、サイト内のどの画像をCSSスプライトの対象にするか決定し、選択した画像を1枚の画像になるように並べ、画像の一部分を表示するためのHTMLとCSSを記述します。

コード：画像を切り取るCSSの例

コードをみてわかるように、CSSスプライトのCSSスタイルでは表示ターゲットになる画像の配置位置と幅・高さをそれぞれのスタイルに記述する必要があります。

通常Webサーバはファイル1つに対して1回以上のリクエストを受け取るので画像の数を1枚にして使いまわせば、Webサーバの負荷が減り、リクエストをしなくて済み、ブラウザ側の表示も速くなるので、Webサイトの表示速度を上げるのに大変有効です。数年前からYouTubeやAmazon、Yahoo!ニュースなどで実際に使われており注目を集めています。

CSSスプライトまとめ

表：CSSスプライトのメリット・デメリット

実際にCSSスプライトを使用するには、大量の画像を重ならないように配置をしたり、デザイン変更や差し替えによって配置や大きさが変わった数だけCSSスタイルを再び記述します。大きなメリットがある一方で、CSSスプライト用CSSや画像の作成・メンテナンスは、手作業で行うには大変な作業が必要なことがわかります。

このような作業のうち、特に機械的にできるCSSスタイルの記述が自動で書き出せたり、ある程度画像を自動的に配置できれば、作業上のミスも減り速度アップできるのではないでしょうか？

今回紹介するCSS Sprite Extensionは、1つに集めた画像の管理とCSSの書き出しをFireworksで行うことによって、より簡単にCSSスプライトを使用したり管理できるようにします。

CSS Sprite ExtensionはFireworks CS4、CS5を使用してCSSスプライトのCSSファイルと画像を生成するFireworksの機能拡張です。

CSS Sprite Extensionの機能

CSSスプライト用のCSSと画像を作るワークフローの中で、特に大変な作業部分を手助けする機能を備えています。

• 指定フォルダからの既存画像ファイルインポート機能。
• Fireworksドキュメント上のオブジェクトの整列機能（ビットマップ、Fireworksシンボル、テキスト、PSDファイルのレイヤーなどに対応）。
• CSS書き出し機能（簡単なテンプレート対応で案件の要件に沿ったCSSを生成します）
• 透過PNG（32bit）書き出し機能。

ワークフローによっては全工程を一度に行えるとは限らないので、使いたい部分だけ使えるように設計されています。

Fireworksの機能拡張であるため、FireworksをインストールしているマシンであればOSを問わずローカルマシンで機能します。オリジナルデータの保存もFireworks PNGで行えるため、後編集やちょっとした加工もその場で行えます。それぞれの機能の詳しい説明やオプション設定については、CSS Sprite Extensionの紹介をご覧下さい。

CSS Sprite Extensionのダウンロード

CSS Sprite Extensionインストーラ

• CSSSpriteExt.mxp
• csspriteInstaller.zip （Windowsユーザーで管理者権限がない場合）

インストール方法

1. CSS Sprite Extensionの配布ファイル「CSSSpriteExt.mxp」をダウンロードする。
2. CSS SpriteExt.mxpをダブルクリックすると、Extension Managerが立ち上がるのでインストールを行う。
3. Fireworksを起動中の場合には、Fireworksを再起動する。

インストールトラブルシューティング

2番目のステップで、Windows Vistaなどの環境では「この操作の実行に必要となる適切な権限がありません。システム管理者に連絡して、権限を取得してください。」というアラートが出る場合があります。

その際には、Extension Managerを先に管理者権限で実行しておいてください。

Extenstion Managerを管理者として実行した後は、Extension Managerの「インストール」をクリックしてCSSSpriteExt.mxpファイルをインストールします。

Windowsを使用しているけれど管理者権限を使用できない場合

Windows Vistaなどで管理者権限でのExtension Manager起動ができない方向けにjsfで動くインストーラも用意しています。

1. CSS Sprite ExtensionのVista用配布ファイル「csspriteInstaller.zip」をダウンロードする。
2. csspriteInstaller.zipファイルを解凍する。
3. 解凍したらできるFwExtensionInstaller.swfをFireworks CS4で開く
4. インストールされるリストを確認して、「install」ボタンをクリックする。

複数のFireworksをインストールしている方

Extension Managerはご利用のFireworksのバージョンによって対象となるバージョンが異なります。Fireworks CS5とCS4の両方をインストールされている方は機能拡張を使用したいFireworksのバージョンに合わせてExtension Managerをご利用ください。

CSS Sprite Extensionを使って、シンプルなページをCSSスプライトを使ってみましょう。

先に、ロゴとナビゲーションと見出し部分にCSSスプライトを使います。その後、newアイコンの表示、ナビゲーションのhoverの設定をしていきます。

サンプルサイトで使用するCSSは、説明を簡単にするために一番単純なタイプのものを使用します。CSSが有効で画像表示が無効になっている環境では、CSSスプライトを使用している場所は何も表示されなくなります。実際のサイトで使用する場合にはそのことを理解した上でご利用ください。

必要環境

• Adobe Fireworks CS5
• Adobe Dreamweaver CS5
• csssprite_sample.zip（サンプルサイトとデザインデータ）

作業手順

1)Fireworksでデザインファイルから、必要な画像を書き出す

デザインファイルには、あらかじめナビゲーションの部分にだけスライスが設定されています。ナビゲーションの部分の画像を書き出しておきましょう。ここで書き出す画像は直接CSSファイルから参照されるものではないので、デスクトップなどわかりやすい場所に書きだします。

画像を書き出す前に、書き出す画像ファイル名に関係する設定を確認しておきます。メニューから「ファイル＞HTMLの設定」で、Fireworks CS4をお使いの方は「ドキュメントの詳細」タブを開き、ステート名を「アンダースコア」＋「略称(o,d,od)」に設定してください。

Fireworks CS5をお使いの方は「ドキュメントの詳細」タブを開き、ステート名を「カスタマイズ」＋「なし」に設定してください。カスタマイズを選択したときに出てくるダイヤログは次のように設定します。

ナビゲーションメニュー部分のスライスを選択したら、「ファイル＞書き出し」でスライスを書きだします。保存先はデスクトップに新しいフォルダーを作ってそこを指定します。書き出しオプションは次のようにします。

書き出したファイルは次の8個です。

2)Fireworksドキュメントを新規作成して書き出した画像をインポート<Import機能>

Fireworksドキュメントを新規作成します（以下、CSSスプライト画像オリジナルファイル）。このドキュメントの大きさは、幅500×高さ500ピクセルとします。読み込むファイルの幅や高さが、ドキュメントより大きければ自動で調節してくれるので適当なサイズを指定しておきます。

メニューから「ウィンドウ＞CSS Sprite用CSSと画像作成」でCSS Sprite Extensionのパネルを開きます。パネルの中のチェックボックスが「Import(読み込み)」だけチェックするようにして、パネルの一番上の「Generate」をクリックして実行します。

実行するとすぐに、どのフォルダから画像を読み込むのかを指定するダイアログが出てきますので、2)で書き出したフォルダを指定します。読み込まれたファイルは左上揃えで重なった状態で配置されます（今回は、全く同じサイズの画像なので1つしかないように見えます）。

読み込まれた画像は、ファイル名から拡張子を除いたものがオブジェクトの名前として自動的にセットされます。また、このオブジェクト名がCSSのid（場合によってはclass）として利用されます。

例：ファイル名「menu_about.png」→オブジェクト名「menu_about」

3)ロゴとnewsという見出しをデザインファイルからコピー＆ペースト

デザインファイルに戻って、スライスを設定していないロゴとnews（テキストオブジェクト）を選択したらコピーし、2)で作成した「CSSスプライト画像オリジナルファイル」にペーストします。

シンボル化してあるロゴは、シンボル名（今回は「logo」）がオブジェクト名として利用されます。それ以外のパスやテキストオブジェクトはオブジェクト名がついていない状態と判断されます。これで、「CSSスプライト画像オリジナルファイル」上にすべての必要な画像が揃いました。

4)並び替えを実行<Spread機能>

CSS Sprite Extensionはアクティブドキュメントに対して「並び替え」を実行します。誤ってデザインファイルで「並び替え」を実行しないために、Fireworks上に「CSSスプライト画像オリジナルファイル」だけ開いた状態にします。それから、「Spread」だけにチェックを入れて「Generate」ボタンをクリックします。

この「並び替え」機能は開いているドキュメントの幅か、一番幅の大きなオブジェクトの幅のどちらか大きい方を上限にオブジェクトを並び替える機能です。

並び替えと同時に名前のついていないオブジェクトには名前がついています。並び替えの結果が気に入らなければ、ここで修正します。

先にFireworksドキュメント上においておけばどんなソフトで作ったものも配置します。Photoshop PSDファイルのレイヤーや、Illustratorのオブジェクトも例外ではありませんので、FireworksでPSDファイルを開いてそれをそのまま並び替えすることも可能です。Fireworksが表示できるものならばPhotoshopでつけた効果も重なることなく並び替えができます。

5)CSSを書き出す<Export機能>

今回はCSSと画像ファイルを別に置くことを想定しています。まずは、Root folder、CSS folder、Image folderの順に各項目の白枠をクリックして、フォルダを指定します。各フォルダは表を参照して設定してください。

フォルダの指定対応表

透過PNGである必要がないので、「need the image file」にはチェックを入れないようにしてください。最後に「Export」に だけチェックを入れた状態で「Generate」をクリックします。

作業が完了すると、「指定された作業が完了しました。書き出しルートフォルダに移動しますか？」と質問されますが、今回は不要なので「キャンセル」を選択してください。

なお、「OK」を選択すると、ブラウザで書き出しルートに当たるフォルダを表示します。

書き出されるCSS

今回のように最初からセットされているCSSを使った場合、共通で設定するスタイル「背景画像ファイルのパス」などをまとめたclass「.csssprite」と、画像を表示したい部分それぞれに設定するスタイル「画像の切り取り位置」を記述したid（オブジェクト名がid名となる）からなります。

共通で設定するスタイル

画像を表示したい部分それぞれに設定するスタイルの一部

オブジェクト名がid名として挿入されますが、CSS Sprite Extensionではオブジェクト名がCSSのid名あるいはclass名として使用できる文字列かどうかはチェックしていません。オブジェクト名をつけるときには、CSSのid名あるいはclass名として使用できる名前にしておく必要があります。

6)画像を書き出す

「ファイル>書き出しプレビュー」でファイルサイズと画質を見ながら画像を書き出します。今回は、PNGで「すべての色を割付」、ディザ0%にして書き出しています。ファイル名を「csssprite.png」に、書き出し場所は「サンプルサイトのルートフォルダ/images」フォルダにします。

7)Dreamweaverでサンプルサイトの「サイト定義」を行う

サンプルサイトのフォルダーをローカルフォルダーに指定してサイト定義します。サンプルサイトは、あらかじめCSSスプライト以外のHTML・CSSができあがっています。

8)Dreamweaverを使って、CSSスプライトを適用する

index.htmlを開きます。レイアウトを決めるCSSはすでに設定してあります。

CSSと画像は、Dreamweaverで定義済みのサイト内のフォルダにあるのでまずindex.htmlにcsssprite.cssファイルをリンクします。CSSファイルをリンクするには、CSSスタイルパネルの右上のアイコンから「スタイルシートを添付する」を選ぶか、図のようにCSSスタイルパネルの下方にあるリンクアイコンをクリックして、csssprite.cssを選択します。

それぞれの要素に、プロパティインスペクターでクラスに「.csssprite」をつけ、idを指定します。プロパティインスペクタは未使用のIDのみを選択できるので、ここで指定すると間違いが防げます。

a)ロゴと見出し

ロゴと見出しはリンクのないテキストです。文言を包むH1タグ、H2タグそれぞれに、クラス「.csssprite」をつけ、idを指定します。

b)ナビゲーション

リンクを含む部分でCSSスプライトを使うときは、Aタグに「.csssprite」をつけ、idを指定します。その外側に使ってしまうと、かなり工夫しないと一部のブラウザでマウスカーソルを乗せたときに指カーソルにならなくなってしまいます。

各タグにつけるid一覧

9)配置の工夫で「new」表示もCSSスプライトを使う

今度は、HTMLのタグを加えずにclass属性を追加することでNEWSの記事に「new」表示を出してみましょう。実際に作業を始める前に今までとの違いを見てみます。

「new」の表示されるエリアはロゴや見出しと違って、「new」の幅とエリアの幅が等しくなく、高さも内容によって可変で縦方向に伸びる可能性のある部分です。

HTMLの構造上、画像を完全に切り取って表示できない場合は、表示したいオブジェクトの下や右側に他のオブジェクトがあるとターゲット以外のオブジェクトが見えてしまうことになります。

それでは、Fireworksに戻り、デザインファイルからコピーしてきた「new」画像を画面外左下に配置しましょう。「new」の下や右側に何もない場所です。

このままでは、カンバスのサイズが小さいので、「変更＞カンバス＞カンバスを合わせる」で正しいサイズにカンバスを修正します。

newの配置ができたので、CSS Sprite Extensionで「Export」を実行し、CSSを書き換えます。また、画像を書き出してcsssprite.png新しいものに差し替えておきます。

書き出したばかりのcsssprite.cssの中から、「#new」となっているところを探して書き換えます。何度も登場する可能性のあるスタイルなので、「.new」にしておきます。

変更前

変更後

今度はDreamweaverに再び戻り、newアイコンを表示したい「News」の項目のddタグにclass="new"を追加します。

10)ナビゲーションのリンクにhoverを設定する

csssprite.cssファイルにはすでにhoverした時のスタイルは定義済みなので、CSSを書き換えて:hoverとして動くようにしてやります。

「_o 」を「:hover 」に書き換えます。

一つずつ直してもいいのですが、数が多いと間違いやすいので、ここでは置換機能を使います。

index.htmlの関連ファイルにある、csssprite.cssをクリックします。その中から、「_o 」の文言を1箇所選択して反転させます。「編集＞検索/置換」で「置換」「:hover 」にして、「すべて置換」します。

「ライブビュー」や「ブラウザでプレビュー」で確認すれば、ナビゲーション部分にhoverの効果が付いたことを確認できます。

以上で、シンプルなサイトにCSSスプライトを使用するチュートリアルはおしまいです。

既存Webサイトへの適用

既存WebサイトにCSSスプライトを適用する場合には、どの画像を対象にするかを決めそれを一つのフォルダに入れておきます。

その後は、Import→Spread→配置調整→Exportして、今回のサンプルサイトと同じようにDreamweaverでHTMLの方の設定を行います。

既存Webサイトへ適用する前に

既存WebサイトでCSSスプライトの導入を検討する場合、アクセス数の増加や動的生成のCMSによるサーバ負荷を軽減することが目的であることが多いと思います。

例えば、今回のサンプルサイトのようにCSSスプライトで表示する画像が少ない場合でも、リクエスト回数は倍以上の差があります。

使用前と使用後のブラウザから送られるリクエスト回数を比較する(Firebug使用)

しかし、表示速度だけを見ると小規模・単純なそれほど威力を発揮しません。サンプルサイトの場合、10回の試行の平均は20ms程度CSSスプライトを使った方が早かったのですが、Webブラウザや条件によってはCSSスプライトを使った表示の方が遅いものもあります。JavascriptやCSSなどの最適化などCSSスプライト以外の表示高速化・ファイルサイズ軽量化の手法もあわせて検討する必要があります。

自社・プロジェクトに応じた書式のCSSを出力

CSS Sprite Extensionには、CSSの書き出しを制御するテンプレートとテンプレート変数があり、テンプレートはCSSスプライトで使用されるCSSを効率良くフォローするために、2つに分かれています。このテンプレートは「Generate」ボタンをクリックしたときに自動で保存されます。

テンプレートで使える変数やテンプレートの詳細は配布サイトでご確認ください。

テンプレートの種類

• once Template…オブジェクトとは無関係に全体で1回だけ書き出される。共通で使えるスタイルを出力することを想定。
• repeat by elements Template…オブジェクトごとに書き出される。主に切り取り位置や幅・高さを出力することを想定。

テンプレートの例

テンプレートは書き出したいCSSが先に分かっていれば簡単に作ることができます。例ではわかりやすいようにコメントをつけていますが、テンプレートを作るときには、書き出したいCSSを分類を頭の中やメモで決めておきます。

例1：CSSが有効で画像が無効時も影響を受けにくいCSSテンプレートとHTML

html

css

テンプレートはこうなります。

once Template(CSS Sprite Extension用テンプレート)

repeat by elements Template(CSS Sprite Extension用テンプレート)

デザインによっては透過gif/pngが使えないことにご注意ください。

例2：IMGタグを使用する場合のCSSテンプレートとHTML

html

css

この場合も、共通で使えるスタイルとオブジェクトごとに設定するスタイルを分けて考えてそれぞれ入れ替えます。

once Template（CSS Sprite Extension用テンプレート）

repeat by elements Template（CSS Sprite Extension用テンプレート）

CSS Sprite Extensionには複数のテンプレートを保存する機能はありませんが、このような感じでプロジェクトごとにテンプレートをテキストファイルなどで保存しておけば、いつでもテンプレートを入れ替えることができます。

特定のオブジェクトのCSSだけを取得する

後から追加したり一部だけオブジェクトを移動した場合、CSS全体を出力しなおすよりも変更した部分だけのCSSがほしいときがあります。通常は、もう一度CSSファイルに書き出せばいいのですが、サンプルサイトのようにDreamweaverで編集済みの場合、ファイルを上書きしてしまうと今まで動いていた機能が動かなくなる場合もあります。

CSS Sprite Extensionには選択したオブジェクトのCSS（repeat by elements Templateの部分）だけを、クリップボードに保存する機能があります。少しの変更ではこの機能を活用します。

1. 書き出したいオブジェクトを選択する

2. Exportにだけチェックを入れて「Generate」をクリックする
3. 「選択したオブジェクトだけCSSコードをクリップボードにコピーしますか？」と表示されたら「はい」をクリックする

4. クリップボードにCSSがコピーされているので、目的のCSSファイルに貼り付ける

この例でコピーされるCSS

CSS Sprite Extensionは一度生成した後のメンテナンスでも十分使って行けます。

終わりに

CSS Sprite Extensionは、Webサイト制作の現場にある多様なワークフローの中でちょっと楽ができるをコンセプトに開発しています。手作業で一つひとつやっていくのには手間のかかるCSSスプライトも、使い慣れたFireworksと機能拡張を使えば自分たちのワークフローに合わせてつつ、かなり手軽に扱えるようになるはずです。
他の生成Webサービスを使っている方やFireworks以外のソフトウェアで画面デザインをされている方もぜひお試しください。

また、CSS Sprite Extensionへのご要望・ご質問がありましたら紹介サイトもしくはTwitter(http://twitter.com/risay)にどうぞ。