カスケーディング・スタイルシート

*もくじ*
思い立って
HTML+ブラウザで気になっていたところ
いい気になってもいられない
ブラウザーってこんなに違うか
CSSではないけれど
不勉強にして知りませんでした
大したヤツだぞCSS
それでもCSS万歳、とはまだ言えない
これが世の中の趨勢

思い立って

 ちょっとしたきっかけで「カスケーディング・スタイルシート(CSS)」 をいじる機会があった。やってみると、さして手をかけずにウェブペー ジの装飾を楽しめる。それもHTMLだけでやろうとするより遥かに楽だし 遥かに自由度が高い。それ以前に、設定をちょこちょこ変えるとすぐさ まページの表示イメージが変わるのは面白い。以前から興味のあるとこ ろだったので、これを機に自分のページ(つまり、ここ)もカスケーディ ング・スタイルシートに対応させることにした。CSSにはレベル1とレベ ル2という、少なくともふたつのレベルがあるらしい。どんな違いがあ るのか知らないが、成り行き上、ぼくはいきなり(?)レベル2 の方から 入った。

 ウェブページの記述言語はHTML(HyperText Markup Language)という が、これはその歴史的な経緯から、文書の論理構造を記述す る要素と文書の表示イメージ(レイアウトや装飾など)を指示 する要素とが混在していた。それでいて、というかそれだから、という か、どちらも中途半端であり、きちんとした文書の論理構造を記述でき るわけでもなく、きれいなレイアウトを指定できるわけでもなかった。 実際、HTMLだけでそこそこ見栄えのいいレイアウトを実現するのはほぼ 不可能であり、ぼくのページもトップページ以下かなり苦労している。 「苦労してもこの程度」というのが判り、途中で諦めた。プロのデザイ ナーなら割りきって超絶技巧を駆使して(つまり裏技離れ業反則技を使っ て)きれいなページを組んでいたのだろうが。しかしそういうことをし ていくとHTML文書は本来(?)の「文書の論理構造」とはまったく関係の ないモノで満ちあふれることになる。これについては 「HTMLの憂鬱」で触れた。

 そういう状態が好ましくないとは業界(?)団体のW3C (WWW Consortium)も早くから思って いたらしく、HTMLから体裁関連の要素を分離し、HTML文書とはまったく 別のところでレイアウト指定・装飾指定を記述するような仕組みを提唱・ 勧告した。それがカスケーディング・スタイルシートである( Cascading Stylesheet, CSS. エスペラントでなら"Kaskada Stilfolio"になろうか)。

 「カスケード」というのはそもそも「多段型の滝」という意味だそう だが、コンピューターの世界ではGUIでのウィンドウの並べ方(複数の ウィンドウが端をずらしながら重なり合う)でお馴染だろう。スタイル シートに「カスケード」というのは、別個に定義したスタイルを重ね合 わせられるところから来ているのだろう。スタイルシートというのはも ともとワードプロセッサーなんかで使われていた用語を援用したのだと 思う。章や節などの見出しや本文の書体、字下げ、余白など、文書の体 裁を一括で指定できる便利な仕組みがあった(今でもあるが)。

 興味はありつつも使わなかったのは、そこまで手が回らなかったのも あるけれど、最新のブラウザーでなければこちらの意図したとおりに表 示できないようなページは作りたくなかったからだ。

今回手を染めたのは、いいかげん時間も経っているから、ま、大方の人 には大丈夫だろうという読みである。いいかげんなもんである。

HTML+ウェブブラウザで気になっていたところ

行ピッチを空けるぜ

 何といっても、普通の(手に入りやすい)ウェブブラウザーでは、行 ピッチ(行間の広さ)が固定で変えることができず、しかも狭いのです ね。隙間なくびっしり行が並んでいる感じで、ちょっと段落が長いとも う読むのが辛い。段落を短くするようにすれば(段落間は一行分ばかり 空くので)いくぶん読みやすくなるし、デフォルトの文字サイズを大き めにするのも少しは効果がある。が、見やすさや読みやすさで段落の長 さを決めるのは本末転倒なので、これは大いなる不満であった。

 CSSに取り組んで真っ先に手がけたのがこれ……ではなかったけれど、 行ピッチを150%にすることで、行の間が適度に広くなり、ずいぶん読み やすくなったと感じる。これで長い文章を書いても平気だ。(平気かど うかは読む人次第ですが)

