Fireworks入門 第6回 Fireworksの便利な機能を活用してコーディングの効率を上げよう！
Fireworks入門
Fireworksでデザインした後は、それを元にコーディングしてWebページを作成していきます。連載最後となる今回は、コーディングする上で使いこなしたいFireworksの便利な機能を紹介します。
Fireworks CS6の体験版をダウンロード サンプルファイルをダウンロード
スライスをオブジェクトサイズにぴったり合わせて簡単挿入
スライスを挿入するには、いくつかの方法があります。その中でも、［長方形スライスを挿入］を使えば、オブジェクトのサイズにぴったり 合ったスライスを自動的に挿入できます。ドロップシャドウなどの効果も含めたサイズでスライスを入れてくれるので、「影が少しはみ出してしまっていた…」 というようなことがなく、大変便利です。
図1 スライスを挿入したいオブジェクト上で右クリックし、［長方形スライスを挿入］を選びます。すると、オブジェクトのサイズにぴったり合ったスライスが自動的に挿入されます 図2 テキストオブジェクトの場合は、［スライスを挿入］と表示されます。同様にスライスが挿入されます
※スライスしたいオブジェクトを選択した状態でキーボードの［Shift+Option（Alt）+U］キーを押すと、同様のスライスが挿入されます。
複数のオブジェクトに同時にスライスを挿入する
複数のオブジェクトに対して同時にスライスを挿入できます。オブジェクトを複数まとめて選択した状態で右クリックし、［長方形スライスを挿入］を選びます。表示されるアラートで［複数］を選ぶと、オブジェクトごとにスライスが挿入されます。
図3 ［複数］を選択すると、オブジェクトごとにスライスが挿入されます 図4 ［単一］を選択すると、選択したオブジェクトすべてを含む1つのスライスが挿入されます
カラーコードを楽々コピー
コーディングの際にオブジェクトの色は、16進数やRGB形式などのカラーコードで指定します。Fireworksでは、デザインに使 用している色のカラーコードを簡単にコピーすることができます。カラーパレットのカラーコードの右横にあるコピーボタンを押すと、クリップボードに各値が コピーされます。
図5 16進数とRGB形式のカラーコードをコピーできます
デザインからCSSコードを抽出
CS6からは［CSSプロパティ］パネルが追加され、Fireworksで作ったデザインから、そのデザインを再現するCSS3のコー ドを抽出できます。ただし、再現できるのは、グラデーション／ストローク／角丸／ドロップシャドウ／インナーシャドウといったCSS3で可能な表現の範囲 となります。
CSS3の実装が進んでおり、より軽量さが求められるスマートフォン環境向けのコーディングには十分活用できる機能です。
図6 オブジェクトに縦グラデーションをかけ、角丸にし、フィルタメニューでドロップシャドウをつけました。オブジェクトを選択した様態で［CSSプロパティ］パネルを表示します 図7 パネル上部にはオブジェクトから抽出したCSS3プロパティの情報が表示されます。その下に、オブジェクトのデザインを再現するCSS3コードが表示されます。すべてのコードをコピーしたい場合は、［すべて］ボタンをクリックします 図8 必要なプロパティのみコピーしたい場合は、［Command（Control）］キーを押しながら項目を選択し、［選択範囲のみ］ボタンをクリックします
以下は、［CSSプロパティ］パネルで抽出したCSS3コードの抜粋です。あとは、Dreamweaverなどのコードエディタにコピーします。
図9 抽出したCSS3コードをブラウザーで表示したところ
図9の抽出したCSS3コードでは、ベンダープリフィックスなしのlinear-gradientのコード内（赤線箇所）でグラデーションの方向が -90degとなっていますが、W3Cの仕様が変更になっており、最新版のFirefoxなどでは横グラデーションになってしまいます。 Fireworksのコード出力が最新版のW3Cの仕様に対応していないため、2012年12月現在、手動で-180degとする必要があります。
図10 グラデーションを使用している場合、該当の行の値を-90degから-180degに変更します
［ものさしツール］でサイズをメモ
コーディングの際、それぞれのオブジェクトのサイズを調べるのは面倒です。Fireworksでは［ものさしツール］を使用すると、距離のガイドつきの自動シェイプを挿入できます。
このように自動シェイプと［パス］パネルを活用すれば、アイデア次第で様々な形状を作ることができます。この方法ならパスツールの使用も最小限ですむので、パスを描くのが苦手な方もぜひトライしてみてくださいね。
図11 ［ツール］パネルから［ものさしツール］を選んでドラッグすると、その距離を含む自動シェイプが挿入されます
こうしてサイズを明記しておくと、デザインとコーディングをする人が別々の場合など、コーディングの人にわかりやすい依頼データを作成できます。
Shiftキーを押してガイド間の距離を簡単に測る
距離を測りたい位置にマウスカーソルを置いて［shift］キーを押すと、ガイド間の距離を表示させることができます。コーディング時だけでなく、デザイン中に距離を測りたいときにも非常に便利です。
図12 ［shift］キーを押すとガイド間の距離が表示されます
スタイル機能を使ってテキスト部分を明確に指定
デザインの中のテキストには、Webページを作成する際に画像テキストとして使うものもあれば、そのままテキストとして表示させるもの もあります。コーディングを依頼する際は、どちらのテキストなのかを明示しておかなければなりません。そこで、デザインデータを別途複製し、テキスト化す るところは赤色などにして、元のデザインデータとともに送付すればわかりやすくなります。
デザイン時にスタイル機能を使って、テキスト化するところに共通のスタイルを適用しておけば、赤色に変更する作業も簡単にできます。
スタイルの登録と適用
まずは、テキスト化するところに共通のスタイルを適用します。
図13 Webページでテキスト化するところの文字を装飾します 図14 ［スタイル］パネルから［新規スタイル登録］ボタンをクリックして、スタイル名を「標準テキスト」とし、スタイル登録しました 図15 テキスト化するすべてのテキストに同様のスタイルを適用します
コーディングの指示用にスタイルの変更
コーディング指示書を作成する際は、このスタイルが適用されているいずれかのテキストオブジェクトを選択し、見た目を変更します。
図16 今回はわかりやすいように赤色にします 図17 ［プロパティインスペクター］の［スタイル更新］ボタンをクリックします。すると、同じスタイルが適用されている部分がすべて赤文字に更新されます
このようにスタイルの更新機能を使えば、視覚的にもわかりやすい資料を簡単に作ることができます。作成したデータを元データに添えて渡すとよいでしょう。
最後に
これまで6回に渡って効率をあげたり、スムーズに作業を進めたりするための手法や表現方法をお伝えしてきました。自分が効率よく作業で きるようにするだけでなく、あとあと作業する人、確認する人がスムーズに作業できるようにデータを作成しておくことも大切な心配りだと思います。
Fireworksにはその心配りを簡単にすることができる機能がたくさん搭載されています。ぜひ使いこなして、美しく使いやすいデザイン、そして作業に関わる全員が気持ちよく作業できるようなデータを作り上げてくださいね。
Fireworks初心者向け連載は今回で終了です。Fireworksの魅力が少しでも伝わっていると幸いです。お付き合いいただきありがとうございました。