趣味Web 小説 2004-04-30

自動で CSS デザインに変換するツールは実現可能か

何回でも同じことを書く試み。

ちまちまと新サイトのデザインをやっているのですがユーザビリティと見た目を考えるとどうしても一ページをテーブルでくくってしまうことになってしまってます。

こんなものを趣味のWebデザインの中の人に見られたら「テーブルレイアウトをする輩は腹を切って死ぬべきだ」(←元ネタが分かる人は僕と握手)。とか言われそうですが、CSSの方がいいとは分かっていても、私はCSSの技術がまたっくないので(HTMLすらビルダー)。

しかし、例えば私はCSSの知識が皆無だし今から勉強しようにも、それよりも記事の一本(今書いてるけど、ひとつ書くのに数日かかるんだこれが)でも書く方が有益だと思うわけで、テーブルレイアウトの嫌いな人が、CSS普及のために書いてくれてもいいんじゃないかとか思ったり思わなかったり、何が言いたいかは分かるな?(最低)。

それは置いといて、テーブルでデザインしてるときによく思うのですが、以前「侍魂フィルター」とかいうのがありましたが、それの応用でテーブルをCSSに変換するようなスクリプトって作れないんでしょうか?

いや、私はその辺の知識が全然ないので適当に言ってますが、もしあればすごい便利だろうなと。

CSS は仕方なく使うもの

CSS をある程度以上わかっている人は、テーブルレイアウトでデザインした HTML 文書を自動で CSS によるデザインに変換するようなツールを作りたがらないはずです。それは何故かといいますと、CSS は仕方なく使うものであって、CSS を使うこと自体にはあまり意味がないからです。このあたりは勘違いされている人が非常に多いのではないでしょうか。

HTML は文書構造を(少なくともソースにおいて)明示することを目的とした言語です。本来 HTML 文書は、見出しを見出しとして、段落を段落として、箇条書きを箇条書きとして、強調部分を強調部分として明示すれば、それだけで完成するものです。

ところが、IE などの PC 向け視覚系 WWW ブラウザのほとんどは、デフォルトで適用されるスタイルシートの出来がよろしくありません。h4, h5, h6 要素は見出しなのに本文よりも字が小さくなります。マイナーな要素はみな斜体か太字か固定幅で表現するという手抜きになっていて、各要素の区別さえつきません。こんな状況でありますから、意図をきちんと伝えたい製作者は font 要素などで文書を装飾する必要があったわけです。

ここで、ひとつ大きな勘違いが生じました。きちんとマークアップしても、文書の見た目はあまりきちんとしません。だから追加の装飾で、見た目をきちんとさせるわけですね。こういう作業を繰り返していると、たいていの製作者は人間に文書を見せることしか考えていませんから、じゃあ、見た目さえそれっぽければいいんじゃないのという方向に進むわけです。見出しを見出しとしてマークアップしなくても、見た目が見出し風ならそれは見出しであると思うようになる。

テーブルレイアウトは、こうした発想から生まれてきたものです。本当は表なんだけれども、見た目が表っぽくないから、表じゃないってことにするわけです。前述のケースとは逆転していますが、これは同じ事象の表裏なんですね。

さて、近年のブラウザは閲覧者が自作のスタイルシートを適用する機能を備えております。デフォルトスタイルでは見分けのつかなかった各要素を、自分の定義したスタイルで区別して表示できるようになったわけです。また本文より小さい見出し文字という問題も同様にして解決できます。再び、製作者が楽をできる時代になりました。

しかし残念なことに、ほとんどの閲覧者は不勉強なままです。自分の好みに合わせて HTML 文書のスタイルを設定することができるようになったのに、あまり嬉しそうな顔をしません。「面倒くさいから、製作者の方で適当なスタイルを指定してよ」といいます。しかし相変わらずブラウザのデフォルトスタイルは不出来です。そこで仕方なく、製作者がスタイルシートを用意するという発想が出てきます。

自動変換ツールの不可能性