見出しはやっぱり目立たないとな

 どういうわけか、これまでのウェブブラウザーは見出し要素と本文要 素に同じ系統の書体を使うようになっていた。表示系を軽視していたと しか言いようがない。申し訳程度に太字にして表示していたが、いかに もおざなりでああった。タグを認識して大きい文字で表示したり太字に したりできるのだから、書体を変えることだってできた筈である。手を抜いていたのだ。

 これも大いなる不満であり、本文は明朝、見出しはゴシックと明示的 に指定するようにした。これだけで文書のメリハリが効いていると思う。

目立てばいいってものじゃない

 見出しを目立たせることはできても、本文が続いている中にそこだけ にょっきり見出しが立っていると落ち着きが悪い。やはり見出しの周囲 には適度な空間がなければさまにならない。

 これは最初の頃から気になっていて、見出しとの区切りに横罫線を使っ てみたり、強制改行をいくつかぶち込んでみたりした。それでも「いい 感じ」にはならなかった上に、文書には理由の定かでない「謎の強制改 行」が散乱するわけである。それもあちこちに。それらを排除して、ス タイルシートで適当な隙間をとるようにし、本体のHTML文書の方ではま さに「論理構造の表現」に徹するように改める。

快適

 そのほか、これまで表示上の効果として文字色を変えたり、文字サイ ズを変更していた部分をスタイルシートでの指定に置き換えるようにす る。同じ効果を何度も繰り返したい場合に、タイプ量が減るのとHTML文 書が汚くならないのとで二重の効果がある。ある程度スタイルが固まっ てくると、これはかなり気持がいいものだということが判る。

 スタイルシート(に採り入れられている概念)は別にCSSの発明では ない。ちょっと触ってみたところ、LaTeXという組版言語の機能に近い ものがいくつもある。参考にしたのは間違いなさそうである。LaTeXも その気になればかなり細かいレイアウトデザインができるし、文書本体 とは別のファイルに書いておいて再利用できるようにすることもできる。 それに似た快感がある。

いい気になってもいられない

 ……と、喜んで「好みの体裁づくり」に熱中していたら、落とし穴に はまってしまった。落とし穴? いや、迂濶だった。

 スクリーンフォント(画面表示用のフォント)には予め異なる文字サ イズが何種類か揃っている。MS Windowsなんかで使われているTrueType という形式のフォントはスケーラブルフォントといって、ひとつのもと データからさまざまな文字サイズをつくることができるのだけれども、 それよりはもとから画面表示用に作られている文字サイズの方がきれい なのである。きれいな方がいいので、スクリーンフォントに存在する文 字サイズで表示するよう、スタイルシートを設定して悦に入っていた。

 ところがである。それをウェブサーバーに転送して、別のPCから見る と文字がでか過ぎるのである。普段使っているLibretto(L2)は、画面が 小さいのに解像度は1280×600ドットある。だから12ポイントでちょう どよかった。別のA4サイズノートPCは1024×768ドットである。それだ と12ポイントは大き過ぎたのだ。といって、A4サイズノートでちょうど いいように10ポイントを使うと、今度はLibrettoの方が切ないことにな る。表示する環境によって、最適な文字サイズは異な るという単純な事実を失念していたのだ。ブラウザーの方では(きっ と)それもあって、「基準となる文字サイズ」を設定できるようになっ ているというのに。

 ということで、急遽方針を変更。文字サイズを明示せず、名前による サイズ指定にする。これだと相対的な文字サイズ指定になる。CSSで定 義されている文字サイズ名称はブラウザーの「基準となる文字サイズ」 と連動しているようなので、本文の文字サイズをそれに合わせ、見出し などもこれに準じた。けっきょく、「自分が見てきれいだと思う文字サ イズでのページ表示」の野望はわずか数日で潰えた。ゴシック24ポイン ト太字がどんなにきれいだと思っても、それを他人に押しつけることは できないのだ。場合によっては汚い表示になってしまうことを受け入れ なければならないのだ。それが生きていくということなのだ。

ブラウザーってこんなに違うか

 スタイルシートのできばえをウェブブラウザーで確認するのだが、ブ ラウザーに限らず人は誰も自分が日頃慣れ親しんでいるものやことが当 たり前であると思う傾向がある。

 とんでもないのですね。

 ぼくは今Operaというウェブブラウザーを使っている。 「fastest browser on earth」とかいう売り文句を面白いと思い試しに 使ってはや半年ほど経つ。そこそこ行けるのでユーザー登録をしようか するまいか迷っているといった状況である。こいつがCSS2を理解してく れるのですっかり気をよくして実験してきたのだが、「いちおう、手に 入る他のブラウザーでも実験しておくか」と思ってやってみたのが運の つき。同じスタイルシートなのに……

 HTMLといいCSSといい規格・仕様を定めたものであって実際にどう表 示されるかは実装依存である。コンピューターの世界にはそんなことが 多いのでそれ自体は別に驚きもしないが、実装によってこれほどまでに 違いがあるとは正直驚いた。今更ながら。

 スタイルシートの解釈からレンダリング(元になるデータから表示イ メージを形成すること)の工程は確かに「実装依存」で片づけてもいい と思う。しかし、文字サイズの取り扱いにおけるこの違いはなんだろう。

CSSではないけれど

 HTML4.01(2002年8月現在、HTMLの最新版だと思われる)にもちょっ ぴり対応してみた。といっても殆どは表示結果には関係ないことばかり。

 大多数の人にはどうでもいいことに違いないが、エスペラント固有の 文字も然るべく表示されるようにしてみた(ただしトップページのみ)。 確かHTML4.0で、国際化対応の一環として非ASCIIラテン文字を表示する ための仕組みが採り入れられた。

 今のところあまり好きではないのだが、見栄えは今使っている代用表 記(Ĉ/ŬをCx/Uxなどと、ASCII文字で書き表す方式)など比 較にならない(どころかエスペラントそのものなわけだし)、とりあえ ずトップページに使ってみている。でも エスペラント関連のページでは (まだ)使っていない。(ほったらかしっぱなしの エスペラントページでももちろん使っ ていない)

不勉強にして知りませんでした

 というわけで、短期間の間にずいぶん勉強した。

 文字の表示方向の指定も、HTMLとしてもできるしスタイルシートでも 指定できるらしい。国際化対応の波は着着と広がっているらしい。試しに やってみよう。

これがHTMLでの指定。
これがスタイルシートでの指定。

サポートしていないブラウザーもあるようである。また、表示方向は今 のところ「左→右」か「左←右」かのどちらかのようだし、上下方向の 指定もない。

 スタイルは、HTMLの各要素(一般に「タグ」として知られている)に 対して記述できるようになっている。見出しとして使われることが多い h1要素はこういうレイアウト・配色で表示する、本文の段落に使われる p要素にはこういうスタイルを与える……という塩梅である。驚いたの は、それぞれの要素の「前」と「後」に表示する文字列やスタイルも定 義できるのである。

 たとえば、h5という見出し要素がある。これが章の見出しだとして、 章見出しとして「第×章」とつけたいとする。HTMLだけでやろうとする とこの章見出しを直接書く(しかも章番号は埋め込み)しかないのだが、 スタイルシートを使うと、「第×章」といった固定部分はスタイルとし て記述できる(HTML文書に書かなくてもいい)ほか、章番号の自動加算 もできる。以下の例はスタイルシートで実現している。

しおばねて むいのさかねの こけらみし
すさなれは かみもたのはけ みそらすび

 本文段落のp要素に適用してこんなこともできる(意味があるかどう かはまた別の話)。

今日は天気がいい

ご飯もうまい

 サポートしていないブラウザーもあるようである。

