Fireworks CS4での標準規格に準拠したWebデザインの作成

その他の要件

Dreamweaver CS4（または任意のHTMLエディタ）

• 体験版
• 購入

アップデート版のCSS書き出しスクリプト、HTMLコンポーネント、およびSmolderサンプルファイル

• css_export_script_smolder.zip ZIP, 1.6 MB

World Wide Web Consortium（W3C）は他のグループや標準規格制定団体とともに、Webベースコンテンツの作成および解読に関するテクノロジの確立を手がけています。「Web標準」とも呼ばれるこれらのテクノロジは、Webにパブリッシュされるあらゆるドキュメントの長期的な有効性を保証しつつ、より多くのWebユーザに、より優れたメリットを提供できるよう、綿密に計画・制定されています。
— Web Standards Projectからの抄訳

デザイン段階からページ完成に至るまでの筆者のワークフローにおいて、Fireworksは長年重要な役割を果たしてきました。しかし、画像をスライスして書き出し処理を行った後に、生成されたマークアップ言語とCSSを手作業で編集せざるを得なかった経験があります。Fireworks CS4チームはこのようなケースが存在することを認識し、今回、CSS書き出し機能関連の問題を解決することに取り組んでいます。

Fireworks CS4がXHTML+CSSの書き出しに対応することが公表された際、筆者はその可能性に興奮する一方で少々疑念を抱きました。今日の業界においてCSSはとても重要なキーワードであり、このCSSが利用できるようになることは飛躍的な一歩とさえ言えます。しかし、CSSが完璧なWebサイトを構築するための決定的な答えと言うわけではありません。今日のWebを見渡しても、残念ながらCSSを用いた不適切なWebサイトは数多く存在します。完璧なWebサイトの構築を可能にする真の決定的な答えといえば、それはWeb標準に間違いありません。

Web標準こそがWebの未来と言えます。読者がまだWeb標準を採用していないのであれば、今こそWeb標準を始める絶好のタイミングです。Web標準を利用することのメリットをいくつか挙げてみることにします。

• 開発およびメンテナンスにかかる手間と費用の軽減・節約
• 既存および今後のWebブラウザにも対応するための継続的な互換性
• より多くの人々、およびより多くのインターネットデバイスを対象としたアクセシビリティ
• 検索エンジンのランキングが高まることの可能性

残念なことに、筆者がCSS書き出し機能に対して感じた疑念は現実のものになっていました。CSSベースのWebページを書き出すために様々な努力が尽くされたものの、生成されるコードの意味論的な整合性、アクセシビリティおよび開発の簡素化は、やや見過ごされがちな結果となっています。

そこで、FireworksとWeb標準のエバンジェリストである筆者は、読者の皆さんが、より優れた標準規格準拠のWebページを作成できるようにするために、Fireworksチームと共同してCSS書き出し機能の強化版を開発することにしました。この強化版に施された主な変更点は以下の通りです。

• テキストオブジェクトにタグ付けを行うことで、意味論的な整合性の取れたマークアップが一段と手軽に生成可能に
• ユーザがあらゆるデバイスおよびブラウザ上でテキストサイズを調整できるようにするために、すべてのフォントサイズをパーセント比率で指定
• 様々な量のコンテンツへの対応およびユーザによるテキストサイズの調整を可能にするために、Div要素の高さをmin-height（最低値）で指定することが可能に
• １つのテキストオブジェクトから、改行を用いて単一の段落要素を作成するのではなく、適切なケースでは複数の段落要素を作成することが可能に
• 順不同リスト作成用のList Itemシンボルが含まれた、改良版の柔軟なHTMLコンポーネントシンボルライブラリを装備
• すべてのボーダーの配置およびサイズを指定したDivを、厳密なサイズで、より正確な位置に配置することが可能に

他にも、様々なバグフィックスや改善点が含まれています。

この記事では標準規格準拠のデザイン作成を支援する、強化アップデート版CSS書き出し機能の使用法について解説します。

セマンティック（意味論）を考慮したマークアップを記述することは、Web標準の使用に向けた重要な一歩です。セマンティックを考慮したマークアップとは、ドキュメント冒頭の最も重要な見出しに<h1>要素を用いるなど、各XHTML要素をそれぞれの本来の意図通りに用いる記述法のことです。

セマンティックを考慮したマークアップが完成したら、ドキュメントの構造とプレゼンテーションを分離し、CSSを利用してこれらの要素にスタイルを適用します。この際、マークアップとCSSの両方を検証し、これらが標準規格に準拠していることを確認するのも重要です。もちろん、他にも検討が必要な標準規格もありますが、この記事では、こられ２つを最も重要な標準規格として扱うことにします。

Fireworks CS4が登場するまで、Webサイトのレイアウトデザインは、各要素の意味合いをほとんど考慮することなく生成されていました。もちろん、あらかじめ視覚的に大小異なる見出しを作成することはあったかもしれませんが、実際に使用される要素はデザインが完成してから、XHTMLとCSSでの構成段階で決定されるケースがほとんどでした。

