Part 1. Let's begin CSS : Chapter 1. “入門:CSS2”

1.1 CSS とは

 CSS とはなんだろう? CSS で何ができるのだろう? CSS を使うとどんなメリットがあるのだろう? まずは,これらの疑問に答えていこう。

CSS とは

 これから話題にしようとしているカスケーディングスタイルシート(CSS)は,HTML や XML のような言語で書かれた文書をデザインするためのスタイルシート言語と呼ばれるもののひとつである。

 HTML については,いままで知られてきた方法でもデザインができるだろう。しかし,CSS によるデザインは,それとは考え方が違う部分がある。

 たとえば,HTML において,見出しの要素 H1 から H4 には色をつけたいとしよう。今までだったら,こんなふうに書くに違いない。

<H1><FONT COLOR="maroon">heading1</FONT></H1>
<H2><FONT COLOR="navy">heading2</FONT></H2>

 もし,文書中のすべての見出しに色をつけるのであれば,すべてに <FONT COLOR="...">...</FONT> という記述をしなければならないだろう。さらに,文書全体で H1 は栗色,H2 は藍色,H3 は緑色,H4 は灰色と統一するのであれば,見出しが出てくるたびに <FONT COLOR="..."> ではたいそうに面倒な話になる。

 そこで,CSS では,HTML の要素とその出力のさせ方を結びつけてしまうということを行ってしまう。“H1 は栗色,H2 は藍色,H3 は緑色,H4 は灰色”という出力におけるきまりを CSS で書いて,何らかの方法で HTML に作用させれば,

<H1>heading1</H1>
<H2>heading2</H2>

だけで H1 は栗色,H2 は藍色で出力される。ここで注目すべきなのは,いちど“H1 は栗色”とデザインを決めておけば,“あとはおまかせ”状態でよいということである。ふつうに考えれば,ひとつまたは一連の文書には統一したデザインを施すことが多いだろうから,文書を書いている途中で“あれ,これは何色で出力させるんだっけ”と考え込むこともなくなる。

 ワープロに慣れた人ならば,これと似た編集方法を思い出すに違いない。あらかじめ文書で用いられる(見出し用,本文用およびユーザが定義した)“スタイル”を定義しておいて,文書を作成するときはその段落またはフレーズに対して,定義したスタイルを選択していくという方法である。CSS によるデザインの考え方は,これに近いといえる。いっぽう,範囲を逐一マウスで選択し,フォントだ,行間だ,などとそのときそのときで設定していく方法は,むしろ従来の HTML 中で行うデザインに近い。

 ちなみに,スタイルシート言語には,CSS のほかに,XSL(Extensible Stylesheet Language) があり,XML に対するスタイルシート言語として CSS より一般的な使用がなされる。

CSS でできること

 CSS2 では,次のような機能が提供されている。

 本稿執筆時点(1999 年 4 月)では,CSS2 のすべてに対応したブラウザは登場していないが,これらのデザインが WWW ページに日常的に用いることができるとということは,たいへんな魅力である。

 では,CSS に対応していないブラウザでは,どのように出力されるであろうか。ページ内のデザインがすべて CSS で行われているとすれば,CSS 未対応ブラウザでは,それがすべて無視された形で出力される。しかし,これはそれほど困ったことではない。ページを,テキストベースでもじゅうぶんに意味が分かるように書くように心がけていれば,それこそ殺風景になるかもしれないが,内容はきちんと伝わるはずである。かつてのように,あるブラウザでうまく表示されたのが,別のブラウザではめちゃくちゃ,という状況は少なくとも回避できるようになるだろう(しかし,残念なことに,世の中のブラウザは CSS に“中途半端に”対応しているので,CSS に関しても状況はそれほど変わっていないのである)。

CSS の“いいこと”

 CSS を使った WWW パブリッシングが日常化すれば,へんてこなマークアップトリックを使わなくても,(従来より)強力で,自由かつ繊細なページデザインを行うことができるようになるのは言うまでもないが,そのほかにも,こんな“いいこと”がある。

 これが,最初の疑問の答えである。CSS に魅力を感じ,その可能性をわかっていただけたならば,さっそく CSS の解説を始めよう。

 なお,Part 1 では,HTML に対して CSS を適用するケースで話を進める。Chapter 1 では,とくに断らない限り,HTML いわゆるブラウザから(コンピュータ画面へ)の出力を考えることにしよう。