大したヤツだぞCSS

 CSSは侮れない。これを使うだけで相当程度のレイアウト・装飾が (たやすく)実現できる。事実、ページ文書はひとつだが、スタイルシー トを切り換えるだけでまったく別の文書であるかのように姿を変える、 そんなページもある。HTMLだ けでレイアウト・装飾をしようとするよりレイアウト機能や装飾機能は 遥かに多彩であり、おまけに(?)HTML文書からは体裁を整えるためだけ の無駄なタグを取り除ける。こやつ、かなり強力である。

 これは、やはり、利用しないよりはした方がいいのだろう。ただし、 そのページを見る人がCSS対応のブラウザーを使って いると期待したい場合には。そうでない人には体裁などおかまい なしのいわば「素のHTML文書」をお目にかけることになる。 でもそれはそれでかまわないとさえ言ったっていいわけだし、2002年の 今スタイルシートに対応していないウェブブラウザーを使っている人は 少数派と見ていいだろう。

 最近のウェブブラウザーの中にはデフォルトで(明示的には何も指定 しなくても)何かしらのスタイルシートを持っており、それに従ってペー ジをレンダリングして表示しているものがあるらしい。確かにそれを 匂わせるメニュー項目や設定ダイアログを持つものがある。しかし、そ の割には選べたり設定できる内容が乏しい。

それでもCSS万歳、とはまだ言えない

何といっても実装依存

 スタイルシートの解釈は処理系(ウェブブラウザー)に依存しており、 必ずしも送り手が期待する表示になるとは限らないところが厭だ。表示 結果が微妙に異なるならまだいいが、処理系によってある機能を実装し ていなかったりとかいうことが平気で起こる。(もっともこれはHTMLの みの表示だって同じことだが)

スタイル定義自体が苦痛

 という人はきっといるハズ。誰もがこういう地味な作業を好んでした いわけじゃない。好きな人でも、レイアウトのデザインは

  1. 対象となる文書中にどんな要素が含まれるか考察する
  2. デザインの出来上がりイメージを確立する
  3. それぞれの文書要素についてデザインする
  4. 失敗したらやり直し
  5. 予想外の要素が現れると知って愕然とする

といったことの繰り返しになる。最初に1や2について全体の見通しを持 つことが肝要である。これはプロの仕事ってことである。

その時限りの体裁は

 スタイルシート(に限らずレイアウトの指定)の宿命でもあるが、 「一回限りの装飾効果」を書くには手間の方が大きい。こう思うのはぼ くだけなのかも知れないけれど、スタイルシートが有用なのは「××用 のスタイル」という形で抽象化・一般化・定式化でき、再利用可能とな るからだ。そうでない、その場かぎりの、アドホックなデザインをした い場合、そのためにスタイル定義という形式で記述するのは負担の方が 強いのではないだろうか。

 たとえば、表をいくつか含む文書を書くとして、ある表だけちょっと 体裁を変えたいとする。単に「表のデザイン」ということにするとすべ ての表に適用されてしまうので、その表だけ別扱いしてやらなければな らない。そのために表にIDをつけたり、クラスというものを作ってやる ことになる。そうして文書中でただ一回出現するもののためにスタイル 定義ができる。

 そういう目的のために、HTML文書内にアドホックなスタイル定義を組 み込むことができる。しかし、これはこれで「HTMLには内容のみ書き、 デザインはCSSでする」という趣旨に反するようで気持悪い。それは我 慢することにしても、これにも問題があって、というか正確には処理系 の実装の問題なのだろうが、HTML内に組み込んだスタイルをうまく 取り込めなかったりする。仕方なく安全策でその文書ひとつのた めにスタイルシートを作ったりする。

「カスケード」ってどうよ?

 複数のスタイル定義を重ね合わせることができるのが「カスケーディ ング・スタイルシート」の名の由来だけれど、複数のスタイルが重ね合 わされる優先順位がどうなっているのか、参考にした本には明確な記述 がなくてよく判らない。外部スタイルシートとHTMLヘッダのstyle要素 に書いた埋め込みスタイル定義とstyle属性として書いたスタイルと、 どれが最も優先されるのだろうか?

 それは措いておくとしても(措いておくなよ<自分)、HTML文書側で 指定したスタイルシートよりもブラウザー側のスタイルシートを優先さ せることができるらしい。まぁ、利用者によってはどんなページでもあ くまで自分好みの表示で見たい人もいるのだろうけれど、その結果表示 がめたくたになるとしたら、意味がないじゃないか。

 あ。「カスケード」ってもしかして、入れ子になっている文書要素に 対して、外側で定義したスタイルが内側のにも継承されるという意味で の「重ね合わせ」なのか?