このワークフローは、１人のデザイナーがWebページのデザインと構築を担当する場面では十分なものの、XHTMLの構築が他のデザイナーやデベロッパーに委ねられるような場面では意図したドキュメント構造が必ずしもその通りに認識されるとは限らないため、結果として意味論的な配慮が欠如する恐れがあります。

この記事で紹介するアップデート版のCSS書き出し機能は、Fireworks CS4ドキュメント上でセマンティックを考慮したデザインを計画・実現するために２つの方法を提供します。これにより、一段と効率良くデザイン案を計画できるようになるだけでなく、第三者が容易にプロジェクトに参加できるようにもなります。

ここからは、その２つの方法である「テキストのタグ付け」および「HTMLコンポーネントシンボル」を解説するとともに、これらの長所・短所もあわせて紹介することにします。

テキストオブジェクトとタグ付けの使用

Fireworksデザイナーの大半はテキストツールを利用して、作業中のデザイン上にテキストを配置しているはずです。だからこそ、意味合いを考慮した構造を定義する上で、標準的なテキストオブジェクトこそが絶好の機会になるのではないかと考えました。

そこで、今回はテキストオブジェクトにタグを付けられるようCSS書き出し機能を改良し、単に明快な命名基準に従うだけで、出力後のXHTMLに適切なタグが配置されるようにしています。

テキストオブジェクトから生成できる要素は、<a>、<blockquote>、<div>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<label>、<p>および<span>です。これらのタグ以外が指定されている場合、またはタグが一切指定されていない場合は、<p>が生成されます。

テキストオブジェクトで特定のタグを使用することは、当該オブジェクトの名前の冒頭にそのタグ名を付けることで指示できます。例：<h1>タイトル。

では実際に試してみましょう。

1. Fireworks CS4が既に起動している場合は、一旦Fireworksを終了します。
2. 記事冒頭の「はじめに」の節にリンクが用意されている付属ファイルをダウンロードし、このファイル内のREAD MEを参照しながらシステムにCSS Export ScriptとHTML Componentsをインストールします。
3. Fireworks CS4を起動します。
4. カンバスカラーを白に設定した500 x 500の新規ドキュメントを作成します。
5. テキストツールを選択し、カンバス上の任意の位置をクリックしてから「Hello world」と入力します。
6. フォントと書式の設定を「Arial、Bold、20px」に変更します。
7. メニューからファイル／書き出しを選択し、書き出し対象を「CSSと画像」に設定してから、ドキュメントをtagging.htmとして書き出します。
8. 書き出し先の位置にナビゲートし、tagging.htmとtagging.cssの両ファイルをDreamweaver CS4で開きます。
9. tagging.htmをデザインビュー、ライブビュー、またはプライマリブラウザでプレビュー表示してみます。Fireworksドキュメントとほぼ同じ表示結果が得られるはずです。
10. tagging.htmのソースを表示します（図１参照）。

ここまでではFireworksでテキストオブジェクトに対してタグ付けを行わなかったため、コンテンツは段落内に書き出されています。この段落にはlastNodeクラスが与えられ、Txt_Helloクラスのdivに囲まれていることが確認できます。

このドキュメントに関連付けられたCSSファイルを表示すると、lastNodeクラスはIDが「main」の要素内の段落に適用されることと、そのクラスのmargin-bottomが０にリセットされていることが確認できます。

また、別のdivに適用されるTxt_HelloクラスはFireworksのテキストオブジェクトの名前に基づくものでおり、このクラスによって所定の位置への配置が定義されるとともに、div内の段落にも適切なスタイルが適用されるようフォントとカラーのプロパティが定義されます。

これにより、ユーザはFireworks上ではもちろんのこと、外部エディタやCMSを利用しても、複数の段落を追加し、常に適切なスタイルを各段落に適用させることができます。ただし、テキストブロックの最後の段落には、必ずlastNodeクラスを適用する必要があることだけ注意するようにしてください。

では、次のサンプルを試してみましょう。

1. Fireworksの作業画面に戻り、「Hello world」のテキストオブジェクトを編集します。
2. カーソルをテキストの末尾に置き、Enterキーを２度押して空白行を１行挿入します。
3. 次に、「A second paragraph?」と入力します。
4. ドキュメントを再度書き出し、その結果をDreamweaverで確認します（図２参照）。

Fireworks CS4搭載のオリジナル版のCSS書き出し機能では、複数の段落が作成されることはなく、行間に改行（<br />）を用いて余白が挿入されます。また、Txt_Helloクラスも段落に適用されますが、divは作成されません。したがって、検証エラーを起こさずに新たなコンテンツを追加することはできません。

ここまでで、アップデート版のスクリプトが既に一段と標準準拠性に優れたページの作成に役立っていることがお分かりいただけることでしょう。

次に、タグ付けを試してみましょう。

