イトウ先生のTipsnoteFireworks CS6・Master Collectionの新機能

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 11月・12月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 Fireworks CS6 〜 Master Collectionの新機能:CSSプロパティパネル・CSSスプライト書き出し・jQuery Mobileテーマ 〜 】 

こんにちは、イマジカデジタルスケープの伊藤和博です。
今週は、Fireworks CS6(以下FWCS6)をご紹介します。

FWCS6など、Web系アプリケーションは、HTML5・CSS3に準拠した機能が次々と搭載されています。特に、FWCS6では、CSSプロパティパネルが追加され、border-radiusなどいちいち書くのが面倒なCSSをオブジェクトから簡単に書き出す便利な機能が搭載されています。

新しい拡張子

FWCS6では、ファイルの新しい拡張子として、fw.pngがデフォルトになりました。従来の.pngに変更する場合には環境設定で変更することが可能です。

FWCS6_a045

CSSプロパティパネル

この機能は、FireWorks CS5.1の時に、Adobe Labsから発表があった、Fireworksの拡張機能である「Fireworks CSS3 Mobile Pack」の機能の1つ、CSSプロパティパネルが、CS6になって正式に搭載されたものです。CS6の発売以降、このFireworks CSS3 Mobile Pack」のダウンロードは、Adobe Labsからはダウンロードできなくなっていますが、Fireworksディベロッパーセンターからのダウンロードは可能ですので、CS5.1またはCS5をお使いの方でダウンロードがまだの方は、ぜひダウンロードしてみてください。

Adobe Labs
Fireworksディベロッパーセンター

このCSSプロパティパネルは、ツールパネルのベクトルカテゴリから、任意のオブジェクトを作成し、塗りや線にカラーを適用すると、そのオブジェクトを選択するだけで、CSS3を書き出してくれる優れものです。各モダンブラウザのベンダープレフィックスやコメントアウトも書くことができ、【すべて】のボタンをクリックするとソースを丸ごとコピーするため、あとはコピーペーストで使用するだけです。

FWCS6_a040

CSSスプライト書き出し

CSSスプライトとは、複数の画像を1枚づつ読み込む、またはスライスして読み込むのではなく、複数の画像を1枚にまとめ、background-positionで位置を変更しながら表示するものです。Fireworksでは、1枚の画像または複数の画像をステージに貼り込み、1つの長方形スライスからCSSスプライトで書き出すことができるようになりました。
長方形スライスを選択後、スライスの上で右クリックし、CSSスプライトを書き出しを選択し、書き出しウインドウでCSSスプライトで書き出すと、CSSを作成します。

FWCS6_a043

FWCS6_a044

jQuery Mobile テーマ

その他、コマンドメニューの中に、jQuery Mobile テーマが新しく追加され、jQuery Mobile テーマのプレビュー、また初期設定のスプライトやスウォッチを元にjQuery Mobile テーマを作成・書き出しできるようになりました。

FWCS6_a046

CSS3でのグラデーションや角丸、jQuery Mobileの設置やテーマに関するご説明などは、「HTML5・CSS3の基礎知識(PC・スマートフォン)」にてご説明しています。

非推奨になった機能

その他、様々な新機能が搭載されたFWCS6ですが、バージョンがあがったことによって非推奨になった機能もいくつかあります。以下の機能は非推奨扱いとなります。

●AIR の書き出し
●スライドショーの作成
●Flex スキン
●Device Central
●スクリーンを共有

Device Centralは、携帯電話をエミュレートするものでしたが、Photoshop等でも、これまでのファイルメニュー→「Webおよびデバイス用に保存…」というコマンドから、以前の「Web用に保存…」というメニューコマンドに戻っています。3G携帯などにも対応していたDevice Centralが非推奨になった、ということを考えると、今後はもっとスマートフォンへの移行が加速することが想定されますね。

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |