Fireworksのデザインを簡単にHTML／CSS化できるSmartCSS拡張機能

その他の要件

SmartCSS

• smartcss.mxp (ZIP, 26K)

この記事では、Adobe® Fireworks® CS3向けに私が開発した拡張機能「SmartCSS」を紹介します。SmartCSS拡張機能を使えば、簡単にプロ現場レベルのHTMLファイルとCSSファイルを書き出すことができます。

それでは、SmartCSS拡張機能の使い方を詳しく紹介していきましょう。みなさん、ギアを一段上げたくらい生産性が向上しますよ。

Webサイト開発プロセスの現状

現在のWebページデザインの開発プロセスといえば、以下のような工程で行われているのではないでしょうか。

1. Fireworksを使用してページをデザインする
2. Fireworks上でデザインのスライス処理を行う
3. Dreamweaver（あるいは、ハンドコーディング）でHTMLやCSSを使ってデザインを再構築する

こうしてみると、FireworksとDreamweaverでデザインを行い、二度手間です。なぜ、このようなプロセスになっているのでしょうか？

「Webページを1枚の大きなビットマップ画像で制作する」、モックアップならそれでもいいでしょう。でも、それをWebページとして公開するとなると、ダウンロードに時間がかかりますし、到底プロの仕事とは見なされません。6ページボリュームのWebサイトの案件を受けて、6枚のビットマップ画像を納品しても、クライアントは納得してくれないでしょう。

それにダイナミックコンテンツを含むWebページとなれば、ダイナミックに変化するコンテンツボリュームに柔軟に対応できるデザインでなければなりません。そうした場合は、1枚の画像でページを作るのは不可能です。

コンテンツの拡張性を保持しながら、ファイルサイズをスリム化し、グラフィカル要素を抑えるには、HTMLとCSSを使うしかありません。CSSは、HTML文書のビジュアル面を制御するための技術で、コンテンツとビジュアル制御を分離するために開発されました。コンテンツのコードとビジュアル制御のコードを1つにまとめてしまうと複雑になり、扱いが面倒です。コンテンツとビジュアル制御を分離することで、制作効率だけでなく、運営効率も向上します。そうしたメリットが注目され、最近では商業WebサイトでもCSSデザインが採用されるようになっています。

理想を言えば、コンテンツとビジュアル制御を“完全に”分離させたいところです。しかし、目的のデザインを達成するために、HTMLコード内にビジュアル制御用のdiv要素を使用しているケースも少なくありません。手間をかけてもいいから完全な分離を実現した後にWebサイトを公開するという人もいます。私の場合はというと、CSSの知識とスキルはあれども、そこまで手をかけていられません。

みなさんも同じ状況にいるのではないでしょうか。もし、Fireworksでデザインして、それがボタンをクリックするだけで、プロ現場レベルのHTMLファイルとCSSファイルに変換されるとしたら、すごく素敵な話ですよね？

SmartCSSとは

SmartCSS拡張機能は、Fireworksドキュメントの構造を解析して、必要となるHTMLとCSSコードを生成します。いろいろな機能を持っており、その基本的な特徴を以下にあげておきましょう。

• 画像の使用を抑えた書き出し
• サイズ、カラー、行間、整列などのテキスト属性を保持したテキスト書き出し
• 矩形はdiv要素のブロックに変換。ボーダーや塗りのスタイルは維持される
• イメージスライスのサポート
• ダイナミックコンテンツに対応できるリサイズ可能なデザインとなるように、絶対配置を使用しない
• モダンWebブラウザで使用されるデザインパターンをサポート
• クロスブラウザコード

私がこのSmartCSS拡張機能を開発しようと思った理由は単純です。私自身が、こういう機能が欲しかったからです。

SmartCSS拡張機能を利用するには、以下の手順に従ってください。

1. SmartCSS拡張機能（ダウンロードファイル内にあるSmartCss.mxp）をインストールします。
2. メニューから「ファイル／書き出し」を選択します。
3. 書き出しダイアログボックスで、「書き出し」項目で「CSSレイヤー(.htm)」を選び、「ソース」項目で「Fireworksスライス」を選びます（図1）。
4. 「書き出し」ボタンをクリックする。

それでは、次のページから具体的に説明していきましょう。

SmartCSS拡張機能を効果的に使うためにも、以下の4つのルールを覚えてください。

1. テキスト、矩形、イメージスライスだけが書き出される
2. テキスト、矩形、イメージスライスは矩形ブロックとして扱われる
3. SmartCSS拡張機能がデザインのカラム構造を認識できるようにする
4. ドキュメントは2次元として扱われる

