Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Webもモバイルデバイス向けもこれ1つ!~Fireworks拡張機能で思い通りのデザインを作成

原題:Fireworks CSS3 Mobile Packを使ってみよう

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/04/27 14:00

 本記事では、現在Adobe Labsにて公開されているFireworksの拡張機能「Fireworks CSS3 Mobile Pack」を使用して、デベロッパにもデザイナにも役立つデザインノウハウをお伝えしていきます。なお、Fireworks CS6ではこのFireworks CSS3 Mobile Packがさらに強化され、Fireworksに標準装備されています。

目次

はじめに

 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で実装するとしましょう。

図1 角丸でグラデーションの塗りの処理を行ったデザイン要素
図1 角丸でグラデーションの塗りの処理を行ったデザイン要素

 このデザインをCSS3で実装するとなると、width/height/background-colorなど、CSS3で表現する際に必要なプロパティを1つずつデザインデータから調べる作業が必要になります。デザインが複雑になるにつれ、この作業にかかる時間も増加してしまいます。数値を調べるだけの簡単な作業ですが、手間を感じたことのある方も多いのではないでしょうか。

 ところが[CSS3 Property]パネルを使うことで、デザイン要素からCSS3プロパティを抽出する作業を楽に行うことができます。その手順はとても簡単で、デザイン要素を選択してから、[CSS3 Property]パネルの左下にある更新ボタンをクリックするだけです。すると、デザイン要素のCSSプロパティがパネル内に一覧で表示されます(注3)。

 CS6では、機能強化され更新ボタンを押さずとも、デザイン変更時に自動的にCSS3が更新されるようになりました。

図2 [CSS3 Property]パネルでプロパティを抽出したところ
図2 [CSS3 Property]パネルでプロパティを抽出したところ

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 大谷 剛(オオタニ ゴウ)

    株式会社サイバーエージェント webディベロッパ 1986年岐阜県生まれ。多摩美術大学美術学部卒。2010年よりWebディベロッパとして株式会社サイバーエージェントに入社し、HTML・CSS・JavaScript等での制作面を担当。現在は主にスマートフォン向けのwebアプリやハイブリッドアプリの制...

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5