「CSSスプライト」とは、複数の画像を1枚の画像ファイルにまとめ、表示の際にCSSでクリップ位置をずらすテクニックです。これにより、通信回数を減らし描画速度を上げることができます。既に定番化したテクニックですが、これまでFireworksをはじめとするデザイン用のソフトウェアには、直接CSSスプライト用の画像&CSSを生成する機能はありませんでした(生成をサポートする拡張機能やWebサービスは存在しました)。

Fireworks CS6には、CSSスプライト用の画像&CSSを生成する機能が追加されました。本記事では、この機能の使い方から、書き出した素材を使ってDreamweaverでマークアップするまでを解説します。

「CSSスプライトの書き出し」機能の使い方

CSSスプライトの作り方を簡単に説明すると次の流れになります。

  • CSSスプライトでまとめたい画像を作成、もしくは、既にある画像からピックアップする。
  • Fireworks上で集めた画像を配置する。
  • Fireworksで配置した画像のxy座標/幅/高さを確認してCSSを書く。

特に手間がかかっていたのは3番目の作業で、CSSを普段から書き慣れない人にはCSSスプライトを気軽に使えない要因となっていました。Fireworks CS6では、この手順のかなりの部分を自動化してくれます。いくつかのアイコンをCSSスプライトとして書きだしてみましょう。

CSSスプライトで使う画像を用意する

画像を集めたら、CSSスプライトとして使用したい画像部分にスライスを設定し、それぞれ名前を付けます。スライスで指定した部分がCSSスプライト用画像としてまとめられるので、スライスの位置はバラバラでも大丈夫ですし、図のように管理を考えて説明を書いておいても便利です。

これでCSSスプライトを書き出す準備ができました(ここまでの作業のサンプルは「simple.fw.png」です)。透過したCSSスプライトが必要な方は、書き出す前にキャンバスの背景色が透明になっていることを必ず確認してください。

CSSスプライトの書き出し

スライスの上で、コンテキストメニューを開き[CSSスプライトを書き出し...]を選択します(メニューから[ファイル]→[書き出し]あるいは[画像プレビュー]を選択し、書き出しの項目をCSSスプライトと選択しても同様の動作となります)。

保存名を聞かれるので、ここでは「csssprite」としておきます。この名称は、書き出されるCSS内でclass属性として使用されるので、混乱を避けるためにスプライト名との重複は避けましょう。フォルダーにファイルが書き出されるので、その中にcsssprite.cssとcsssprite.pngがあるのを確認します。

書き出されるファイル
種類 ファイル名 説明
CSS 保存名 CSSスプライト用のCSSを書き出したファイル。保存名が、CSSのclass属性やその一部として使用される。
画像 保存名 拡張子は、[CSSスプライト書き出しオプション]ダイアログで選択した最適化設定に従う。透過画像を使い、かつInternet Explorer 7以前をカバーしたい場合には、透過PNGを避けるか、透過PNGを使えるようにするJavaScriptを導入する必要がある。

CSSや画像は[CSSスプライト書き出しオプション]ダイアログの設定内容に従って書き出されます(オプションの詳細については後述します)。なお画像は、オプションで[グリッド]を選択していても、今回のような似たような画像幅のスライスでは、ほぼ縦一列に並ぶこともあります。

下記は、書き出されたCSSファイルの一部です。CSSは、共通の定義と表示したい画像用の定義の2つを組み合わせて使用するようになっています。ソース中のコメントは筆者が後から追記したものです。共通の定義のclass属性には保存名、どの画像部分を表示するかを示す定義のclass属性にはスプライト名が使用されています。

/* 共通の定義 必ずコレとセットで使用する */ .csssprite{ background:url("csssprite.png") top left no-repeat; } /* 以下画像ごとの定義 */ .save-as{ width:35px; height:41px; background-position:-10px -10px; } .paper-blank{ width:32px; height:40px; background-position:-10px -61px; } .lock{ width:26px; height:33px; background-position:-10px -111px; }

書きだしたCSSスプライトをDreamweaverで反映する

CSSスプライトのファイルをサイトの管理下のフォルダーに追加する

Dreamweaverで既にサイトが定義されているとします。書き出されたファイルをDreamweaverのサイトで使いやすいように配置します。ファイルパネルを開いた状態で、エクスプローラー(MacはFinder)からサイトのローカルファイルにドラッグ&ドロップします。

