Section 14 : 構造と表現の分離 ― CSS が目指すもの

 Fist step CSS,Step forward CSS,そしてこの Take off with CSS を通して CSS1 を解説してきた。最後に,CSS とは何を目指し,どのように使われることを企図されているのかを考えてみよう。

CSS の役割

 CSS の目的は,Fiest step CSS の冒頭で述べたように,“HTML(などの)文書の視覚的要素を集中的に記述すること”である。その結果,HTML は文書の骨格をよく反映した,すっきりしたものになるだろう。たとえば今までは,見出しの色を変えるにしても

<H2><FONT COLOR="maroon">(見出し)</FONT></H2>

と逐一書く必要があった。CSS を使うと,もし <H2> はすべて栗色にしたいというのであれば,

H2 { color: maroon; }

と書いておくと,<FONT> は不要になり,その部分の HTML マークアップは“見出し”がよく見えるすっきりしたものになる。

 このとき,“color: maroon;”は <H2> に関連づけられて定義されている。実世界にあるさまざまな書籍を見てみると,“見出しである”という“構造”にある“スタイル”が対応づけられているのであって,1 冊の本の中であるところでは見出しがゴシックで,あるところでは明朝で……というのは誤植でもない限りまずありえない。このような CSS の指定方法は直観的に納得がいくものである。

 ここまで CSS 対応ブラウザでご覧になってきた人は,機会があったらこれらの文書を CSS に対応していないブラウザでもご覧になっていただきたい。この文書のデザインはすべて CSS で行っている。筆者は一度 CSS を作って,あとはデザインのことはほとんど考えずに HTML を書いている。

 本チュートリアルに出てきた例はその場その場で効果をご覧に入れるために STYLE 属性を多用したが,本来は文書全体を眺めて構造に対してスタイルを計画するものであると考える。あなたの周りにある書籍などのデザインを参考に,あなたの文書にぴったりの CSS を作ってほしい。このとき,自分がどんな作りの文書を作ろうとしているのかを見失ってはならない。その上で,STYLE 属性で補助的にスタイルを適用させながら,“あなたのスタイル”の文書を完成させてほしい。

 CSS はデザインに関して今までより格段のフレキシビリティを与えてくれた。さまざまな要素にさまざまなスタイルを適用することができる。極端な話,<DIV><SPAN><BR> さえ知っていればあとは CSS をいじることでそれなりに“見える”HTML 文書になるだろう。ところがそこでは,“HTML は文書の各部分の役割(文書の構造)を記述するものである”という大原則がないがしろにされている。HTML 文書に CSS を使うのであれば,“はじめに HTML ありき”で考える必要がある。HTML 文書中で使われる構造が自分の書く文書にどのように適用され,要素がどのような役割をもち,また同じ要素でもどのように役割が異なるかを把握しなければならない。その上で CSS を使わなければ,CSS を効果的に使っていることにはならないだろう。もし今後,WWW 上でも紙面上でも,“HTML は <DIV><SPAN><BR> だけでよい”というチュートリアルが現れたとしたら,たいへん悲しいことである。

 CSS に提供されている機能を使えば,いわば“パズル”のようにして,さまざまな効果を出すことができるだろう。しかし,そこでも,“HTML は文書の構造,CSS は文書の表現”という“分担”を考えて問題を切り分け,一方が他方を妨げないようにするべきである。CSS が登場して,それが実装されてまもなくに流行ったのは,“2 つの同内容のブロック要素を,2 つめのブロック要素のトップマージンを負にして表示させる”ことであった。これによって,あたかも文字に“影”がついたかのように見えるトリッキーな手法である。しかし,よく考えれば,これは文書としては,“同じ内容の見出し(またはパラグラフなど)が意味もなく 2 つある,あるいはミスタイプのような文書”なのである。“見せる”ために,切り分けて考えなければならないことが一緒くたになってしまい,その結果“情報を伝える”という大切なことがおろそかになってしまうのである。

 “文書の骨格を考え,それにうまく対応づけられた CSS を書くこと”―CSS の登場で HTML は(ようやく)構造と表現を分離させ,すっきりした書き方ができるようになった。HTML から離れた“表現”は CSS となって,今までと違った考え方,やりかたで結合している。

CSS の目指すもの

 CSS は今後,どのようになるのだろうか。この文書を書いている時点ですでに CSS2 が公開されたが,それもふまえて,CSS がどうなるかを考えてみたい。

 CSS1 はまだ要素を 1 次元的に扱っている。つまり,要素を 2 次元のキャンバスに自由に配置することはできない。この自由な配置が許されれば,WWW ドキュメントのデザインはますます自由度を増し,高い表現力を手に入れるだろう。それでも,CSS を HTML とともに使う以上“構造記述”が背景に存在していることを忘れてはならない。

 CSS の使用範囲は画面とは限られていない。印刷にも応用できるだろう。たとえば“改ページ”などはたとえ印刷を想定している HTML であっても書くことはできないし,書くべきではない。構造→視覚のユニバーサルな橋渡しとして CSS は発展していくだろう。

 いや,視覚だけとは限らない。開かれた情報に向けて,文書が音声や点字として出力される機会がますます増えるだろう。そのときどのように読まれるかなどを CSS は細かに指定する。CSS でとにかく派手なページを作るのも,悪いことではない。でも,情報を望む人にあまねくそれを提供することも肝要ではなかろうか。

 CSS はこれからさらに WWW パブリッシングを盛り上げてくれるに違いない。文書をあらゆる形でデザインすることが,わたしたちに開かれつつある。CSS はそのツールとしてわたしたちの身近にやってきた。そして,身近にいつづける。

 W3C の CSS1 のドキュメントは,CSS はプログラミング言語になってほしくないと書かれて締めくくられている。