はじめに
Fireworksの拡張機能である「Fireworks CSS3 Mobile Pack」が、Adobe Labsにて公開されています。この拡張機能を使えば、Web標準に沿ったWeb／モバイル／タブレット向けデザインの制作をより効率的に行うことができます。Fireworks CSS3 Mobile Packをインストールすると、下記2つの機能が追加されます。
-
［CSS3 Property］パネル：（注1）
デザイン要素からシームレスにCSS3プロパティを抽出できる
-
［jQuery Mobile Theme Skinning］ツール：（注2）
独自のjQuery Mobile用スプライト画像とテーマ用CSSを作成できる
CS6では、CSSプロパティという名称で標準装備されました。
CS6では、jQuery Mobileテーマという名称になって標準装備されました。
この記事に関するADC MEETUPセッション動画はこちら
必要な環境
この記事の手順を試すために、以下の体験版をインストールしてください。
Fireworks CSS3 Mobile Packのセットアップ方法
Fireworks CSS3 Mobile PackはFireworks CS5／CS5.1用の拡張機能です。Adobe Labsのダウンロードページの下部にある「Download Fireworks CSS3 Mobile Pack」リンクからダウンロードしてください。
ダウンロードしたZXPファイルを開くと、自動的にAdobe Extension Managerが起動します。指示に従ってインストール作業を進めてください。Fireworksのバージョンが古い場合は「この拡張機能をインストールできません。Fireworksの11.0から11.1の範囲のバージョンが必要です。」などのアラートが出てしまうので、必ず指定のFireworksを準備するようにしてください（Fireworks CS6 以降のバージョンでは、標準機能としてサポートされていますので、インストールは不要です）。
Fireworks CSS3 Mobile Packをインストールすると、［CSS3 Property］パネルと［jQuery Mobile Theme Skinning］ツールの機能を利用できるようになります。それでは、これら2つの機能を順に見ていきましょう。
［CSS3 Property］パネルの使い方
メニューから［ウィンドウ］-［エクステンション］-［CSS Properties］を選ぶと、［CSS3 Property］パネルが表示されます。このパネル上に、選択中のデザイン要素からシームレスにCSSプロパティを抽出することができます。なお、デザイン要素は長方形ツール（または角丸長方形ツール）で作成するようにしてください。パスやビットマップのデザイン要素だと部分的にしか抽出されません。
サンプルのデザイン要素を、図1に用意しました。これをCSS3で実装するとしましょう。
このデザインをCSS3で実装するとなると、width／height／background-colorなど、CSS3で表現する際に必要なプロパティを1つずつデザインデータから調べる作業が必要になります。デザインが複雑になるにつれ、この作業にかかる時間も増加してしまいます。数値を調べるだけの簡単な作業ですが、手間を感じたことのある方も多いのではないでしょうか。
ところが［CSS3 Property］パネルを使うことで、デザイン要素からCSS3プロパティを抽出する作業を楽に行うことができます。その手順はとても簡単で、デザイン要素を選択してから、［CSS3 Property］パネルの左下にある更新ボタンをクリックするだけです。すると、デザイン要素のCSSプロパティがパネル内に一覧で表示されます（注3）。
CS6では、機能強化され更新ボタンを押さずとも、デザイン変更時に自動的にCSS3が更新されるようになりました。