さらにサイト直下においたCSSファイルと画像を、ファイルパネルを使用して普段CSSファイルとその関連画像を置いているフォルダーに移動します。その際、パスを修正するか尋ねられるので、OKを選択します。これで正しい場所にファイルを置くことができました。

CSSスプライトのCSSを適用する

CSSスプライトを利用したいHTMLファイルを開きます。まず、ファイルにFireworks CS6で書き出したCSSファイルをリンクさせます。HTMLファイルの「表示:」の後にCSSスプライトで画像を表示してみましょう。アイコンを置きたいところにカーソルを置き、Ctrl+T(MacではCmd+T)を押して、ここではspanタグを挿入します。このspanタグの背景画像として、アイコンを表示させます。

そのままプロパティインスペクタで、[クラス]の右にあるドロップダウンを開き[複数のクラスを適用...]を選択します。[マルチクラスの選択]ダイアログが開いたら、ドキュメントにリンクされているCSSのclass属性の一覧が出るので、共通の定義のclass属性と表示したい画像のclass属性にチェックを入れます。例えば、今回のaddアイコンならば「csssprite」と「add」にチェックを入れます。

ここで、ビュー切り替えの右側にある[ライブビュー]ボタンを押してプレビューしてみましょう。コードビューで選択した部分がプレビューでもグレーになっていますが、まだアイコンが表示されません。

追加のCSSを適用する

アイコンが表示されなかったのは、アイコンを表示させるために追加したspan要素が、内包するコンテンツを持たずwidthが0の状態になっていたからです。

Fireworks CS6が書き出すCSSスプライト用CSSに記述されているのは、背景の指定と各画像の幅/高さ/背景をどれだけずらすかの3点です。そのまま使うと、displayプロパティの指定がないので、HTMLの要素(例で上げているspanのような非置換要素のインラインで表示される要素)によっては幅や高さが反映されません。

CSSスプライトを生成するWebサービスでは最初からdisplay:blockとなっているものが多いですが、全ての状況に対してdisplay:blockで十分なわけではありません。その点を考慮してかFireworks CS6の場合、displayプロパティの指定については、ユーザがもう1つclass属性を付けたり、他のCSSの記述で解決するように設計されています。

ここでは行頭につけるアイコンを想定しているので、spanタグに「icon」というclass属性を追加し、下記のようにdisplayプロパティをinline-blockとします。displayプロパティをblockとしてもよいのですが、前後で改行したように見えてしまうので、inline-blockを指定しました。後の修正の可能性を考えて、CSSスプライトのCSSと混ざらないように、このCSSの保存は新規ファイル(style.css)に行います。

@charset "utf-8"; .icon { display: inline-block; }

もう一度、[ライブビュー]ボタンを押してプレビューします。アイコンが表示されているのが確認できます(ここまでの作業のサンプルは「samplehtmlフォルダ」です)。

このように、Dreamweaverのサイト機能やドキュメント編集機能を使用すれば、Fireworks CS6で書き出したCSSスプライトをより簡単に実装できます。

より実践的な使い方

CSSスプライトの書き出しオプションを設定する

自動で書き出されるCSSスプライトですが、オプションを設定することで、より自分のプロジェクトに適したCSSと画像を書き出すことができます。[CSSスプライト書き出しオプション]ダイアログは、CSSスプライトの[書き出し]ダイアログ(図3)の右下にある[オプション]ボタンから開くことができます。

CSSスプライト書き出しのオプション
項目 説明
CSSセレクター スライス名をclass属性として使うのか、id属性として使うのかを選択できます。
接頭文字 スライス名の前に付けたい文字列。「csssprite_」などと付けておくと、Dreamweaverで複数のclass属性を設定するときに探しやすくなります。
接尾文字 スライス名の後に付けたい文字列。
余白 画像間の距離。
レイアウト 縦:縦一列に並べます。
横:横一列に並べます。
グリッド:並べるスライスの中で最大幅のものに「余白×2」ピクセルを加えた幅を基準にグリッドで並べます。
最適化プリセット 事前に登録した最適化のプリセットを選択。

CSSセレクターの名称は最初想像がつきにくいのですが、パネルの[例:]に実際の表示がでるのでそこを確認しながら設定を変えれば簡単です。

