XHTML+CSSで書く ホームページ構造デザインガイド

※以下の文章は、本書の初版発行時（2004年）に掲載されていたものです。

　ブログの流行やアクセシビリティの普及にともなって、CSSを使いたいという人は急激に増えてきました。しかし、実際にCSSに取り組んでみると、「何かピンとこない」「HTMLとの関連がイマイチわからない」と感じる人も多いと聞きます。おそらく、そうなってしまう原因は、CSSを適用する対象であるHTMLの適切なタグの付け方を覚える前に、CSSだけをマスターしようとしていることにあるのではないでしょうか。

　CSSを使いこなすためには、HTML側で構造的にタグが付けられている必要があります。「構造的」と表現すると難しく感じるかもしれませんが、要はその部分がページの構成要素として何であるかをタグで囲って示せばいいだけです。しかも、構造を示すために使われるタグの種類は、それほど多くありません。頻繁に使うもので考えれば、10種類も覚えなくていいのです。本当はごく簡単なことなのですが、それに気づいて理解することがひとつのハードルとなっている場合が多いようです。

　本書は、これからCSSを覚えようと考えている人が、XHTML+CSSスタイルの制作の全体像をイメージできるようになり、最初の大きなハードルを超えて第一歩を踏み出せるようにすることを意図して作成されました。内容的には、基本的なことを中心に抜粋して制作プロセスの流れや考え方を中心に説明しています。そのため、この１冊だけでバリバリとページが作れるようになるといったタイプの本ではなく、この本を読めば後はリファレンス系の本などを使ってバリバリとページが作れるようになる、といった内容になっています。

　実際にXHTML+CSSスタイルで制作をはじめると、２つめの大きなハードルが待っています。それは、各種ブラウザのバグ対策です。現状でCSSを使うためには、これはどうしても避けて通れないことですので、本書でも現時点で最新のバグ対策方法を掲載することにしました。これを含めることで、XHTML+CSSスタイルの本当の意味での全体像が掴めるようになっているのではないかと思います。

　本書が、XHTML+CSSスタイルの第一歩を踏み出すための一助となれば幸いです。

2004年８月　大藤 幹

　XHTMLとCSSで作られているページは、2000年には既に存在していました。しかし、当時は「CSSに最も対応しているブラウザはMac版のIE5.0だ」と言われるほど、CSSにちゃんと対応したブラウザは少なかったのです。そして、当時の大多数の人は、Netscape 4.xのような古いブラウザでも新しいブラウザとまったく同じように表示させることがベストだと考えていました。そのため、CSSを実際に導入するのは一部の個人サイトくらいで、大規模でユーザー数の多いサイトでの導入などは考えられないことだったのです。

　しかし、2002年の10月にビックリするようなことが起きました。アメリカの大手ニュースサイトであるWired News（http://www.wired.com/）が、サイト全体をXHTML+CSSに変更してリニューアルしたのです。それは、その時期すでに大規模なサイトでもXHTML+CSSの導入が不可能ではなくなっていたことを示し、同時にそこからもたらされるメリットを現実のものとして実感させてくれました。各ページの容量が何割も軽くなって表示速度が上がり更新作業も効率化できたということは、Wired Newsのような大規模で膨大なトラフィックのあるサイトでは、非常に大きな経済的メリットとなるのです。また、表示の指定をHTMLの各ページから切り離してCSSで一元管理できるようになったため、サイト全体の基調色を頻繁に変更することも可能になりました。

　このリニューアルは業界に大きな影響を与え、特に2003年以降XHTML+CSSでリニューアルする事例が多く見られるようになりました。ここでは、その中からいくつかのサイトを紹介しておきましょう。かつては、CSSではまともなデザインができないと言われてきましたが、現在では美しいデザインのサイトがたくさん作られています。

▲Wired Newsのリニューアルを手がけたDouglas Bowman氏のサイト「Stopdesign」

