[Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

もっともっと効率的にコーディングしたい@cappeeです。

Fireworks CS6に「CSSスプライト」が簡単に書き出せる新機能が加わったというので、今回怒涛のコーディング中にどうしても気になって使ってみました。

とても便利です。

CSSスプライトの書き出し方

スプライト用のページをつくって適当に画像をならべてそれぞれスライスします。

css sprite [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

スライスの名前はクラス名をつけてください。

全選択か、書き出したいスライスのみを選択して右クリックし「CSSスプライトを書き出し」を選択します。

ファイル名はスプライト用の画像を読み込む background のクラス名と同じになります。

書き出す画像の形式を選ぶ場合は「オプション」をクリックしてください。

sprite [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

形式は「最適化プリセット」から選択することができますが、PNGの8bitを選択したい場合はデフォルトだと含まれていせんので、あらかじめ「最適化」ウィンドウで指定し、右上にある矢印から「書き出し設定を保存」しておきます。

sprite3 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

保存すると「最適化プリセット」の一覧に表示されるので選択することが可能です。

sprite2 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

任意のフォルダに書き出すと、適当に配置したはずの画像がきれいに配置されたPNGスプライト用のCSSができます。

sprite4 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

画像が多いとファイル名を付けるのに時間がかかったり、どの画像をまとめるのが効率的か考えながらやっていると最初は時間がかかりましたが、次回からは倍速以上で作業できると思います。

一度書きだした画像に追加するとまた配置は変わってしまいますが、スプライト用のCSSをコピペするだけなので楽ちんです。

ページ単位とかカテゴリ単位とか、無駄な画像の読み込みをしないようにどの画像をまとめるのかは最初に考えておいたほうが良さそうですね。

スプライト用のCSS

実際に書き出されたCSSはこちらです。(今回クラス名はデフォルトのままです)

.sprite{ background:url("sprite.png") top left no-repeat; }
 ._r4_c3{ width:152px; height:38px; background-position:-30px -30px; }
 ._r8_c4{ width:20px; height:20px; background-position:-30px -98px; }
 ._r2_c2{ width:137px; height:19px; background-position:-30px -148px; }
 ._r10_c6{ width:15px; height:15px; background-position:-80px -98px; }
 ._r6_c10{ width:12px; height:12px; background-position:-125px -98px; }

コツをつかめば作業倍速&表示スピードの改善にもなっていいことづくめです。

Adobeのサイトでも紹介されているのでこちらもぜひご覧ください。

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

Pocket
article clipper [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利