それでは、1つづつ解説していきます。

ルール1：テキスト、矩形、イメージスライスだけが書き出される

このルールを聞くと、Fireworksでは豊富なシェイプやエフェクトを使うことができるだけに、「書き出せるオブジェクトが限られている」と思ってしまうでしょう。でも考えてみてください、HTMLで表示されるのもこの3種類のオブジェクトだけです。制限があるからといって、あなたのデザインクリエイティビティを十分に発揮できないということはありません。むしろ、図2のようにイメージスライスを使って、簡単な操作で行えるというメリットの方が大きいでしょう。

ロゴ全体を1つの画像として書き出すためにイメージスライス処理を行う（図3）。

このイメージスライス名を「CorpLogo」としました。この名前が書き出す際にファイル名として使用されます。

ノート: SmartCSS拡張機能を使用した書き出しでは、イメージスライス処理を行った画像しか書き出されません。処理を行っていない他の画像は無視されます。図4を見てください。画像オブジェクトがあります。

TSmartCSS拡張機能は、イメージスライス処理を行っていない画像オブジェクトを認識できません。そのため、図4のようなオブジェクトを書き出すと、図5のようになります。

画像を書き出すには、イメージスライス処理を行い、SmartCSS拡張機能に画像の存在を認識させます。

ルール2: テキスト、矩形、イメージスライスは矩形ブロックとして扱われる

SmartCSS拡張機能は、各オブジェクトのサイズを分析して、オブジェクト同士の間隔やレイアウトのパターン（縦カラム、横カラムの構造）を認識します。思い通りのデザインを実現するには、SmartCSS拡張機能が認識しやすいように、各オブジェクトの境界線を明確にしておかなければなりません。

特にテキストは紛らわしいので注意が必要です。図7のように実際のテキスト部分よりもバウンディング・ブロックが大きいことはよくりあります。

図7ではテキストブロックとイメージスライスが重なっています。この場合、SmartCSS拡張機能は、この2つのオブジェクトをHTML上で隣り合う要素として配置すべきかどうか判断できません。

Tip: すべてのオブジェクトのバウンディング・ブロックを表示するには、メニューから「選択／すべて選択」を選びます。

重なりがある場合は、バウンディング・ブロックを調節したり、オブジェクトを再配置する必要があります。図7の重なりを調節したのが図8です。

ルール3：SmartCSS拡張機能がデザインのカラム構造を認識できるようにする

あなたのデザインレイアウトが縦横どのようなカラム構造になっているのか、それをSmartCSS拡張機能に認識させる必要があります。図9は、ヘッダ、3つのカラム、フッタからなる典型的なレイアウトです。

央エリアは、3つのカラムで構成されています。通常、各カラムはコンテンツのボリュームに応じて縦方向に拡縮し、それに合わせてフッタも上下移動するようにします。このレイアウトを見て、みなさんの目には、どこがエリアやカラムの境界線になるかは明らかでしょう（図10）。

SmartCSS拡張機能も同じようにレイアウトを分析します。オブジェクト間やオブジェクトのグループ間にどのような境界線が引けるかを探します。

まず最初に、左から右へと横断的に分析して、横カラムを探します。横カラムを特定したら、各横カラム内を縦カラムに分割できるかどうかを分析します。図10では、3つの横カラムを認識して、次に中央の横カラム内で3つの縦カラムを認識します。

図10のようなレイアウトだと、SmartCSS拡張機能にも分かりやすく、思い通りの書き出し結果が得られると思います。では、図11のようなレイアウトだとどうでしょうか。

SmartCSS拡張機能はまず横カラムを分析します。この場合、4つの横カラムが認識されます（図12）。

4つの横カラムが認識されるのは、中央エリアを上下2つに区別できるためです。この状態で書き出すと、中央の上の方のセクションにダイナミックコンテンツを追加しても下の方のセクションを下に追いやる柔軟なデザインとはありますが、これは望んでいるいるデザインではありません。

この問題を解決するには、中央エリアに矩形を追加して、中央エリアが2つの横カラムに分断されるのを防ぎます。ここでは、中央エリアの真ん中カラムを囲む矩形を追加します。追加する矩形はデザインの邪魔にならないように、背景色と同じ色にして見えなくするといいでしょう。図13は、矩形を追加したところです（青い枠線）。これで、真ん中の2つのセクションは1つのカラムとして認識されます。

ノート: SmartCSS拡張機能にカラム構造を認識させる上で、オブジェクト間に大きな間隔がなくても構いません。真っ直ぐなラインが引けるところは、自動で区別されます。