1. Fireworks CS4の作業画面に戻ります。
2. 「Hello world」テキストオブジェクトを選択します。
3. プロパティインスペクタまたはレイヤーパネル上で、このテキストオブジェクトの名前を「<h1>title」に変更します。
4. ドキュメントを再度書き出し、その結果をDreamweaverで確認します（図３参照）。

ご覧のように、ここでは読者が「Hello world」を<h1>に指定したことがFireworksによって尊重されています。しかも、今回は改行で行間に余白が挿入されているとともに（見出しの中に段落が配置されては矛盾が発生するため）、スタイルが適用できるよう<h1>にh1_titleクラスが設定されています。また、<h1>要素内に配置できるのがインライン要素のみであることから、ここでは新たなdivが作成されることがありません。

既に触れたように、テキストオブジェクトにタグを付ければ、12種類のXHTML要素を生成することができます。

なお、この方法でアンカーの<a>を生成する場合は、これに対応するスタイルがすべてのアンカー要素にグローバルに適用されるという点に注意が必要です。また、:link、:visited、:hover、:focus、または:activeの仮想クラスに異なるスタイルを指定することはできません。これらの仮想クラスのスタイル設定は、書き出されたCSSファイルを手作業で編集して調整する必要があります。

テキストオブジェクトの使用に関しては、他にも検討すべき３つの重要事項があります。

• CSS書き出し機能はテキストをカンバス上の実際の位置ではなく、境界ボックスに基づいた位置に配置します。したがって、テキストを正確な位置に書き出すには、デザイン上でテキストボックスの配置やサイズ調整を厳密に行うことが重要になります。なお、この作業によりFireworks上のデザインには、わずかなズレが存在するかのように表示されることがあります。
• 固定幅（area-text）の設定はスタイルシートに出力されますが、可変幅（point-text）は出力されません。このため、どの設定が適切であるかを適宜検討する必要があります。
• 複数の書式が設定されたテキストに関しては、ベースとなるオリジナルの書式設定に関するスタイルのみが書き出されます。

では上記の重要事項について少し詳しく見ることにしましょう。ここでは４つの<span>と２つの<a>タグでタグ付けが行われた、６つのpoint-textオブジェクトから構成されるWebサイトの「パンくずリスト」を例に挙げることにします。次の図にあるように、書き出し後の間隔が均一になるよう、Fireworksで境界ボックスを６ピクセル間隔で配置していたとしても、Fireworks上のこれらのテキスト間隔は９ピクセルで表示されることがある点に注意が必要です（図４参照）。

今回の強化版CSS書き出し機能は、文字間の間隔（letter-spacing）、行間（line-height）、テキストの横揃え（text-alignment）、フォントの太さ（font-weight）およびフォントスタイル（font-style）の各オプションをサポートするとともに、段落の前後にある余白を、それぞれの段落に関連付けられた、単位「em」のmargin-bottom値に変換します。

HTMLコンポーネントシンボルの使用

Fireworks CS3から導入されたリッチシンボルは、Webサイトのデザイン時、インターフェイスのプロトタイプ作成時、または他のグラフィックデザインの構成時に利用・再利用できる、編集可能なデザイン・インターフェイスコンポーネントです。Fireworks CS4では、これらのシンボルの書き出し時に、必要なXHTMLマークアップおよびCSSが生成されるよう、この機能が強化されています。

Fireworksチームが当初目指したのは、CSS書き出し機能が用いられる際、HTMLコンポーネントを利用してすべての要素のマークアップを生成することでした。しかし、今回タグ付けというテクニックが導入されたことにより、HTMLコンポーネントの使用は効率面でも劣ることから、HTMLコンポーネントの必要性は下がると考えられます。だからといって読者のワークフローにおいて、HTMLコンポーネントが無用になるという分けではありません。その証拠に、筆者は新たなHTMLコンポーネントシンボルを作り直し、これらを今回の強化版CSS書き出し機能の一環として提供しています。

メモ：既存のHTMLコンポーネントを既に使用している場合は、当該ドキュメントのライブラリを更新して新たなコンポーネントを含めない限り、デザインの書き出し時にエラーが発生する恐れがあります。

HTMLコンポーネントシンボルは、共有ライブラリパネル（メニューからウィンドウ／共有ライブラリを選択）のHTMLフォルダに配置されています。シンボルとして用意されているのは、リンク、見出し_１、見出し_２、見出し_３、見出し_４、見出し_５、見出し_６、テキストフィールド、テキストエリア、コンボボックス、チェックボックス、ラジオボタンおよびボタンです。

フォーム要素にはすべて、Windows VistaとMac OS ×両方のデフォルトテーマが適用されたものが用意されています。また、他のOSテーマも手軽に作成できます。これについて詳しくは、Aaron Beall執筆の別途記事「Fireworksでのリッチシンボルの使用」およびSarthak Singhal執筆の別途記事「Fireworks CS3でのリッチシンボルの拡張」を参照してください。

