<H1>1.ももたろうを考える</H1>
<H2>1.1.出発まで</H2>
<H3>1.1.1.はじまりはじまり</H3>
<H3>1.1.2.桃太郎の誕生</H3>
「どうしてHTML文書の見栄えは自由に調整できないのだろう？」
WWWの基本文書であるHTML文書を作成したことのある方ならば，誰もが一度はこんな不満を抱いたことがあると思います。その不満は，スタイルシートを用いることで解消されるのです。「なぜHTMLでは見栄えを調整できないのか」といえば，その答は「それはHTMLの仕事ではないから」です。すなわち，スタイル調整はスタイルシートの仕事だからです。
WWWといえども文書作品の公開ですから，その作品の見栄えをきちんとコントロールしたいと考えるのはごく当然です。詳しい解説は後回しにして，まずはスタイルシートの機能を大まかに紹介しましょう。
HTML用のスタイルシートとしてW3Cが推奨しているのが「カスケーディング・スタイルシート（CSS）」です。レベル1のCSS（CSS1）だけでも，文書中の任意の部分に関して，以下のプロパティ（property）ごとにスタイルを調整できます。
CSS2では，これらに加えて，「表示位置の絶対的な指定」「自動生成文字（引用符や通し番号）」「印刷への対処」「TABLE」「ユーザインタフェース（カーソルやシステムカラーへの参照）」「音声再生」に関する指定が可能になっています。
スタイルシートは，基本的にはテキストファイルとして作成・保存されます。シートを使いたい場合は，HTML文書のなかに「このシートを使う」という指定を（LINK要素として）書き込めば良いのです。
WWWブラウザは，読み込んだHTML文書にスタイルシートファイルが指定されていると，自動的にそのシートを読み込みます。そして，スタイルシートの指定に従って表示を調整するのです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>HTML4.0(W3C Recommendation 18-Dec-1997)解説</TITLE>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="normal.css">
<LINK REL="STYLESHEET" TITLE="fancy"
TYPE="text/css" HREF="fancy.css">
<LINK REL="ALTERNATE STYLESHEET" TITLE="compact"
TYPE="text/css" HREF="small.css">
<LINK REL="ALTERNATE STYLESHEET" TITLE="compact"
TYPE="text/css" HREF="mini.css">
</HEAD>
Netscape NavigatorやInternet Explorerの標準的な見栄え設定では，見出しのレベルが下がるにつれて（H1〜H6要素），フォントサイズは順に小さくなります（図1-1）。
<H1>1.ももたろうを考える</H1>
<H2>1.1.出発まで</H2>
<H3>1.1.1.はじまりはじまり</H3>
<H3>1.1.2.桃太郎の誕生</H3>
それを，図1-2のように変更してみましょう。このように，ほんの数行のスタイルシートでも，見栄えを大胆に変更できるのです。
H1 { font-size: xx-large;} /* H1をずば抜けて大きく */
H2, H3 { font-size: large;} /* H2とH3は同じ大きさに */
H2 { border-bottom: 1pt solid;} /* H2の下にボーダーラインを */
H3 { margin-left: 3em;} /* H3は左に余白を */
/* 「em」は「一文字分」のサイズ */
Netscape NavigatorやInternet Explorerの標準的な見栄え設定では，段落（P要素）の開始／終了は1行分の余白で表現され，行間はぴっちり詰まっています。また，強調部分（STRONG要素）は太字で表現されます。（図1-3）。
<H3>1.1.1.はじまりはじまり</H3> <P>桃太郎のお話は，おとぎ話に良くあるように， 「むかしむかし，あるところに」で始まります。 おじいさんは山へ柴刈りに，おばあさんは川へ洗濯に行きます。</P> <P>ところで，最近の人は「柴」をご存知でしょうか。 柴とは無関係の生活をしているため，<STRONG>「芝刈り」</STRONG>だと 誤解している人もいるかもしれません。</P>
それを，図1-4のように変更してみましょう。このように，ちょっとした指定でも，文章の印象を大きく変えられるのです。
P{
text-indent: 1em; /* 行頭に1文字分の字下げ */
line-height: 1.5em; /* 行幅は1.5文字分 */
margin-bottom: 0em; /* 次の段落との余白は取らない */
}
STRONG{ /* 白黒反転 */
color: white;
background: black;
}
これまで見てきたとおり，ほんの数行のスタイルシートを記述するだけでかなりの効果が得られます。また，用意されているプロパティに関してはほぼ自在に見栄えを調整できるといって良く，各種プロパティを複雑に絡み合わせれば，販売されている書籍に対抗できるほどのスタイル調整が可能です。また，WWWでは色や画像を気軽に指定できますので，印刷出版するなら費用が心配になるような表現を手軽に楽しむことだってできてしまいます（図1-5）。
ただし，用意されていないプロパティに関しては調整できません。CSS1の仕様では，以下に挙げるような特殊な表示効果は実現できません。
スタイルシートは必ずしも万能ではありません。例えば，スタイルシートで絵は書けません。スタイルシートを活用するには，まずCSS1で何ができるのか・何ができないのかを知り，その上でCSS1を生かすスタイル調整を考えるべきでしょう。
スタイルシートの活用を考える前に，ちょっと歴史的な経緯を確認したいと思います。
まず，これまで「見出しレベルの違いは，文字サイズの違いに相当する」と説明されたことはないでしょうか。また，「HTMLの段落P要素は，一行分の改行（余白）として表示される」という話はどうでしょう。「引用ブロックであるBLOCKQUOTE要素は，本文よりも大きなマージンをとって表示される」というのも聞いたことがないでしょうか。
既にお分かりのとおり，これらの表示はスタイルシートによって全く異なるものに変更できます。では，いったいこの説明は何を示しているのでしょう？ 実は，特定のWWWブラウザにおける標準の表示を説明しているに過ぎません。
HTMLの仕様そのものは，各要素の意味合いや役割――見出しであるとか，強調語句であるとか――を決めているだけで，その表示に関しては原則として何も決めていません。なぜなら，表示はスタイルシートの範疇であり，HTMLの範疇ではないからです。
では，HTMLの範疇とはいったい何なのでしょう。
スタイル指定に関して，次の問いに答えるよう考えてみてください。
普通は，後者に対して「Yes」でしょう。すなわち，スタイル指定よりも先に，まずは文書の構成をあきらかにしておくものだと考えられます。
文書のテキストデータのうち「どこが見出しでどこが本文なのか」を明示するための仕組みとして，SGML（Standard Generalized Markup Language）があげられます。SGMLでは，見出しならば
<見出し>スタイルシートを使おう！</見出し>
と，文章に「タグ」と呼ばれる記号をつける（マークアップする）のです。
このように文書が書かれていれば，あとはスタイルシートで「見出しはフォントサイズ20ポイントで，太字，ゴシックね」などと指定するだけで見栄えを調整できます。なかなか賢い仕組みだと思いませんか？
SGMLの仕組みでは，次の二つの過程によって文書を記述します。
文書型定義とは，「これから文書で指定するのは，“見出し”と“本文”と“強調語句”だよ」といったことを明示するものです。すなわち，文書の様式そのものに相当します。
しかし，毎回毎回文書の様式を定義していては大変です。そこで，文書型定義は使いまわしが効くようになっています。
実は，HTML（HyperText Markup Language）の正体は，この(1)の過程を省略したSGMLなのです。HTMLにおける文書型定義は既に定義済みで，われわれはそれにしたがって文書を記述するのです。
したがって，HTMLの仕事の範疇は文書の構成を明示することであり，HTMLは各文書の見栄えに関して原則として何も規定していません。その見栄えに関してはスタイルシートに一任されているのです。
最初のHTMLおよびWWWの仕組みはCERNで考え出されました。そのときには，HTMLは厳密なSGMLアプリケーションではなく，もう少しルーズな（？）ものでした。ルーズであるがゆえに，逆に文書記述のルールにあいまいな部分がありました。
しかし，その後の混乱期を経てW3Cが設立され，W3Cの努力によってHTML2.0以降は明確なSGMLアプリケーションになりました。
実際にはWWWブラウザ開発会社などが独自拡張したHTMLも存在するのですが，“標準”のHTMLといえば，W3Cが推奨するもの（W3C Recommendation）を指しています。
ところで，WWWが誕生したのは1990年，WWWブラウザMOSAICにより爆発的に普及し始めたのは1993年，CSS1が発表されたのは1996年です。つまり，HTML文書のスタイル指定は6年間（あるいは3年間）放置されていました（実際には考慮されていたのですが，標準化には至りませんでした）。一般的な感覚からみれば，この期間はそれほど長くはないと言えます。しかし，驚異的な成長を見せたWWWの発達過程と並べてみれば，“大変長い時間が経った”と感じざるを得ません。
1998年にもなると，既にMOSAICをご存知ないひともいるかもしれません。MOSAICは世界で最初にインライン画像表示を実現したWWWブラウザで，瞬く間に各種OSに移植され，1993年には事実上の標準WWWブラウザとなりました。その開発者マーク・アンドレセン（Marc Andreessen）らはNCSAの一員でしたが，MOSAICの著作権についてNCSAともめた結果，NCSAを飛び出し会社を設立しました。それが現在のNetscape社です。
CSS1が発表される前も，多くのWWW利用者がHTML文書の見栄えを調整したいと考えていました。しかし，始めに市場の大部分を占めたMOSAICは，HTML要素に対するスタイル変更法を提供しませんでした。そのMOSIACがおこなうHTML文書の表示は，「見出しレベルの違いは文字サイズの違いで表現する」「段落の開始／終了は一行分の余白で表現する」「強調文字は太字で表現する」「引用ブロックは本文よりも大きなマージンを取る」といったものでした。その後任であるNetscape社のNetscape Navigator，Microsoft社のInternet Explorerも，MOSAICが規定したHTML文書の見栄え設計を受け継ぎ，やはりスタイルを固定的なものとして扱ってきました。
この時期に多くの人がWWWを利用するようになり，当然多くの人がHTML文書を記述しました。この段階ではまだスタイルシート仕様が確立されておらず，また「HTML文書の表示スタイルは，本来自在に変更できるものだ」と言及する人が少なかった（いなかった？）ため，いつしか，「MOSIACがそのように表示した」に過ぎなかった表示結果が，あたかもHTMLが定義する見栄え設定であるかのように理解されました。しかし，それは誤解なのです。
この誤解が大きな混乱を生みました。すなわち，「HTMLは文書の見栄えを指定するものであり，残念ながらその表現力は低い」というイメージが流布し始めたのです。
その誤解に拍車をかけたのが，Netscape社などWWWブラウザ開発会社が独自に採用した要素（タグ）です。各社は自分のWWWブラウザが他社のものより高機能であることを示すために（？），特殊効果を実現する要素を独自に導入しました。たとえば，FONT要素を用いれば，文書中の好きな文字のサイズや色を変更できます。BLINK要素を用いれば，文字列を点滅させられます。MARQUEE要素を用いれば，電光掲示板のように流れていく文字を簡単に表示できます。
独自要素を導入すること自体は，WWWをより楽しいものにするという意味で，悪いことではありません。しかし，これらの要素の多くは，文書構成ではなく「表示の仕方」を指定するものでした。このような独自要素が注目されるにつれ，「HTMLとは文書の表示結果をタグで指定するものだ」というイメージがより強まってしまいました。
いまや，「文字のサイズを変更するには，H1〜H6タグを用います」「表示に大きなマージンをとるには，BLOCKQUOTEタグを用います」と書いてある市販の本を探すことすら難しくありません。これでは，HTMLの本来の考え方が完全にどこかへ吹っ飛んでしまっています。
「見出し」を例に，HTMLそのものに関する誤解と混乱の歴史をまとめます。
こうなると，HTMLが文書構成を示すものだとはなかなか理解できません。しかも，BLINKやMARQUEEなど一部の独自拡張要素は文書構成とは何の関係もありません。こうして，HTML本来の仕事は忘れ去られ，誤解と混乱ばかりが蔓延するようになったのです。
そのような誤解の中で，マークアップを流用して見栄えを調整する「テクニック」が数多く生み出されました。もっとも，誤解ではなく，スタイル表現を支配したいと苦心した結果なのかも知れません。しかし，どちらにせよそれらがHTMLマークアップを混乱させているのです。
以下に，代表的な“テクニック”とその問題点を紹介します。
この“テクニック”に従っていると，HTMLマークアップの本来の目的である「見出しの明示」などが全うできません。「見出しとして指定されているのが見出しだ」という単純なはずのルールが守られていないのならば，文書の読み手はどのようにして見出しを探せばよいのでしょう？
また，このように書かれたHTML文書では，スタイルシートで見栄えを調整しようにも，文書構成が書かれていないために調整しようがありません。本末転倒とはこのことでではないでしょうか？
これらの要素を利用すれば，そのWWWブラウザを利用している人たちには美しい効果として解釈されるでしょう。しかし，それ以外のWWWブラウザを利用している人はどうなるのでしょう？ この方法では，一部の人にしか効果をアピールできません。
一般に，影付き文字や会社のロゴマークのような特殊な装飾つきの文字は，テキストではなく画像としてHTML文書に入れ込みます。これが極端にこうじたのか，文章全体を画像にして公開しているケースに遭遇することがあります。つまり，独自のDTPソフトウェアなどを用いて整形した結果のスクリーンショットでHTML文書を構成するのです。
たしかに，これならばソフトウェアに依存せずに，表示を完全に支配できます。しかし，次のような欠点があります。
TABLEの本来の意味は「表」ですが，表のコマ（CELL）の位置を「文字の位置」として利用し，細かなレイアウトを実現した文書も存在します。中でも，上下左右のマージンや，語句同士の位置関係を調整する効果を狙ったものが多く見られます。
この“テクニック”の最大の難点は，「指定が難しい」ことです。複雑なレイアウトを実現しようとすればするほど，HTML文書のソースは複雑になります。すると，専用ソフトウェア（高機能のWYSIWYGのHTMLエディタなど）を用いなければ思ったとおりの効果を得るのは難しいといえます。
もうひとつ難点があるとすれば，処理に必要な時間です。複雑なレイアウトのTABLEを調整するには，当然それなりの処理時間が必要です。結果として文書の表示にかかる時間が増大するでしょう。これはコンピュータの処理速度に依存する問題ですが，読者をイライラさせる可能性が高いことは間違いありません。
「どうしてマージンをとるためにBLOCKQUOTE（引用ブロック）なんていう名前の要素を使うのだろう。どうしてちょっと余白を取りたいだけなのに，テーブルだのセルだのを考えなければならないのだろう。HTMLって難しい。これじゃあ，“気軽にWWWで文書公開”なんて無理だなあ。」
こう考えてしまうのはもっともです。しかし，それは「本来HTMLにはできないこと」を無理やりHTMLで行おうとしていたのがまずかったのです。
HTMLでスタイルを調整しようとするのを止めましょう。HTML文書を本来の文書構成を明示するためのものに戻しましょう。そして，スタイルシートを使いましょう。
1.2.4.で紹介した怪しいテクニックを用いる場合とは異なり，スタイルシートを用いた見栄え調整には以下のような利点があります。このことを逆に捉えれば，HTMLで見栄えを指定することがいかに「無理のある仕事」であったのかを実感できると思います。
本書はCSSを用いたHTML文書のスタイル調整を解説するものです。単にCSSの仕様を紹介するにとどまらず，スタイル指定の考え方にまで言及します。
しかし，スタイルシートを活用するには，HTML文書が文書構成を示すものとして書かれている必要があります。端的に言えば，HTML文書から見栄え指定を剥奪し，見栄えをスタイルシートに押し込む準備をしなければいけません。そうすることによって，HTML文書はより単純で明快なものになります。そのためには，まずHTML本来の仕様を理解し，必要に応じて誤解を解かなければなりません。そこで，本書は以下のような構成となりました。
なお，この章の並びは筆者の考える望ましい学習ルートに過ぎず，絶対ではありません。興味に応じて，お好きな章から読み始めても構いません。ただし，後の章は前の章の知識を前提にしていますので，分からない単語や概念が現れましたら，必要に応じて前の章をお読みください。
巻末に，HTML4.0とCSS1のクイックリファレンスを資料として収録しました。HTML4.0やCSS1の全てのキーワードを暗記する必要はありません。クイックリファレンスを机の脇に置き，活用してくださることを願います。
他にも，1998年3月段階での各種WWWブラウザのスタイルシートサポート状況を収録しましたので，ぜひご利用ください。
本書は，特定の実装結果（ソフトウェアの動作結果）ではなく，仕様をもとにHTMLやCSSを解説します。しかし，現実的には仕様と実装に食い違いがあるものです。すなわち，仕様にはあるが機能しない概念，仕様とは異なった結果になるスタイル指定例などが存在します。
そこで，本書では代表的なWWWブラウザであるNetscape Navigator4.0とInternet Explorer4.0における実装と仕様との食い違いを必要に応じて報告します。ただし，筆者の都合で，Microsoft Windows95におけるテストしか行えませんでした。マッキントッシュや各種UNIXをお使いの方，あるいは他のWWWブラウザを用いている方はあらかじめその旨をご了承くださるようお願い申し上げます。
また，WWWブラウザの厳密なバージョンを書けば，Netscape Navigator4.02，Internet Explorer4.00です。執筆段階での最新バージョンはNetscape Nagivator4.04，Internet Explorer4.01ですが，これらはマイナーチェンジ（であるはず）なので，大きな違いはないものとさせていただきます。
本書の6章で紹介するスタイル例は，全てWWWで入手可能です。
http://www.gihyo.co.jp/book/1998/168111/download/css/を参照してください。他にも，正誤表などをできる限りすばやく公開していく予定です。