図14のようにルーラガイドを使えば、デザインの横カラムや縦カラムを把握しやすくなります。

ルール4：ドキュメントは2次元として扱われる

これは、ルールというよりも時間節約の手段としての仕様です。SmartCSS拡張機能の書き出しで、HTMLの入れ子構造を実現するにはどうすればいいのか悩みました。考えた方法の1つは、レイヤーとサブレイヤーを使って、オブジェクトの親子関係を定義する方法でした。ただ、これでは作業に時間がかかりそうです。そこで、より簡単に実現できる方法を考えました。

Tip: デザインをフラットな2次元ドキュメントとして扱うことで、SmartCSS拡張機能は入れ子の親子関係を把握できます。

フラットな2次元ドキュメントとして扱うというのはどういうことかというと、まず図15を見てください。

ご覧の通り、テキストとイメージスライスが矩形の中に収まっています。SmartCSS拡張機能は、この状態を分析して、テキストとイメージスライスを矩形の子要素として認識します。このように自動で認識されるため、わざわざレイヤーで親子関係を必要はありません。

この矩形の中身についても、ルール3と同じ方法で横カラム・縦カラム構造の分析が行われます。つまり、まず横カラムを認識して、次に縦カラムが認識されます。

以上で、すべてのルールの説明は終わりです。これらのルールを意識してデザインすれば、期待通りのHTML・CSSファイルが書き出されるでしょう。

前述の通り、SmartCSS拡張機能は素晴らしい機能がたくさんあります。

• テキストのハイパーリンク
• グラデーションやパターンの塗り
• 変形させた矩形
• 線
• 点線
• 3スライス
• 左float、右float

テキストのハイパーリンク

Fireworksでは、画像のハイパーリンクは書き出せても、テキストのハイパーリンクを書き出すことはできませんでした。モックアップでは画像のリンクでも構いませんが、Webページとして公開するならテキストのリンクにしたいところです。このSmartCSS拡張機能には、テキスト状態でハイパーリンクを書き出せる機能がついています。その使い方は以下の通りです。

図16は、サイドバーに置くシンプルなナビゲーションメニューです。

各テキストオブジェクトを選択して、そのバウンディング・ブロックを表示させます（図17）。

次に各テキストオブジェクトをスライス処理します（図18）。

ノート: スライスの領域は、テキストオブジェクトのバウンディング・ブロック内の75％以上を占めるようにします

さらに、各スライスに「_csslink」を含む名前を付けます。そうすることで、SmartCSS拡張機能は「このスライス領域をテキストとして書き出さなければならない」と認識します（図19）。

最後に各スライスを選択して、プロパティダイアログボックスでリンク先を指定します（図20）。

以上で完成です。

グラデーションやパターンの塗り

図21は、グラデーションの塗り効果です。

このグラデーションを書き出す方法の1つは、グラデーションのエリア全体をスライス処理して、1枚の大きなビットマップ画像として書き出す方法です。でも、プロのCSSデザイナーなら、もっと素晴らしい方法が思いつくのではないでしょうか。そうです、グラデーションの薄い断片を切り出して、それを背景画像として繰り返し配置するのです。

図21の薄い断片を水平方向に繰り返し配置してもグラデーションの見た目は変わりません（図22）。

SmartCSS拡張機能では、以下のようにしてこのトリックを実現できます。

1. グラデーションの一部にスライス処理を行います（図23）。

2. スライスに 「_csspattern」 を含む名前を付けます。

これで作業は完了です。部分的にスライス処理した画像が繰り返し背景画像として使用されます。

ノート: 繰り返しの方向は水平方向だけでなく、垂直方向もあります。垂直方向に繰り返す場合は、図25のようにスライス処理を行います。

もし、水平・垂直の両方向に繰り返したい画像の場合は、図26のように使用する部分だけをスライス処理します。

変形させた矩形

デザインをする上で、すべて四角形の要素ばかりで構成するよりは、違った形の要素も取り入れたいところです。SmartCSS拡張機能で矩形以外のオブジェクトを扱う方法は、以下の通りです。

1. まず矩形オブジェクトを作ります（図27）。

2. 塗りのあるパスオブジェクトを使って、パスの結合の型抜きでエッジを変形させます（図28）。

3. 変形させたエッジ部分だけをスライス処理します（図29）。

図30が完成図です。

書き出したHTML／CSSファイルでは、このエッジは画像として矩形の端に配置されます。

線