余白とレイアウトの設定は、今までCSSスプライトを使用していなければ、多少迷うかもしれません。余白は好みによりますが、0にしても画像が重なって表示されてしまうことはありません。特に理由がなければ、ファイルサイズも小さくなりますし、0にしてよいでしょう。書き出すのは簡単なので、まずは0にしておき、利用する要素についたスタイルの都合で他の画像が見えてしまったら余白を大きくして調整すればいいのです。

レイアウトは、[グリッド]を選んでおく方がいいと思います。縦や横に極端に長い画像は特徴的な形なので、Adobe Bridgeなどのファイルビューアーで表示した時に見つけやすいですが、とても小さくなってしまって簡易プレビューでどんな画像が入っているかを把握するのが大変です。ただし、[グリッド]の仕様上、CSSスプライトにまとめた画像の横幅の差がないと、結果として[縦]と同じような配置になる可能性はあります。

CSSスプライト画像の減量化

CSSスプライトの画像を書き出す際に選択できる最適化方法(画像形式)は、[最適化]パネルのプリセットで登録したもののみです。好みに合わせて追加しておくと便利です。おすすめは、Fireworksの画像最適化の特徴でもある、8bit PNGで透過をアルファチャンネルにしたもの。

この設定では色数が少ないので、書き出す画像ファイルはより小さなものになります。例えば、記事冒頭で作ったアイコン画像を追加した8bit PNG設定で書き出しなおしたところ、CSSスプライト画像のサイズが、10.8KBから4.53KBに減りました。効果は高いですが、色数に限りがあるので、書き出し後に色が飛んでないか十分確認するようにしてください。

ステートとボタンシンボルの利用

Fireworksでデザインしている方は、ステートを使う機会も多いと思いますが、ステートとCSSスプライト書き出し機能の相性は今ひとつ。なぜかというと、2番目以降のステートは画像部分の定義名を自動で書き換えるからです。例えば次のようなコードになります。

.sprite{ background:url("sprite.png") top left no-repeat; } .test{ width:138px; height:46px; background-position:-10px -10px; } .test_1{ width:138px; height:46px; background-position:-10px -66px; }

testが元のスライス名で、test_1の「_1」が自動で付加されます。ステートを考慮して書き出してくれるのはとてもいいのですが、「:hover」のような付加はされず、「_序数」という名称しか付けられません。

一方、ボタンシンボルにもステートがあるのですが、こちらはCSSスプライト書き出しには都合がよく、ステートのオーバーが「:hover」の定義として書き出されます。

.menu{ background:url("menu.png") top left no-repeat; } .menu_company{ width:220px; height:36px; background-position:-10px -10px; } /*:hoverは自動的に付加される*/ .menu_company:hover{ width:220px; height:36px; background-position:-10px -56px; }

安全に、楽にCSSスプライトを書き出すためのページ利用

実際のデザインファイルの場合、CSSスプライトの書き出しで気を付けたい点があります。

  1. CSSスプライトのためのスライスと、普通の画像書き出しのためのスライスを把握しておく。
  2. CSSスプライトを更新するときに、必要なスライスを全て選択する。
  3. CSSスプライトを書き出すときにスライス内に不要なオブジェクトや背景色が入らないようにする。

1と2の両方に当てはまることですが、書き出しは「選択したスライス」あるいは「ページ」が基準となるので、複数ページにCSSスプライト用スライスがあり、かつ従来の画像書き出し用スライスが混在していたら、誤ったCSSスプライトを書き出す事故率は高くなります。

3は以前までのスライスでも注意すべき点でしたが、Fireworks CS6のCSSスプライト書き出しは、一度全てのスライスを画像として書きだして1枚の画像に再構成するので、実行時にその領域に入っているものは全て画像内に入ってしまいます。スライスとして書き出されるので、スライス同士が重なるのもよくありません。

これら3つの問題を考えると、デザインとCSSスプライトのスライスを同じページに配置するとメンテナンスで失敗しそうなので、私はページを1つ増やしてそれをCSSスプライトのスライス専用に使っています(このサンプルは「design.fw.png」です)。

この方法だと、修正が発生した時に複数ヶ所の修正作業が必要になることもありますが、シンボルと組み合わせることでその作業負担を減らすこともできます。

おわりに

このようにFireworks CS6のCSSスプライト書き出し機能はスライスを書き出す感覚で簡単に使え、Dreamweaver CS6の新しい機能を同時に使うと実装も楽に行えます。最後に書いたような使い方を知っていれば現在のワークフローに取り込むのもそう大変ではないでしょう。