この記事では、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. 「書き出し」ボタンをクリックする。

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

図1 書き出しダイアログボックスで、「書き出し」項目で「CSSレイヤー(.htm)」を選び、「ソース」項目で「Fireworksスライス」を選びます

必要ソフトウェア

この記事では、以下のソフトウェアとサンプルを使用しています。

Fireworks CS3

• 体験版
• 購入

SmartCSS

• smartcss.mxp (ZIP, 26K)

サンプルファイル

• smartcss_demo.zip (ZIP, 455K)

事前に必要な知識

FireworksとHTMLに関する基礎知識

ページ 1 / 3

次のページ

著者について