ウェブブラウザーますます重くなる

 そもそもウェブブラウザーは重たい仕事をしている。HTML文書を読み 取り、その記述をもとに表示イメージを作成し、ウェブページとして画 面に表示する。既にしてウェブブラウザーは言語処理系なのである。そ れもテキスト部分を適切にページに仕立てるだけでなく、画像があれば それを読み込んでイメージ展開するし、アンカーの場所を憶えておいて そこがマウスで押されたらそのリンク先文書を読み込まなければならな いし、過去にどんなURLを訪れたか履歴を憶えておかなければならない。

 ただでさえこのような大仕事をしてきた上に、今やCSSという言語の 文を読んで解釈しなければならない。解釈して、HTMLの各要素をその指 定に従って表示イメージに加工しなければならない。CSSの表現力は多 彩だから、ブラウザーに要求される仕事は量も質も高くなる。かくして ウェブブラウザーはますます重たくなる。

 重いだけならまだいいが、要求される仕事が多いということは、実装 が追いつかなくなる可能性があるということだ。実装しているように見 えても欠陥を含んでいる可能性があるということだ。ブラウザーづくり、 ますます大変な作業になる。大変すぎて新規参入難しくなる。既存の 「老舗」シェアを握る。寡占体制できあがり、メーカー態度デカくなり 欠陥含んでても「仕様」と言い張る。競争なくなり市場発展しなくなる。 利用者欠陥ブラウザーいやいや使わなければならなくなる。いいことな いのである。

 そうでないとしても、要求される仕事量多くて実装大変になる。欠陥 除去できないまま市場に投入される。欠陥多いが工数かかってるので売 価高くなる。利用者泣く泣く高い金払って欠陥ブラウザー使う。いいこ とないのである。

これが世の中の趨勢

 とはいえ、こうした文句は時間が解決してくれるに違いない。

 処理が重いとしてもどうせCPUは速くなるし搭載メモリー容量も増え る。ブラウザーによって実装が異なったりするのも、バージョンアップ して解消されていく。「スタイル定義が大変」などというのは、ページ ビルダーを使わずにHTMLやCSSを手書きしている自分が悪いので、文明 の利器を使えば文句にならない(に違いない)。

 お勧めスタイルシート集、なんてものが現在あるのかどうか知らない けれど、篤志家はウェブページでサンプルCSSを公開しているに違いな いし、ページビルダーにも付録でついていそうだ。いずれ「こういうペー ジを作るならこういうスタイル」というのが普及し定着していくから、 それをそのまま使ったり、適当に手を入れて使えばいい。論文用スタイ ルシート、画像中心ページ用スタイルシート、おちゃらけ/悪ノリ系テ キストページ用スタイルシート、手抜き系テキストページ用、小説用、 随筆用……というのが出回るだろう。そうして「CSSが当たり前」とい う状況になっていく。

 ブラウザーづくりがますます大変な仕事になり手を出す人がいなくな る――という事態にもならないだろう。好奇心あふれるプログラマーや 野心に燃えるプログラマーは跡を絶たないし、フリーソフトウェアやオー プンソースの形でHTML・CSSのレンダリングエンジンがぽこぽこ創られ ていく。この世界はそういう世界である。既存「老舗」が胡座をかいて 仕様のフルセットを実装しなかったり欠陥を放置したりを続ければ、い ずれこれらの第三勢力がのしていく。そ〜ゆ〜世界だ。

 だいたい、自分のページを作る人なら誰だってきれいなページを見て 欲しいわけだし。手を抜いていた自分のページすら格段に見やすくなっ た(と思いません?)。最新のブラウザーを使っていない人、テキスト ベースブラウザを愛用している人にはご勘弁願って、ぼくもスタイルシー ト派に乗り換えようと思います。

(2002.08.23)

あたまへ
目次へ
©Copyright Noboru HIWAMATA (nulpleno). All rights reserved. (C)Copyright Noboru HIWAMATA (nulpleno). All rights reserved.