CS3のリッチシンボルと同じように、HTMLコンポーネントのプロパティは当該シンボルがカンバスで選択された状態で、シンボルプロパティパネルを利用して変更できます。

見出しシンボルの使用

見出し_１から見出し_６のコンポーネントには、以下の編集可能プロパティが含まれています。

• Text（テキスト）
• Color（カラー）
• Font (Family)（フォントファミリ）– 様々な標準の選択肢あり
• (Font) Size（フォントサイズ）
• (Font) Style（フォントスタイル）
• (Font) Weight（フォントの太さ）
• Line height（行間）

テキストオブジェクトに見出しのタグ付けを行う方法と比較して、このリストに特に制限があるように感じられないかもしれませんが、この２つには明らかな違いがあります。

• シンボルには任意の幅を設定できないため、必ずテキストコンテンツのサイズが適用される
• シンボルには複数の行にわたるテキストを配置できない
• シンボルの行間設定値の変更はFireworksには反映されない
• シンボルのプロパティは一度につき１つしか変更できない

さらに、残念ながら共有ライブラリパネルにはCS3の短所が引き継がれており、CS4のシンボルプロパティパネルにも、次に挙げる煩わしい既知のバグがいくつか存在します。

• ショートカットキーを利用してフィールドのコンテンツをコピー＆ペーストすることができず、その代わりにシンボル自体がコピー＆ペーストされてしまいます。コピー＆ペースト機能には、対象フィールドを右クリックすることでアクセスできます。
• パネル内の表示が正しく更新されないことがあります。内容を編集した直後でも、古いプロパティが表示されたままになることがあります。

シンボルの使用には、再利用が可能であること、手軽に入れ替えが可能であること、そして一度の編集で複数の対象を更新できること、といったメリットの他にも、使用するフォント（ファミリ）の選択肢をユーザのコンピュータ上で最も一般的なものに限定できるというメリットがあります。ただし、ここでテキストオブジェクトを弁護するのであれば、テキストオブジェクトを使用する場合、標準的なフォント以外が用いられる際に、必要な警告が発せられるということが注目に値します。

どのフォントがWebで問題なく使えるかが不確かな場合は、Code Styleサイトの最も一般的なWindows・Mac・Linux向けフォントの調査結果を参照することをお勧めします。

既にお気づきの通り、筆者は見出し用のHTMLコンポーネントの使用を推奨していません。それ以外のリンクシンボルおよびフォーム要素のシンボル群は、読者のワークフローにおいて重宝するはずです。

リンクシンボルの使用

リンクシンボルには、以下の編集可能プロパティが含まれています。

• Text（テキスト）
• Font (Family)（フォントファミリ）– 様々な標準の選択肢あり
• (Font) Size（フォントサイズ）
• Href
• Link color（リンクカラー）
• Link (font) weight（リンクフォントの太さ）
• Link (text) decoration（リンクテキストの修飾）

他にも、:visited、:hover、:activeの仮想クラス共通で、カラー、太さおよび修飾に関するプロパティを編集することも可能です。

リンクシンボルにも前出の見出しシンボルと同じ問題がありますが、ここではそれほどの問題にはなりません。

では、リンクシンボルに慣れ親しむために、実際にこのシンボルを使ってみましょう。

1. 新規ドキュメントを作成します。
2. 共有ライブラリを開きます。
3. HTMLフォルダを展開し、その中になる「リンク」をカンバス上にドラッグ＆ドロップします。
4. シンボルプロパティパネルを開きます。
5. 任意の数のプロパティを適宜変更します。
6. このドキュメントをsymbol.htmとして書き出します。書き出し対象は「CSSと画像」に設定します。
7. 書き出されたファイルを見つけ、主に使用するブラウザでプレビューしてみます。

書き出されたリンクがFireworksで表示されていたものとまったく同一であることが確認できます。:link、:visited、:hoverおよび:activeの各仮想クラスのカラー、修飾、太さといったプロパティも、すべて維持されていることが確認できます。

Dreamweaverで関連CSSファイルを開くと、図５に示すような、すべての関連ルールが作成されていることが確認できます。アンカー向けのCSSルールがどの順序で生成されるかは、すべてのステートに常に正しい書式が適用されるようにする上で非常に重要です。アンカーのID「#リンク」は、Fireworksのオブジェクト名に基づいて生成されています。

List Itemシンボルの使用

より的確な意味合いのマークアップをFireworksから出力できるようにすることへの支援を求められた際、筆者は、順不同リストを作成できるようにすることを最優先課題として取り上げました。だからこそ、強化版に収録されている新しいシンボルのList Itemには細心の注意が払われています。

シンボルの名前がList Itemにはなっているものの、たいていの場合、このシンボルはリンクを作成するために使用します。この解説では、矛盾しているかのような印象を与えかねないので、もう少し詳しく説明することにします。Webサイトには必ず何らかの形のナビゲーションが存在します。ナビゲーションの構成を意味論的な観点から考えた場合、これらはあくまで一連のリンクのリストに過ぎません。つまり、List Itemはリンクを作成するためにピッタリのシンボルと言えます。

