SmartCSS拡張機能の使い方

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

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

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

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

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

図2:Fireworksのシェイプやエフェクトを使って作成したマルチレイヤーのロゴ

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

図3: 1つの画像として書き出すためにイメージスライス処理を行います

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

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

図4: イメージスライス処理を行っていない画像オブジェクト

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

図5: イメージスライス処理を行っていない画像オブジェクトは無視されます

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

図6: SmartCSS拡張機能に画像を認識させるには、イメージスライス処理を行います

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

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

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

図7: 見た目は重なっていなくても、バウンディング・ブロックで見ると重なっています

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

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

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

図8: テキストブロックのバウンディング・ブロックを調節して、重なりを避けます

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

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

図9: サンプルレイアウト。ヘッダ、3つのカラム、フッタから構成されています

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

図10: エリアやカラムの境界線

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

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

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

図11: 中央エリアのレイアウトが異なるデザイン

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

図12: 4つの横カラムが認識されます

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

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

図13: 矩形（青い枠線）を追加することで、真ん中の2つのセクションは1つのカラムとして認識されます

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

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

図14: ルーラガイドを使って横カラムや縦カラムを把握します

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

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

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

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

図15: SSmartCSS拡張機能は入れ子にあるオブジェクトの親子関係を認識できます

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

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

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

ページ 2 / 3

前のページ

次のページ