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

　では、それまで無理だと考えられていた大規模サイトでの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で一括してレイアウトを作ってしまうのとでは、どちらが効率的なのでしょうか？　急な仕様変更に素早く対応できるのは、どちらでしょうか？　そう考えると、これまで慣れ親しんできたワープロ的な取っ付きやすさの前に本質が隠されて、実はずいぶんと面倒な作業を繰り返して、固定的で融通の効かない重いデータを作り続けていたような気がしてこないでしょうか。

　タグは本来ツールが自動的にをつけてくれるべきもので、人間がいちいちタグをつけるのは無駄な作業だと思っている人もいるかもしれません。従来の制作方法のように、タグで表示方法を指定するのであれば、まさにその通りだと言えます。しかし、それでは構造的なタグをつけることはできません。なぜなら、タグをつける目的が違うからです。

　構造を示すタグをつける目的は、ブラウザにその部分が何であるかを伝えることにあります。ページの構成要素として、その部分が見出しであるとか、本文の段落であるとかをタグで明確に伝え、その環境に合った表現方法で表示したり読み上げたりできるようにするためです。ページの構成要素として、そこが見出しなのか単なる強調なのかというような内容の判断はプログラムでは難しいため、人間がタグという印をつけて示すのです。したがって、プログラムで判断できない部分を人間がタグで指示しているのですから、それを自動的に行うということにはそもそも無理があることになります。人間が内容から判断して適切にタグをつけてこそ意味があるのです。

　では、構造を示すタグ付けとはどのようなものなのかを理解するために、実際に試してみましょう。ここでは従来のHTMLとの互換性がある最新の規格であり、既存の各種ブラウザでも問題なく利用できるXHTML1.0のルールに従ってタグをつけてみます。この段階ではXHTML文書の全体を作成するのではなく、元となるテキスト原稿に対して構造を示すタグを付けるだけですので何も難しいことはありません。では、次の短いテキスト原稿にタグをつけてみることにしましょう。

日本の楽器

皆さんは、日本の楽器と言えば何を思い浮かべますか。一般的には、琴や三味線、尺八、太鼓などを連想する人が多いと思います。しかし、実際にはそれ以外にもたくさんの種類の楽器があるのです。

　まず最初の作業は、タグを付ける原稿がどのような構成要素からできているかを確認することです。たとえば、この「例題テキスト１」であれば、大きく２つの構成要素からできていることがわかると思います。「日本の楽器」という見出しと、それに続く１つの段落です。結果的には、この２つの構成要素をそれぞれ構造を示す適切なタグで囲えば作業は終了するのですが、ここでは文法的な面からタグを絞り込んで付けてみましょう。

　詳しくは後から解説しますが、実際にブラウザに表示される内容は、XHTML文書の<body>〜</body>の範囲内に入れることになっています。しかし、<body>〜</body>の範囲内に直接入れることができるのは、ブロックレベル要素と呼ばれる一つのまとまった範囲を示す種類の要素だけです。したがって、<body>〜</body>の範囲内に原稿のテキストをそのまま直接入れることはできませんし、文章の一部分を示すためのインライン要素も直接は配置できません。<body>〜</body>の範囲のすべての内容は、ブロックレベル要素の中になければならないのです。では、ブロックレベル要素とは具体的にはどのような要素なのでしょうか。それをまとめたのが次の表です。

▲ブロックレベル要素は全部で13種類

【注】要素：XHTML文書の構成要素のことで種類はあらかじめ決められている。要素は、基本的には開始タグと終了タグで <要素名>〜<!--要素名--> のように囲って示すが、画像を示すimg要素のように要素内容が無く終了タグをつけないものもある。

【注】ブロックレベル要素：要素の中でも一つのまとまった範囲（単位）を示すもの。一般的なブラウザでは、前後が改行された状態で表示される。

【注】インライン要素：主にブロックレベル要素の中で文章の一部として使われる要素。そのため、前後に改行は入れられない。

　ブロックレベル要素は、なんと全部で13種類しかありません。構造的なタグ付けの第一の作業は、まず文書の構成要素が13種類のブロックレベル要素のうちのどれに該当するのかを判定し、そのブロックレベル要素のタグをつけて囲うことです。タグの付け方は、種類によって多少記述方法に違いはありますが、基本的には <要素名> 〜 </要素名> の形式のタグで囲えばＯＫです。こうしてまず、すべての構成要素がブロックレベル要素の中に入っている状態にします。「例題テキスト１」では、「日本の楽器」という部分が大見出しでh1要素、段落はp要素に該当すると考えられますので、タグをつけると以下のようになります。タグとテキストの間には、改行を入れてもブラウザでの表示には影響しないことになっていますので、ソースコードが見やすいように改行を入れることもできます(実際には表示に微妙な違いが出る場合もあります)。

<h1>日本の楽器<h1>

<p>
皆さんは、日本の楽器と言えば何を思い浮かべますか。一般的には、琴や三味線、尺八、太鼓などを連想する人が多いと思います。しかし、実際にはそれ以外にもたくさんの種類の楽器があるのです。
</p>

　現実的には、ここからインライン要素などのタグもつけていくことになります。たとえば、リンクさせたい部分はインライン要素であるa要素としてタグ付けします。また、ワープロで太字にしたり赤くしたりしたいと思う部分は構造的には「強調」であると考えて、em要素やstrong要素としてタグ付けします。しかし、この例では特にインライン要素でタグ付けが必要な部分はないようですので、構造を示すタグをつける作業はこれで完了となります。

　では、ここまででタグをつけてきた例題が、ちゃんと機能するのかどうか試してみましょう。まず、次のようなXHTML文書の簡単なテンプレートを用意してみました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>サンプル</title>
</head>
<body>


</body>
</html>

　このテンプレートの〜の範囲内に「例題テキスト２」と「例題テキスト３」でタグを付けたものをそのまま入れます。そして、「例題テキスト２」は「a.html」、「例題テキスト３」は「b.html」という名前で保存します。結果的には、次のような２つのXHTML文書ができあがりました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>サンプル</title>
</head>
<body>
<h1>日本の楽器</h1>
<p>
皆さんは、日本の楽器と言えば何を思い浮かべますか。一般的には、琴や三味線、尺八、太鼓などを連想する人が多いと思います。しかし、実際にはそれ以外にもたくさんの種類の楽器があるのです。
</p>
<h2>北海道に伝わる楽器</h2>
<p>
沖縄の楽器と言えば三線が有名です。では、北海道を代表する楽器と言えば何でしょうか。この章では北海道に古くから伝わる<em>口琴</em>と呼ばれる種類の楽器について説明します。
</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>サンプル</title>
</head>
<body>
<h1>日本の楽器</h1>
<p>
皆さんは、日本の楽器と言えば何を思い浮かべますか。一般的には、次のような楽器を連想する人が多いと思います。
</p>
<ul>
<li>琴</li>
<li>三味線</li>
<li>尺八</li>
<li>太鼓</li>
</ul>
</body>
</html>

　まずは、これで本当に正しいXHTML文書になっているのか、XHTML1.0の規格を作った本家W3Cの検証サービスを利用して文法チェックをしてみましょう。英語のページですが、URLを入力するか「参照」ボタンを押してハーディスクにあるファイルを選択し、「Check」ボタンを押すだけで簡単に確認できます。

▲W3CのHTML検証サービス（http://validator.w3.org/）

　結果は、「a.html」「b.html」とも正しいXHTML1.0で、W3CのXHTML1.0認定アイコンを貼っても良いと出ました。こんな単純なソースコードなので、よほどうっかりしなければ間違えようもないのですが、逆に言えばHTMLで表示方法を指定せずに構造だけを示していれば、文法エラーはないのが当たり前なのです。

▲a.htmlのチェック結果

▲b.htmlのチェック結果

　では、ここで色々なブラウザを使って実際に見てみることにしましょう。まずは、一般的なブラウザの代表IE6.0です。この段階では、まだ表示方法は指定していないのでブラウザまかせの表示になっていますが、内容は問題なく伝わるようにはなっていることがわかります。

▲a.htmlをIE6.0で表示したところ

▲b.htmlをIE6.0で表示したところ

　次はテキストブラウザのLynxで見てみましょう。このサンプルは、IE6.0よりもテキストブラウザの方が見やすいような印象もあります。Lynxではh1要素はセンタリングで、h2要素は本文よりも左にずらして表示させることによって示しています。強調をあらわすem要素は、色を青くすることで示しています。箇条書きも、各項目の前に付く記号は少し違っていますが、箇条書きらしく適切に表現されています。Lynxでは文字の大きさを変えたり太字にすることはできませんが、このブラウザのできる範囲でうまく表現されていることがわかりました。

▲a.htmlをLynx2.8.5で表示したところ

▲b.htmlをLynx2.8.5で表示したところ