List Itemシンボルには、以下の編集可能プロパティが含まれています。

• Text（テキスト）
• Color（カラー）
• Font（フォントファミリ）
• Size（フォントサイズ）
• Weight（フォントの太さ）
• Node type（ノードタイプ）– normal、first、lastまたはbothで指定
• Is link?（リンクであるかどうか）– trueまたはfalseで指定
• 標準のリンクシンボルに用意されているすべてのプロパティ

このシンボルでは「Node type」プロパティと「Is link?」プロパティが最も重要になります。「Node type」では各リスト項目がマークアップ上で何を表すのかを指定し、「Is link?」では当該シンボルによるアンカー出力の有無を指定します。アンカーを出力すれば、リンクシンボルを使用する場面同様に、適切なスタイルの適用が可能になります。

「Node type」プロパティの設定とその効果を以下に示します。

• Normal – 書き出し時に生成されるマークアップ：<li>Text</li>
• First – 書き出し時に生成されるマークアップ：<ul><li>Text</li>
• Last – 書き出し時に生成されるマークアップ：<li>Text</li></ul>
• Both – 書き出し時に生成されるマークアップ：<ul><li>Text</li></ul>

様々なList Itemシンボルを組み合わせ、そして、これらのNode typeを正しく設定することで、子リスト項目さえも含む、完全な順不同リストを書き出すことができます。

次に、具体例を用いながら解説することにします。

1. 新規ドキュメントを作成します。
2. 共有ライブラリを開きます。
3. HTML Enhancedフォルダを展開し、その中になる「List Item」をカンバスの左側にドラッグ＆ドロップします。
4. シンボルプロパティパネルを開きます。
5. Textプロパティの値を「Link 1」に変更します。
6. メニューから編集／クローンを選択し、このシンボルのクローンを作成します。
7. 複製されたシンボルを右に50px移動させます。
8. 移動したシンボルのTextプロパティの値を「Link 2」に変更します。
9. このシンボルをクローンし、以前同様に移動してから、Textプロパティの値を「Link 3」に変更します。
10. もう一度、シンボルのクローンと同様の移動操作を行います。
11. このシンボルのTextプロパティの値を「List item」に変更します。
12. このシンボルの「Node type」の値を「last」に設定します。
13. 「Is link?」の値には「false」を設定します。
14. Link 1シンボルを選択し、「Node type」の値を「first」に設定します。
15. このドキュメントをul.htmとして書き出します。書き出し対象は「CSSと画像」に設定します。
16. ul.htmをDreamweaverで開き、そのソースコードをコードビューで確認してみます（図６参照）。

CSS書き出し処理では、オブジェクトの列や行の位置が解読され、ドキュメントの構成が推測されます。なお、この際用いられるフロートクリアの仕組みが原因で、縦型の順不同リストの作成を試みると、無効なマークアップが作成されることになります（図７参照）。

縦型のナビゲーションを作成する場合は、単にこれらのフロートクリアdivを削除してから、各<li>タグ内にclearFloatクラスを割り当てます（図８参照）。また、長方形、線、テキストなどのオブジェクトを使用してFireworks上のリスト項目を視覚的に分散している場合は、縦型、横型どちらのリストに対しても、無効なマークアップが生成されます。

このような場面で期待通りの結果を得るためには、書き出し処理が完了してから「仕切り」的な要素を<li>タグ内に手作業で移動し、必要に応じてスタイルを幾分調整する必要があります。

フォーム要素のシンボルの使用

今回の強化されたバージョンでは、<form>要素が最も徹底的に見直されています。これまでもWindows用とMac用のフォーム要素は装備されていましたが、特にMac用のものは、その有用性に疑問が残るものでした。

今回の強化ではWindows、Mac両方の要素群がアップデートされており、一段と多くのプロパティが編集可能になるとともに、適切かつ有効なマークアップおよびスタイルが書き出されるようになっています。また、強化版にはHTMLのTextArea要素も収録されています。

フォーム要素に用意されている編集可能プロパティは以下の通りです。

• TextまたはLabel（テキストまたはラベル）
• Color（カラー）
• Font (Family)（フォントファミリ）– 様々な標準の選択肢あり
• (Font) Size（フォントサイズ）
• (Font) Style（フォントスタイル）
• (Font) Weight（フォントの太さ）
• Type（タイプ）– ボタンおよびテキストフィールドに対してのみ様々な選択肢あり
• State（ステート）– TextArea以外のすべての要素に対して様々な選択肢を提供

ボタンシンボルのTypeプロパティでは、Submit、Reset、Buttonのいずれかのボタンタイプの書き出し・表示を指定することができます。テキストフィールドのシンボルは、標準テキストまたはパスワード入力のいずれかを選択して書き出せます。

