FireworksでCSSスプライトを作成しページに実装する方法

CSSスプライトは複数の画像を1枚にまとめ、HTTPリクエスト数やファイルサイズを削減する手法です。Webサイトのパフォーマンス向上に役立つCSSスプライトを Adobe Fireworks で作成し、ページに実装する方法を解説します。

【コンテンツ】

  1. FireworksでCSSスプライトを作成する
  2. 書き出したCSSを編集する
  3. 画像を表示するHTMLを記述する
  4. 画像をリストのアイコンとして表示する

【記事執筆時の環境】
Windows 7 Professional 32bit SP1
Adobe Fireworks CS6

FireworksでCSSスプライトを作成する

Fireworks CS6には選択したスライスを1枚の画像にまとめ、CSSスプライトの画像とCSSを出力する機能が追加されました。ここで出力した画像とCSSはそのままWebサイト制作に使用できますので、CSSスプライト作成作業が大幅に効率化されます。

新規ドキュメントを作成し画像を配置する

Fireworksで新規ドキュメントを作成します。このときカンバスカラーは "透明" にします。

CSSスプライトにする複数の画像をカンバス上に配置しますが、位置はだいたいで構いません。
この記事では例として、ランキングに使うアイコンを10個配置してみます。

カンバスに画像を配置した図

スライスを挿入する

すべての画像を選択状態にし、右クリックメニューから [長方形スライスを挿入] を選択します。

スライス挿入メニュー

ダイアログが表示されますので、[複数] をクリックします。

スライス作成ダイアログ

レイヤーパネルに挿入されたスライスが表示されますので、名前を適当につけます。
ここでつけた名前はCSSクラス名の一部となります。

レイヤーパネル

CSSスプライトを書き出す

スライスをすべて選択状態にし、右クリックメニューから [CSSスプライトを書き出し] を選択します。

CSSスプライト書き出しメニュー

[書き出し]ダイアログが表示されますので、[オプション] をクリックします。

書き出しダイアログ

[CSSスプライト書き出しオプション]ダイアログでオプションを設定します。
接頭文字はクラス名(もしくはid名)の一部となりますので、適切な文字列を設定しておいたほうがよいでしょう。[例:]に表示されている "名前" はスライス作成時につけたスライス名です。
余白は "0" で構いません。そのほうがファイルサイズが小さくなります。
すべての設定が済んだら OKをクリックします。

CSSスプライト書き出しオプションダイアログ

[書き出し]ダイアログに戻りますので、ファイル名を入力し [保存] をクリックします。
ここで入力したファイル名は画像とCSSのファイル名になりますが、CSSスプライト全体のクラス名にもなります。この記事では "ranking-icon" としておきます。

書き出しダイアログ

以上で画像ファイル(ranking-icon.png)と CSSファイル(ranking-icon.css)の2つが作成されます。

書き出したCSSを編集する

書き出したCSSの内容は以下になっています。

HTMLコードをどう記述するかで変わりますが、「.ranking-icon」の設定を以下のように追加します。
画像ファイルのURLはCSSから適切にアクセスできるように、ファイル配置場所に合わせて変更します。background-sizeプロパティには画像の大きさを指定します。

画像を表示するHTMLを記述する

画像ファイルとCSSファイルをサイトのディレクトリに配置したら、head要素内にCSSを読み込むコードを記述します。

画像を表示したい場所には例として以下のように記述します。

この例での表示は以下になります。

No.1

今週のNo.1は~です。

No.2

今週のNo.2は~です。

No.3

今週のNo.3は~です。

画像をリストのアイコンとして表示する

今回の例では10個のランキングアイコンをCSSスプライトにしましたので、それらをリストのアイコンとして表示してみます。

HTMLは以下のように記述します。

CSSでは ranking-listクラスに対して以下のように設定します。
アイコンは before疑似要素を使って表示しており、画像の表示領域はさらに nth-child疑似クラスで指定しています。オリジナルのCSSを修正する手間はありますが、HTMLの記述はシンプルになります。

この例での表示は以下になります。

  • ランキングNo.1
  • ランキングNo.2
  • ランキングNo.3
  • ランキングNo.4
  • ランキングNo.5
  • ランキングNo.6
  • ランキングNo.7
  • ランキングNo.8
  • ランキングNo.9
  • ランキングNo.10

最近ではアイコン類はCSS3で作成するかアイコンフォントを使うようにしていますが、もし多くの画像を使うならやはり CSSスプライトにしておくべきですね。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