既存サイトの段階的な CSS への移行

以前私が執筆した DevNet 記事、「なぜ CSS を使用した方が良いのですか？」では、Web デザインや Web 開発の現場における CSS の利用メリットを紹介しました。この記事が Macromedia Web サイトに公開されて以来、皆さんからは「では、具体的にどのようにして従来の HTML マークアップから CSS へ移行すれば良いのか？」というお問い合わせメールを多数お寄せいただきました。ここは、あせらず、ゆっくりと物事を進めることにしましょう。

まず最初に言えるのは、<table> タグや <font> タグを一掃して、完璧な CSS ページに取り替えるような便利なトリックはないということです。ただし、ここも、あそこも、という要領で少しずつ移行していけば、すぐに CSS ベースのページやサイトを実現することができます。

言い替えるならば、CSS への移行は必ずしも唐突に全面移行しなければならないということではないのです。先述のデベロッパーセンター記事において紹介した CSS のメリットは、CSS を段階的に導入しながらでも明らかになっていきます。

では、CSS 導入の第一ステップとして、(「これからは <font> タグを使用しない」と自分に言い聞かせながら...) まず従来のデザイン手法の問題点を把握することにしましょう。HTML には習得が容易であるという利点がありますが、ページをデザインするという観点からはさまざまな制約を持った言語といえます。これは、本来 HTML がコンテンツをマークアップする (印を付ける、区分する) ために開発された言語であることに起因しています。したがって、QuarkXPress や Adobe InDesign といったページレイアウトアプリケーションのように、複雑なデザインやレイアウトを作成するために開発されたものではありませんでした。しかし、デザイナーの多くは本来内容を明示する (マークアップする) ために用意されているタグでも、これらを駆使すればデザインツールとしても利用できることにすぐ気付きました。ただし、このことによって、マークアップされたコンテンツの見栄えやプレゼンテーションを容易に変更するといった、マークアップ言語本来の趣旨からは遠ざかっていくことになりました。

皆さんの中でも、これまでに <font> タグが幾度となく記述されているページや、テーブルが幾重にもネスト化されているサイトをクライアントから受け取った経験が有る方も居られるはずです。このようなページ構成は、たとえ HTMLのコードが理解できる方でもすぐに理解できるものではありません。ページの見栄えを調整するために使用されているプレゼンテーション用マークアップは、ほとんどの場合、サイトの管理や更新の邪魔になってしまうだけです。仮に一ページに 1500 個もの font タグがあるようなページを更新することを想像してみてください。(これは大げさな話ではなく、実際にマイアミで開催された、とあるセミナー参加者のクリスさんが遭遇した話です。彼はもともとサイトを少しだけ修正して欲しいという依頼を受けたそうです。)

一言で言うと、HTML ドキュメント内に散在するプレゼンテーション用マークアップに取って代わることこそが、CSS の主な役割りです。では、プレゼンテーション用のマークアップとは具体的に何を指すのでしょうか？これは、ブラウザがコンテンツをどのように表示するかを指示しているすべてのタグや属性と考えれば良いでしょう。

どのタグや属性を CSS に置き替えるかを判断する際にひとつだけ注意しなければならないのは、タグやその属性によっては CSS をサポートしていない旧式のブラウザにおいて、許容範囲以上にページ体裁が崩れてしまうことです。この許容範囲は、サイトにおいてサポートするブラウザをどのレベルに設定するかによって変わるので、ケースバイケースで判断するようにしてください。この デベロッパーセンター 記事では、ページ内に含まれているスタイル関連の情報だけを CSS に置き替えることにし、テーブルを使用したページ構成はそのままにしておくことにします。したがって、ページレイアウトには旧式のブラウザでも正しく表示することが可能なテーブル構成を使用し、コンテンツのスタイルを柔軟に制御するために CSS を使用します。テーブル構成そのものを CSS ベースに切り替える作業については、後日その方法を習得するようにしてください。

実際の作業に入る前には、必ず元のページをバックアップしてから作業を開始するようにしてください。

この記事に必要なもの

このチュートリアルは、こちらのソフトウェアのインストールが必要です。

Macromedia Dreamweaver MX 2004

• トライ
• 購入

ページ 1 / 4

次のページ

著者について