Stateプロパティの内容はシンボルによって異なるものの、一般的には当該要素上にポインタが配置された状態のOver、当該要素が選択された状態のSelected、および当該要素が無効化された状態のdisabledを表すことができます（無効化された要素は無効化されて書き出されます）。

フォーム要素を含むドキュメントを書き出す際には、有効かつ標準規格準拠のマークアップが得られるよう、以下の事柄に注意する必要があります。

1. HTMLフォーム要素シンボルが用いられたドキュメントの書き出し時には、すべての要素が１つの<form>要素内に配置されます。.NET環境の開発ではこの動作が一般的であり、たいていの場合、この動作が問題になることはありませんが、同じドキュメントに検索フォームとメッセージ投稿用のフォームが存在するケースなど、明らかに用途の異なる複数のフォームが１つのドキュメント内に存在するような場面では、フォームの構成を手作業で修正する必要があります。
2. <fieldset>および<legend>要素が書き出されることは一切ありません。Fireworks上では一連の<form>要素を論理的に定義することができないため、これらの要素は、書き出し後に手作業で追加し、必要であればスタイルを外すことで不可視の状態に保つことができます。
   
   この余分な手順を踏む必要性について、疑問に思われているかもしれません。これは、すべてのユーザがInternet ExplorerやFirefoxなどの標準的なデスクトップブラウザを使用しているとは限らないからです。つまり、マークアップは可能な限り意味論的に正確に、そしてアクセシブルにする必要があるということです。
3. ラジオボタンとチェックボックスのみ、それに関連する<label>要素を書き出します。デザイン上で他のフォーム要素向けに可視的な<label>が必要な場合は、このテキストオブジェクトに<lable>タグを付けるようにします。ただし、このケースでもフォームのコントロールIDの値が含まれた「for」属性を追加することで、当該ラベルを所定のフォームコントロールに関連付ける必要があります。
   
   可視的な<label>タグが不要な場合は、一旦これらのタグをデザイン上から削除し、書き出し処理が完了してからこれらをマークアップコードに追加することができます。この際、CSSを利用して不可視にし直すことを忘れないようにしてください。

フォーム要素の使用に関しては、他にも次の２つの注意点があります。

• Fireworks上のサイズ指定に関係なく、TextAreaシンボル以外のフォーム要素が高さの値を出力することは一切ありません。高さを指定するとブラウザ間で予期せぬ様々な結果が生じます。テキスト入力用などのスペースで高さを拡張したい場合は、代替策としてパディングを使用するようにします。これにより、テキストの縦方向の整列が保たれます。
• ブラウザによってはフォーム要素のデフォルトパディング値が異なるため、書き出された要素の幅がオリジナルデザインのそれとは同じにならないことがあります。

Fireworks CS4には、CSS書き出し機能を一段と拡充するための素晴らしい強化機能として、背景画像のスライスタイプが追加されています。これにより、最も単純な使用例としては、デザインの必要な部分をスライスし、これらを空のdivの背景画像として書き出すことが可能になります。しかし、この機能の真価はbackground-repeatプロパティおよびbackground-positionプロパティを利用して、divのタイル背景を作成する際に発揮されます。

「百聞は一見にしかず」と言うことわざ通り、ここではこの機能を実際に試してみることにします。

1. 500 x 500の新規ドキュメントを作成します。
2. 200 x 40の長方形を描きます。
3. 背景色を#000099に設定します。
4. 塗りの種類をグラデーション／線形に設定します。
5. 最初のグラデーションノードのカラーを#9999FFに変更します。
6. メニューから編集／挿入／長方形スライスを選択します。
7. プロパティインスペクタ上で、以下のプロパティと値を変更します。
   • 名前：bg_rect
   • 幅：1px
   • 種類：背景画像
   • 繰り返し：repeat-x
   • 水平位置：left
   • 垂直位置：top
8. 最適化パネルを使用して、スライスの書き出し形式を「GIF - すべての色を割り付け」に設定します。
9. 書き出し対象を「CSSと画像」に設定して、このドキュメントをbg_slice.htmとして書き出します。
10. 書き出されたファイルを見つけ、主に使用するブラウザでプレビューしてみます。

Fireworks上とまったく同じデザインが表示されるはずです。この表示は、1pxの背景スライスからのみ構成されています。

では、このテクニックの実践的な使用例を考えてみましょう。ナビゲーションバーやブロックレベルの見出しといった、他のコンテンツを含むdivの背景をこのテクニックで作成することができます。以下にその手順を示します。

1. 長方形の外周に1pxの黒色のボーダーを追加します。
2. 書式設定を白色、太字、Arial 20pxに設定した任意のテキストを追加し、これを背景画像と水平方向の中央揃えにします。
3. 再度書き出しを行い、ブラウザでプレビューしてみます。
4. このサンプルの結果を確認するために、ブラウザのテキストサイズを最低でも２段階上げてみます（図９参照）。Firefoxを使用している場合はメニューから表示／ズーム／拡大を、IEを使用している場合はメニューから表示／文字のサイズ／最大をそれぞれ選択します。