ルール1でSmartCSS拡張機能が書き出せるのは、テキスト、矩形、イメージスライスだけだと説明しましたが、少し補足します。線も書き出すことができるのです。水平線、垂直線、これらの線は手軽に使えるデザイン要素でもあります。図31を見てください。サンプルのメインナビゲーションメニューでは、メニュー項目の間を垂直線で隔てています。

Tip: 重なりをチェックするには、「すべて選択」を選んで境界線を表示させます。

点線

SmartCSS拡張機能は、点線と破線もサポートしています。垂直線を点線にするには以下の手順で行います。

1. 線を選択します（図33）。

2. プロパティダイアログボックスで「点線」を選択します（図34）。

Figure 35 shows you what they look like now.

以上で完成です。この線は、HTML上でも点線として表示されます。同じように破線も適用できます。点線と破線は、矩形でも利用できます。

3スライス

扱える矩形が四角だけじゃ物足りないという人もいるでしょう。SmartCSS拡張機能は、図36のような角丸デザインやドロップシャドウ付きのボックスにも対応できるようになっています。

単に四端をスライス処理するだけでは、静的なボックスとなり、ボックス内のコンテンツボリュームが増えた場合に対応できません。コンテンツボリュームに応じて、ボックスが拡縮するようにしたいものです。

柔軟性のあるボックスを実現するためにデザイナーがよく使うテクニックは、ボーダーのないボックスの中に3つの画像を入れ込むテクニックです。まず、そのテクニックを解説しましょう。1つ目の画像は、ボックスの上部です（図37）。

2つ目の画像は、ボックスの下部です。

3つ目の画像は、中央の一部分です（図39）。

この中央部分から抜き出した画像は、背景画像として繰り返し配置されます。このように中央部分の画像を利用することで、コンテンツボリュームに応じてボックスが拡縮するようにできます。

そして、div要素の中にこれらの画像を配置します。ボックスの上下の画像は、それぞれdiv要素の上下に配置し、中央の画像は背景画像として繰り返し配置します。

では、SmartCSS拡張機能でこのテクニックをどのように実現するかというと、単に3カ所にスライス処理を行うだけです（図40）。そうするだけで、SmartCSS拡張機能は柔軟なボックスとして認識して書き出します。

念のため、その手順を確認しておきましょう。

1. 角丸の部分がスライスの中にちゃんと収まっていることを確認します（図41と図42）。

2. 3つのスライスをすべて同じ幅にします。
3. 中央のスライスは、ボックス内のコンテンツと重ならない綺麗な部分を選択するようにします。

左float、右float

先ほど、メインナビゲーションメニューについて解説しました。サンプルを見ていただくと分かるように、メインナビゲーションメニュー部分は、左端は変形させ、テキストと線を右側に配置しています（図43）。

このメインナビゲーションメニューをHTML／CSSに書き出す上で1つ問題となることがあります。それは、WebブラウザやOSによってフォントの表示 サイズが異なるということです。場合によっては、テキストブロックの合計サイズが、デザインの幅を超えてしまうかもしれません。最悪の場合、図44のよう にテキストブロックがナビゲーションのエリアからはみ出して、他のコンテンツを下に追いやってしまうかもしれません。

このような状態を避けるには、幅が可変のテキストブロックにするしかありません。このメインナビゲーションメニューの場合だと、「Contact」の部分が思ったより数ピクセル広くなったとしたら、「Home | About | Products | 」の部分が左へシフトするようにします。

このような解決方法には、CSSのfloatプロパティを使います。すべての要素を右側にfloatさせれば、巻き込みが起きず、見た目の問題は起きません。そして、左端の変形させた画像も左端にずっとあるようにしたいので左側にfloatさせます。

1. ナビゲーションバーエリア内で一番大きな間隔（widest gap）を調べます（図45）。

2. その大きな間隔の左側のオブジェクトは左float
3. その大きな間隔の右側のオブジェクトは右float

さらに学習したい方へ

SmartCSS拡張機能は、デザインファイルからハンドコーディングなしに、あっという間にWebページへと変換することができる革新的なツールです。みなさんにとっても役立つとうれしいです。SmartCSS拡張機能を利用する上で必要な情報は、すべてこの記事にあります。

もっと機能がほしいという人もいるでしょう。SmartCSS拡張機能のアップグレード版として「SmartCSS-Plus」機能拡張を開発中です。SmartCSS-Plusでは、HTMLフォームをサポートするなどより機能を充実させる予定です。完成後は、 私のサイト*で販売します。

SmartCSS拡張機能に関してご意見ご要望があれば、私のサイト*からどうぞ。