SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 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]パネルでプロパティを抽出したところ

次のページ
CSS3プロパティのコード

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

大谷 剛(オオタニ ゴウ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6431 2013/01/15 17:39

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング