大藤 幹
しおりをつけるワープロ感覚で作るとどうなるか？
この章では、構造を示すタグの付け方を説明します。まず最初に、従来の制作プロセスとの根本的な違いを確認しておきましょう。
従来のホームページの多くは、なんらかのツールを使ってワープロと同じような操作・手順で作られていたのではないかと思います。それは、テキストを入力しながら表示方法を設定するツールバーなどを使って同時にレイアウトも行うといったやり方です。そのような方法なら、多くの人が慣れ親しんでいますのでホームページが簡単に作成できるというわけです。
では、その裏側でツールはどのようなタグをつけているのでしょうか？ 多くの人は、できればそんなことは気にせずにホームページが作れた方がいいと思っているのかもしれません。従来のように表示方法を指定するためにタグを使っているのであれば、まさにその通りでしょう。しかも、タグのことはあまり気にしなくても、一般的なユーザーが使っているブラウザでならほぼ同じ状態で再現できます。自分の意図した通りに表示させることが目的で、それが実現できているのですから作る側としては何も問題はありません。目的がそこにあるのならば、タグがどうなっているのかなんて気にしなくてもいいのです。
しかし、結果としてできあがったページがどうなるのかと言えば、それはここまでで説明してきた通りです。重く、遅く、ワープロ文書と同様の固定的なページになります。しかも、トータルで見ると本当に簡単に作成できているのかも疑問に思えてきます。表示だけを考えて１ページ１ページ同じようなレイアウト作業を繰り返していくのと、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;
}