この単純な演習では、CSS書き出し機能の実力と、アクセシブルかつ標準規格準拠のページ制作を支援するというこの機能の目標が示されています。ここではすべてのフォントサイズがパーセント比率で指定されているので、すべてのブラウザで文字を体裁良く縮小・拡大することができます。この点はアクセシビリティを高める上で、すべてのサイトにおいて重要なことです。

また、背景画像の端点では背景がボックスの残りの部分の色に溶け込むように表示されることが確認できます。これは、手順３で長方形にべた塗りの背景色を設定していたためです。たとえオブジェクトにグラデーションの塗りが設定されていても、元のべた塗りのカラー情報をそのまま記憶されています。強化版のCSS書き出し機能では、この特長が生かされています。

試しに、Fireworksの作業画面に戻り、長方形の塗りをピンクのべた塗りに変更し、黒から黄色の線状グラデーションを適用してから再度書き出しを行ってみてください。図10のような結果が得られるはずです。また、ここで紹介した背景画像のスライスタイプは、水平方向のグラデーションにおいても、y軸方向に繰り返されること以外まったく同じように機能します。

３スライステクニックの使用

一般的なWebデザインの概念の１つとして、固定上部、あらゆるコンテンツ量に対応可能な中央部、固定下部の３つのパーツで、パネル表示を構成する考えがあります（図11参照）。CSS書き出し機能は、背景画像スライスタイプを使用してこのような要件に応えることができます。Fireworksでは、このような処理の方法を「３スライステクニック」と呼びます。

長方形、角丸長方形のオートシェイプ、またはパスの上に３つの背景スライスが配置されている場合（上部に１つ、中央の繰り返し部分に１つ、下部に１つ）、CSS書き出し機能はこれらの意図を自動的に検知し、３スライステクニックを使用して必要なマークアップを生成します。例えば、図12に示すようなスライスの配置を検討するようにしてください。なお、最上部のスライス領域に見出しを含めておくことも可能です。

画像に見出しのテキストを追加する場合は、当該テキストが見えないようにして、別途、上部のスライスを再度書き出す必要があります。またこの際、テキスト表示サイズの拡大にも対応できるようにするために、当該スライスの高さを広げる必要もあります。

この記事で紹介したテクニックを利用することで、次に示すサンプルプロジェクトのようなプロフェッショナルかつ標準規格準拠の結果が得られます。ここで示すサンプルは、Smolderと呼ばれる汎用的なブログ投稿用のテンプレートデザインです。アップデート版のCSS書き出しスクリプト、HTMLコンポーネント、およびサンプルファイルが含まれた以下のアーカイブをダウンロードしてください。

• css_export_script_smolder.zip (ZIP, 1.6 MB)

次に、Fireworks CS4でsmolder.fw.pngファイルを開きます（図14参照）。

このデザインの計画段階で考慮した事柄と、さらに完璧な結果を得るために書き出し後にDreamweaver上で行える作業を以下に紹介します。

• このデザインには15個のスライスが用いられています。一部は前面画像ですが、大半は背景画像になっています。３スライステクニックも数か所で用いられています。
• ドキュメント内のレイヤーおよびオブジェクトにはそれぞれ名前が付けられているとともに、整頓整理されています。これによりファイルの取り扱いが簡単になるだけでなく、書き出し後の要素に分かりやすい名前が与えられるようになります。
• ナビゲーションは、背景スライスの長方形、リンクの順不同リストを形成する３つのList Itemシンボル、およびテキストフィールド、ボタンの各HTMLシンボルから構成されています。
• Contentレイヤーは「Content Col」と「Sub Col」の２列に分かれています。
• 「Content Col」および「Sub Col」には、出力時に要素が論理的にグループ分けされるよう、それぞれの範囲を網羅する透明塗りの長方形が含まれています。
• ブログのコンテンツは、見出しと段落のタグ付けが行われたテキストオブジェクトで構成されています。
• ブログ本文のフッターは、背景画像としてスライスされた１つの長方形と４つのHTMLリンクコンポーネント、前面画像としてスライスされた２つのシンボルから構成されています。
• コメント欄は、背景画像としてスライスされた別の長方形と、いくつかのタグ付けされた見出し、前面画像のスライス、１つのHTMLリンクシンボル、および複数のテキストオブジェクトから構成されています。
• コメントフォームは、前面画像スライスと１つのタグ付けされた見出し、ラベルのタグ付けが行われた複数のテキストオブジェクト、およびテキストフィールド、テキストエリア、ボタンのHTMLシンボル群から構成されています。
• Sub列は、タグ付けされた見出しを含む２つの３スライス角丸長方形、HTMLリンクシンボルおよび高さ1pxの長方形の仕切りから構成されています。