　次は音声ブラウザであるIBMのホームページ・リーダーでどのように読み上げるのかを確認してみましょう。見出しの読み上げ方は設定画面で調整できるのですが、見出しはここで設定した通りに「ピッ」という音とともに男性の声で少しゆっくりめに読み上げられました。

　また、ホームページ・リーダーには「見出し読みモード」というモードがあります。ホームページの内容をはじめから順に全部読んでいては時間がかかるので、見出しだけを抜き出して読み上げさせ、読みたい部分を素早く探すための機能です。この機能も試したところ、h1要素とh2要素としてタグ付けしたところが抜き出されて問題なく読み上げられました。どうやら音声ブラウザにも対応した、アクセシビリティ上も問題のないページに仕上がっているようです。

▲ホームページ・リーダー3.02の「見出し」の読み上げ方を設定する画面。声の種類や読み上げ速度が調整できるほか、特定の音を鳴らして見出しであることを知らせることもできる

▲ホームページ・リーダー3.02で「見出し読みモード」にしたところ

　実際にホームページを作る場合、ページのおおまかな構成としてヘッダやフッタを用意し、ページの本体部分は２段組や３段組にするケースが多いと思います。しかし、段組みをするための専用プロパティは、CSS3の仕様書の草案には含まれていますが、現在広く使われているブラウザで実装されているCSS2にはありません。そのため、CSS2にあるプロパティを利用して段組みのように表示させる方法が考え出されました。

　CSS2で段組みを実現するには、大きく分けて２通りの方法があります。１つは回り込みの機能を利用する方法で、もう１つは絶対配置を利用する方法です。しかし、それらの機能はもともと段組み専用のものではないため、色々と不都合が出てくる場合があります。特に、大きさの決まっていない要素を絶対配置にすると、状況によっては内容の一部が他の要素の上に重なって表示される場合があるため注意が必要です。そのようなわけで、ここでは一般に広く利用されている回り込みの機能を使った段組みの実現方法を紹介します。

　では、段組みの説明に入る前に、回り込みに使用するプロパティの普通の使い方をおぼえておきましょう。回り込みにはfloatプロパティを使います。floatプロパティの値には、left、right、none のいずれかが指定できます。値としてleftを指定すると指定された要素は左に寄せて配置され、続く内容はその右側に回り込みます。同様に、値としてrightを指定すると指定された要素は右に寄せて配置され、続く内容はその左側に回り込みます。noneを指定すると回り込みをしない通常の表示になります。

　では、実際に回り込みをさせてみましょう。まずは、簡単な例として画像にテキストを回り込ませてみます。用意したXHTMLとCSSのソースコード（抜粋）は次の通りです。画像を表示させるimg要素はインライン要素ですので、ブロックレベル要素であるp要素の中に入れています。そして、そのimg要素に対してCSSで「float: left;」を指定していますので、画像は左に寄せられ後に続くテキストが画像の右側に回り込んでいます。

■XHTML

<p>
<img src="fish.jpg" alt="カクレクマノミの画像" />
カクレクマノミは、クマノミの中でもとても人気のある種類です。ふわふわとしたカーペットのような触手のあるハタゴイソギンチャクが大好きで、いつも気持ちよさそうに寄り添っています。
</p>

<p>
最近は、飼育器具も進歩してさまざまなものが発売されており、以前に比べると飼育も楽になりました。
</p>

■CSS

img {
  float: left;
}

　ここでXHTMLの２つ目のp要素をh2要素に変更したものが次の例です。このままでは、見出しまで回り込んでしまっていますので、h2要素のところで回り込みを解除してみましょう。

■XHTML

<p>
<img src="fish.jpg" alt="カクレクマノミの画像" />
カクレクマノミは、クマノミの中でもとても人気のある種類です。ふわふわとしたカーペットのような触手のあるハタゴイソギンチャクが大好きで、いつも気持ちよさそうに寄り添っています。
</p>

<h2>飼育方法</h2>

　回り込みを解除するには、clearプロパティを使用します。値としては、left、right、both、noneが指定できます。leftは「float: left;」の状態を解除、rightは「float: right;」の状態を解除します。bothを指定すると、左右両側を一度に解除できます。noneは解除を行わない指定です。floatプロパティはインライン要素とブロックレベル要素のいずれにも指定できますが、clearプロパティはブロックレベル要素にしか指定できない点に注意してください。では、clearプロパティをブロックレベル要素であるh2要素に指定して、「float: left;」の状態を解除してみましょう。CSSのソースコードに次のように追加すれば、h2要素以降は回り込みが解除されます。

■CSS

img {
  float: left;
}
h2 {
  clear: left;
}