アクセシビリティ
デベロッパーリソース
Matt Stow

Matt Stow

www.mattstow.com*

目次

作成日:
2008年10月17日
ユーザレベル:
中級, 上級
製品:
Fireworks

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

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(最低値)で指定することが可能に
  • 1つのテキストオブジェクトから、改行を用いて単一の段落要素を作成するのではなく、適切なケースでは複数の段落要素を作成することが可能に
  • 順不同リスト作成用のList Itemシンボルが含まれた、改良版の柔軟なHTMLコンポーネントシンボルライブラリを装備
  • すべてのボーダーの配置およびサイズを指定したDivを、厳密なサイズで、より正確な位置に配置することが可能に

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

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

必要条件

この記事を効率良くフォローするには、次のソフトウェアやファイルが必要です。

Fireworks CS4

Dreamweaver CS4(または任意のHTMLエディタ)

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

この記事に必要な予備知識

新しいCSS書き出し機能に適したデザイン、およびこの機能の使用法に関する基本的な解説については、John Wylie氏執筆の別途記事「Fireworks CS4でのCSSと画像の書き出し*」を参照してください。

Creative Commons License
この記事は、Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported Licenseのもと提供しています。

著者について

Matt Stowは標準規格準拠のアクセシブルなWebサイトのデザイン・開発を専門に手がけるWeb・ユーザインターフェイスデザイナーです。コンセプトの段階から作品の完成に至るまで、FireworksとDreamweaverは彼の最も重要な相棒として活躍しています。MattはFireworksエバンジェリストであり、Fireworksの能力を紹介するために様々な活動を行っています。