CSS はスタイルシートの一種なのですが、スタイルシートは基本的に、各要素にスタイルを指定するものです。見出し要素は太字で文字を大きめにしなさい、段落は前後に1行空きを用意しなさい、強調部分は太字で文字色を赤にしなさい、といった感じです。なので、予め HTML 文書に見出し要素とか段落要素とかが存在しないといけません

テーブルレイアウトをやっている人のほとんどは、見出し要素も段落要素も使っていないんですね。そんなもの使っても、自分が期待する見た目にならないから。見た目さえそれっぽければいいということで、改行とか font 要素とかばっかり使っているわけなんです。

ここで問題になるのは、「こういう見た目なら見出しだ」といった統一ルールがないことです。製作者のセンスによって、見出しは太字だったりそうじゃなかったりします。人間はそれでもなんとなく判読できてしまいますが、自動認識は現状では不可能といっていい。だから、テーブルレイアウトされた文書を CSS を正しく使った文書に自動変換することはできません。

そもそも、HTML はかなり文書構造の構成要素の種類を絞り込んでいます。段落要素は p 要素ひとつしかないんです。この段落は前後に10行空きにしよう、こっちは3行空きだ、みたいな、こまかな区分けは基本的にはできません。class 属性で区別してそれぞれにスタイルを指定すれば話は別ですが、それだって製作者スタイルを無視されたら意味のない区別になってしまうのです。HTML は非常に制約の多い言語で、微妙な差異を表現するのには向いていないのです。

つまり、仮に見た目から要素を自動で認識できたとしても、HTML の制約上、完全な再現は不可能なのです。侍魂フィルターなどと比較して CSS デザインへの自動変換が技術的に困難である理由は、変化が許容されないという点にあります。

このあたりの問題を私なりにまとめたのが"いろは"の先のCSS 第2回です。CSS 解説の部分は読み飛ばして構いませんから、講義と FAQ だけはぜひご一読ください。

テーブルレイアウトの是非

そもそも私が「テーブルレイアウトをする輩は腹を切って死ぬべきだ」と思っているのかというと、そんなことはありません。CSS を使うこと自体には、あまり積極的な意味がありません。CSSを使うわけに書いたことですが、HTML を正しく使うことと、お望みのデザインを実現することを両立させるためには、CSS を使うしかないという話なんです。

逆にいって、HTML を正しく使うことに興味がないのなら、テーブルレイアウトの方が多くの環境で表示が大崩れしないという点で優れています。またブラウザのデフォルトスタイルで満足できるなら、やっぱり CSS なんて使う必要はありません。

そういうわけですから、ブログ神と呼ばれる平田大治さんのブログのように、非常にいい加減な HTML 文書に CSS を適用するのはくだらないと思います。見た目さえそれっぽければいい発想はテーブルレイアウトとまったく変わりなく、それでいて狙い通りに表示される環境がテーブルレイアウトの場合よりも狭いわけです。一体、何のために CSS を使っているのだか理解できません。

重要なのは HTML をきちんと記述することなのであって、CSS を使うことじゃないんです。ところが、CSS を使うことにしか注目なさらない方が多いんですね。でも、ただ CSS を使うだけならテーブルレイアウトの方がマシだとさえいえるんです。だから、HTML の勉強が面倒だということであれば、CSS も使わないでいいと思います。そして私は、HTML の考え方を理解できる人はそんなに多くないと思っております。

というわけで、結論としては、別にテーブルレイアウトでいいんじゃないの、ということになります。

余談:私が HPB を使わなくなってしまったわけ

私も長らくホームページビルダー(HPB)を使っていました。けれども、テーブルレイアウトをやめてしまったら、かえって HPB を使う方が面倒かな、と思うようになったんです。HTML エディタのカスタマイズを進めたこともあり、いつの間にか HPB を使わなくなっていました。

HTML を正しく使っていけば、マークアップは非常に単純になります。けれども、HPB はその単純なマークアップが割と面倒くさいように思います。範囲選択して Ctrl+P とすると p 要素の開始タグと終了タグが挿入される、とかそういった環境を構築してしまうと、プルダウンメニューから「標準」を選ぶとか、そういった作業が非常に面倒なんですよね。

追記:2004年5月1日

必読の参考記事。

Information