▲Douglas Bowman氏制作のサイト「adaptive path」

▲ゴルフの全英オープンのサイト「The Open Championship」

　では、それまで無理だと考えられていた大規模サイトでのXHTML+CSS導入を、Wired Newsはどうやって実現したのでしょうか？　そのポイントを２つあげるとすれば、それは「バグも多くCSSに部分的にしか対応していない古いブラウザにはCSSを適用しないという決断」と「大胆な裏ワザの導入」です。

　古いブラウザにはCSSを適用しないということは、Netscape 4.xなどの古いブラウザで見た時には特にレイアウトをしていない状態で表示されることになります。当時、特に企業をはじめとする大規模なサイトの運営者の多くは、一部のブラウザでだけ見栄えが悪くなることは避けたいというこだわりを持っていました。その時期には、ユーザービリティという言葉は少しずつ聞かれるようになっていたものの、アクセシビリティやＳＥＯ（検索エンジン最適化）などという言葉はまだ浸透していない状況で、ホームページは見た目だけが重視される傾向があったのです。つまり、当時は現在のようなユーザー中心の考え方がされることはなく、提供する側の見てほしいと考えるものを一方的に押し付けているような状態だったと言えるかもしれません。ユーザーは、文字が小さくて読みにくくても文字サイズを変更することは許されず、ナローバンドの環境でも常に重たいデータを読み込まされていたのです。しかし、Wired Newsの判断は違っていました。それは、そこまで見た目だけにこだわることが、ユーザーと提供する側の双方にとって総合的に見るとプラスなのかマイナスなのか、ということが十分に検討し理解されていたことにほかならないでしょう。

▲Wired NewsをNetscape4.78で表示したところ

　実は、「古いブラウザにはCSSを適用しない」ということを実現するには、ブラウザのバグや未対応の部分を利用した裏ワザを使う必要があります。そのような裏ワザを大胆に使ったことも、CSSの導入を可能にした一つの要因だと言えるでしょう。CSSのソースを覗いて見ると、それまで使われているのを見たこともなかった音声環境向けのCSSプロパティであるvoice-familyが随所で使われていて驚いた人もいたのではないでしょうか？　今でこそ知られるようになった裏ワザである通称「ボックス・モデル・ハック」さえ、当時は知っている人はほとんどいないような状況だったのです。

body {
  ・・・
  voice-family: "¥"}¥"";
  voice-family:inherit;
  ・・・
  }
  html>body { ・・・ }

　このような数々の裏ワザは、先行してCSSを導入してきた人達によって調査・研究され、広く公開されています。たとえ、バージョン５以降の比較的新しいブラウザだけにCSSを適用するとしても、常に意図した通りに表示してくれるとは限りません。特定のブラウザでだけうまく表示されなかったり、状況によっては表示が乱れて内容が読めなくなってしまうことさえあります。そのような時に、裏ワザを使って問題を回避するというわけです。ただし、裏ワザは使わずに済むのであれば、使わないにこしたことはありません。裏ワザも日々研究されてどんどん進化し、また新しいものが発見されれば次々と入れ替わっていきます。前述のvoice-familyを使った「ボックス・モデル・ハック」も、一時期と比べると使われなくなってきているようです。

　次に示す図は、従来の方法で作成したホームページとXHTML+CSSで作成したホームページのファイルの内容の違いを示したものです。典型的な従来のホームページは、基本的にはHTMLだけで１ページずつ完結しており、内容としてはテキストなどのコンテンツとその表示方法を指定するタグで占められていました。一方、XHTML+CSSのホームページでは、表示の指定はHTMLには書き入れず、基本的にはすべて別に用意するCSSファイルに書き込みます。そして、XHTMLには表示を指定するタグではなく「構造を示すタグ」を書き入れることになります。このように、従来の方法とXHTML+CSSスタイルとでは、HTML部分が根本的に違うものになります。その点をしっかりと理解し頭を切り替えることが、XHTML+CSS導入の第一歩だと言えるでしょう。