いくつかのオブジェクト（特にリンクシンボル）は正確に整列されておらず、これらの位置は高すぎるように感じられるかもしれません。これは、書き出し処理時に要素のデフォルトのline-heightが考慮されないためです（これらのmargin-topが大きすぎる）。この問題を回避するには、（筆者が行ったように）書き出しを指示する前に当該要素をピクセル単位でわずかに移動するか、書き出し後に所定のCSSスタイルを手作業で編集・調整するようにします。

このファイルをCSSと画像として書き出すと、ほぼ完璧な状態の複製を生成できることが確認できます（図15参照）。これはFireworksにとって素晴らしい成果であることが、皆さんにもお分かりいただけると思います。しかも、見栄えがオリジナルとほぼ同じになるだけではなく、書き出されたXHTMLとCSSは、W3Cの検証ツールを使用しても完全に有効なものとして認識されます。

Fireworksがどの程度、セマンティックを考慮したマークアップを生成したかについては、（手作業またはブラウザ上で一時的に）スタイルシートを外すことで確認できます。ここでは、セマンティックがほぼ完璧に考慮され、体裁良く整理され、しかも様々なブラウザデバイスでの使用およびスタイル適用に適した、体裁の良いマークアップが確認できるはずです（図16参照）。

デザインの改善ポイント

ドキュメントの書き出しまでたどり着いたので、次に、Dreamweaver上の手作業で何が改善できるかについて考えることにします。ドキュメントの上から下に進む形で、筆者のアイデアを紹介していきます。

• 見出しのロゴ部分をロゴと背景画面に分離し、ロゴを見出しタグに置き換えてて再度書き出しを行う。
• アンカーのスタイルをより汎用的なものに置き替えたり、既存ページのスタイルに調和するようにするなどして、ナビゲーション部分を変更する。
• 検索機能の要素群をfieldset内に配置し、これを右にフロートさせ、テキストボックスとボタンをそれぞれ左にフロートさせる。右にそれぞれフロートされた２つの要素を並べて配置すると、これらの要素の順序はマークアップ上の順序とは逆になります。
• 検索テキストボックス用のラベルを作成し、通常のスクリーンユーザには表示しないようにする。
• 「Content Col」divと「Sub Col」divのheightおよびmin-heightを削除して、あらゆるサイズのコンテンツに対応できるようにする。
• タグ付けされたコンテンツ見出しのフロートとそれらに続くclearFloatを削除する。
• ブログ本文のフッターのリンクを順不同リストに変更し、フッター上のアイコンをアンカーの背景画像にする。
• 複数のコメントにも対応できるよう、投稿コメント欄にはIDではなくクラスが用いられるように変更する。
• コメントフォームをfieldsetで囲み、各ラベルにそれぞれが対応するフォームコントロールの適切な属性を指定する。
• Subのパネルをクラス群に変換して、必要なスタイルが１つだけになるようにする。また、一連のリンクを順不同リストに置き換える。
• 大半のfont-familyおよびカラーの指定を削除してCSSルールを合理化する。代わりに、これらの指定をbodyで行う。

Fireworksが既に何時間もの労力に相当する手間を省いてくれたことを考えると、これらの改善点にかかわる作業は、さほど大したものではありません。

次のステップ

CSS書き出し機能には、未完全な部分があります。したがって、現状では、すべてのWebデザイナーが利用できるワンクリックのWebデザイン・開発ソリューションというわけではありません。しかし、この機能には紛れもなく多くの労力が費やされてきており、デザインからHTMLへの初期段階において、プロフェッショナルデザイナーの効率アップを実現できるということは言うまでもありません。この分野において、Fireworksに匹敵する製品はありません。

プロのWebデザイナー・ユーザインターフェイスデザイナーである筆者の意見としては、以下に示すものが、現在のCSS書き出し機能に求められる主な改良点です。

• すべての要素がフロートされているので、フロートをクリアする仕組みを多用しなければならない。現時点では、CSS書き出し機能はdivのクリアを使用するようになっています。このテクニックは有効ではあるものの、意味論的には適切ではありません。
• 現時点では、ブロックレベルのアンカーを作成する方法が用意されていない。
• div以外に背景を設定することが一切できない。
• 順不同リストに仕切りとなる要素を含めることができない。また、縦型の順不同リストを作成する際に、有効なマークアップが生成されない。
• 現時点では、要素を画像に置き換えることができない。

ここでは「現時点では」という表現がポイントです。CSS書き出し機能は容易にカスタマイズできます。この機能に興味をお持ちの方は、是非、一層の改善にご協力ください。また、コミュニティに対して、新たなアップデートを公開することにも挑戦してみてください。改良点の提案等に関しては、筆者まで気軽に直接ご連絡ください。また、FireworksサポートフォーラムやFireworks Guru Forumサイトに意見を投稿することも可能です。皆さんからの意見には、Fireworksチーム、John Wylieまたは筆者が対応する予定です。是非ご協力ください。

Web標準について詳しくは、World Wide Web Consortium (W3C)およびWeb Standards Projectを参照してください。