　しかし、だからと言って難しく考える必要はありません。なぜなら、特にHTML部分に関しては、間違いなく従来の方法よりも作業が簡単になるからです。従来の方法では、本来の目的を超えて無理に難しく面倒な使い方をしていたのだとも言えます。詳しいタグの付け方については第2章で説明しますが、表示のことを考えずにあらかじめ用意されている種類のタグを当てはめて行くだけの簡単作業をすればよいだけなのです。構造を示すためのタグの種類はそれほど多くなく、おぼえるのも簡単です。

▲XHTML+CSSでは、「表示の指定」はHTMLではなくCSSの役割になり、新しく「構造の指定」も加えなければならない。結果として、「テキストや画像などのコンテンツ」部分を除けば、HTML部分はまるで違うものになる

　HTMLから取り去った「表示の指定」は、XHTML+CSSスタイルでは独立したCSSファイルとして用意しておくのが普通です。そうすることによって、必要に応じて各XHTMLファイルから読み込んで共有できるからです。たとえば、見出しのサイズや色の指定を共有させておけば、CSSを書き換えるだけでそれを共有しているすべてのページの見出しを一気に変更できるようになります。100ページで共有していれば、CSSを１箇所変えるだけで100ページすべての表示を変えることができることになります。従来の方法で作られたホームページなら、100ページの表示を変えるためには100ページを修正するしか手はありません。

　また、従来のホームページのようにページごとに重複した表示の指定が組み込まれているということは、容量を無駄に使っていることにもなります。なぜなら、ページを開くごとに同じような表示指定を新しいデータとして読み込まなければならないからです。それが、CSSとして共有させておけば、１度読んだCSSはキャッシュされるので新しく読み込む必要がなくなります。

▲XHTML+CSSでは、従来の作り方ではページごとに埋め込まれていた「表示の指定」が一元化される。これによって各ページが軽くなるばかりでなく、デザインの変更・修正も一気にまとめて行えるようになる

　この章では、構造を示すタグの付け方を説明します。まず最初に、従来の制作プロセスとの根本的な違いを確認しておきましょう。

　従来のホームページの多くは、なんらかのツールを使ってワープロと同じような操作・手順で作られていたのではないかと思います。それは、テキストを入力しながら表示方法を設定するツールバーなどを使って同時にレイアウトも行うといったやり方です。そのような方法なら、多くの人が慣れ親しんでいますのでホームページが簡単に作成できるというわけです。

　では、その裏側でツールはどのようなタグをつけているのでしょうか？　多くの人は、できればそんなことは気にせずにホームページが作れた方がいいと思っているのかもしれません。従来のように表示方法を指定するためにタグを使っているのであれば、まさにその通りでしょう。しかも、タグのことはあまり気にしなくても、一般的なユーザーが使っているブラウザでならほぼ同じ状態で再現できます。自分の意図した通りに表示させることが目的で、それが実現できているのですから作る側としては何も問題はありません。目的がそこにあるのならば、タグがどうなっているのかなんて気にしなくてもいいのです。

　しかし、結果としてできあがったページがどうなるのかと言えば、それはここまでで説明してきた通りです。重く、遅く、ワープロ文書と同様の固定的なページになります。しかも、トータルで見ると本当に簡単に作成できているのかも疑問に思えてきます。表示だけを考えて１ページ１ページ同じようなレイアウト作業を繰り返していくのと、CSSで一括してレイアウトを作ってしまうのとでは、どちらが効率的なのでしょうか？　急な仕様変更に素早く対応できるのは、どちらでしょうか？　そう考えると、これまで慣れ親しんできたワープロ的な取っ付きやすさの前に本質が隠されて、実はずいぶんと面倒な作業を繰り返して、固定的で融通の効かない重いデータを作り続けていたような気がしてこないでしょうか。