再考・HTML

再考・HTMLの目次

簡単な？HTML

　HTMLはたしかに簡単だけれど、本当に簡単だと思ってるなら、考えを改めねばならない。
　簡単なのは「タグを書く」ことであって、大概はその論理構造まで及んでないからだ。HTMLは文書の構造を決めるものであって、間違っても飾りつけをしたり、タグで挟むことではない。
　もしその辺まで考えて簡単だと思うのなら、このコンテンツは見るだけ無駄である。

　「Transitional？Strict？なにそれ？」
　そんな人は知っておかないといけない。本当のHTMLとは、そんなに甘くないこと。ただ単に、ブラウザの強力な修正能力に抱っこされているだけってこと。
　なによりもまず、それを知っておかないといけない。
　もしブラウザがエラーを修正してくれなかったら、世の中から「ホームページ」が駆逐されて、さぞかしストレスのないWebサーフィンができるだろう。

　えらそうなことを言ってしまったが、siteCTSも間違いなく抱っこされている一ページだ。それこそ「作成ソフトの吐き出す汚いソースに比べればマシ」という程度であり、文法ミスを見つけることなど実にたやすい。それどころか、HTMLに「構造の取り決め」という本来の仕事を、まったくやらせていない。
　今や誰でも気軽に作れるWebページは、本当のところ、俺みたいな素人がおいそれと触っていいものじゃないのかもしれない。
　それはわかっちゃいるけど、「正しいHTML」……とりわけ最新であるHTML4.01は、かなり難しいのだ。

HTML4.01、とは

　これまで適当にHTMLを組んできた俺にとって、HTML4.01の仕様は、比較的ゆるいTransitionalでも厳しい。Strictになると文法も厳密に決まってて、些細なミスも許してくれない。（表示されない、というわけでもないけど）
　「ネスケ4.7でもそれなりに表示できるから、まだマシな方でしょ」
　…なんて甘い考えでは、とてもやってらんない代物である。
　具体例を列挙してみよう。

　ふざけんな阿呆！
　「使えない」には「非推奨」も含まれるが、俺と同じように適当に組んでる人は、そう思ったに違いない。なにせ<FONT>を使うな、と言うのである。無茶な話だとは思わないか。これではサイズも色も変えられない。
　…なんでこんな基本的とも思える重要タグを廃止するのだろう。それには、もちろん理由がある。

HTML、とは

　この項は長いので気合を入れないといけない。一番大事な部分。
　まず、HTMLは「文書の論理構造を示すマークアップ言語」である。それは俺もだいぶ（？）昔から知っていた。（知っていたにもかかわらず、ほとんど無視していた）

　…など、本来は文書の構造以外に、必要なものは一切ない。つまり、見た目の装飾がないのだ。
　たとえば見出しのセル<TH>は太字でセンタリングされるし、引用を示す<BLOCKQUOTE>は前後に改行が空いてインデントされるけれど、これらほとんどは、単に「IEとネスケがそういう装飾をつけてるだけ」に過ぎない。

　<FONT>が廃止の方向に向かっているのは、この辺に理由がある。

　HTMLの「M」であるマークアップは「目印を付ける」ことで、タグとは「荷札」、つまり「目印そのもの」のことである。後はブラウザなりなんなりがそれを解釈して表示したりする。
　ここで注意したいのは、タグには本来「意味」しかなくて、「表示効果」は一切ないってことだ。
　たとえば、<P>の荷札には「段落」としか書いてない。裏を見ても透かして見ても、「1行空ける」とはどこにも書いてない。ただ、段落同士は空いているべきだから、ほとんどのブラウザがそういう表示をしているだけ。
　それなのに、「1行空けるタグ」とか「改行2個分」など、本末転倒なことを書く解説書のなんと多いことか。

　HTMLは、もともと「どんな環境でも再生可能なデータ形式があったらいいよね」っていう理想の元に生まれた。どんな環境でも、とは、OSの違いなんて狭い話じゃない。どんな環境でもだ。それには携帯の小さい画面、音声ブラウザ、点字ブラウザ、そして「印刷」も余裕で含まれる。ドリームキャストもだ。ワープロ書院もだ。素晴らしい理想じゃないか。
　なのに、時代はそれを許さなかった。

　<P>には「段落」としか書いてない。決して「1行空けるタグ」じゃない。じゃあ音声ブラウザで再生する時は、どうやって1行空ければいいのだ。「段落」とだけ書いてあれば、普通のブラウザでは1行空けて、音声ブラウザでは間を置くなり「ここから段落です」と言うなり、形態に適した自由な表現ができる。性能の良いブラウザであれば、ユーザーが自分で指定することもできるだろう。
　それが「本当のHTML」なのである。必要なのは「意味」であって、決して「表示効果」ではない。

　<B>と<STRONG>を比べてみよう。このふたつは、IEとネスケ、どちらでも太字になるので、事実上は同じだ。しかし、意味は大きく違う。<B>が「太字にする」のであるのに対し、<STRONG>は「強調する」である。後者は「どう強調するか」が決められてなくて、ブラウザに一任されている。
　ブラウザは形態から性能まで多種多様だから、どちらがHTMLの理想に沿ったものか、問うまでもないだろう。

　<FONT>に話を戻す。<FONT>は、フォントのサイズ・色・書体を変えるタグだ。だけど、たとえばLynxというブラウザはサイズも色も書体も変えられないので、<FONT>を綺麗に無視する。
　もし作者が「ここはチョー大事だからとにかく大きくしたい！」と思って<FONT size="7" color="red">とやっても、まったく伝わらない。<STRONG>にしてくれれば、Lynxは頑張って他の字とは違う色にしてくれるので、そこにどういう意味があるのか伝わるのに。
　もうわかるだろうけど、<FONT>はHTMLの理想に真っ向から対立しているのだ。

　<FONT>はNetscapeの独自拡張として生まれ、HTML3.2で正式なタグとして認められたけど、当時は賛成派と反対派で真っ二つだったようだ。それは「HTMLを理解しているか」のわかりやすい見分け方だったに違いない。そして、時代の流れに逆らえず<FONT>は採用されてしまった…といったところだろうか。（あくまで俺の想像）

　そしてHTML4.01。道を踏み外した理想を取り返すべく、<FONT>を代表とした「見た目を指定するタグ」は、ほとんど「非推奨」となった。「本当のHTML4.01」であるStrictでは、フレームも廃止されている。忘れちゃならないけど、種類で勘定すれば、フレームを表現できないブラウザの方が圧倒的に多い。
　フレームと同時に<A>のtarget属性もなくなり、新しいウィンドウで開くことができなくなった。言うまでもなく、新しいウィンドウで開けないブラウザが存在するからだ。それに、それができるほとんどのブラウザでは、右クリックなどから「新しいウィンドウ」を選べる。要するに、必要ないということである。

　そんな感じで、HTML4.01はかなり理想に近づいていると思う。背景には、ブラウザの高性能化とスタイルシートの普及がある。
　だが、いくら仕様が良くできていても、webmasterが従わないのではまったく意味がない。

　おさらいをすると、HTMLでは「見た目」を指定できるべきではなく、役目はあくまでも「文書の構造を決めること」にある。強調は「見た目」に思えるけど、「どう強調するか」を決めないのだ。
　ここで区切るから、水平線<HR>を置く。
　…はい、そこで終わり。必要なのは「区切りとして<HR>を置く」という論理（存在の意味）であって、幅とか太さとか色とか、見た目の要素はHTMLの仕事じゃない。つまり、テーブルを駆使しての凝ったレイアウトどころか、背景画像のひとつも必要ないのである。
　とにかく、見た目を直接指定するようなものは、基本的に全部ダメである。
　それが理解できないと、次へ進めない。

スタイルシート、とは

　しかし、いくら論理構造が云々とは言っても、それを真に受けていては、全世界のページが「真っ白い画面に黒い文字」になってしまう。さすがにそんな馬鹿なことはなく、「見た目」を専門に担当するエキスパートがいる。
　それが「スタイルシート」だ。彼は、そのために生まれた。（ちなみに見た目以外のことも少しできる）

　誰でも「自分の意図通りに表示させたい」と思うものだが、それをHTMLだけで実現させようと思っちゃいけない。そんなの元から不可能だからだ。テーブルや<FONT>等の装飾タグを使ってレイアウトを施すのは、テクニックでもなんでもない。それどころか、HTML4.01でははっきり「邪道」と言われてしまうのである。厳しいが、事実その通りなのだ。
　最近のオーサリングツール（ビルダーとか）はどれも高性能で、HTMLだけでとっても凝ったレイアウトを作れてしまう。ゴミの中のゴミ、といったところだろうか。厳しいが、事実その通りなのだ。

　先の例を繰り返すが、もし作者が「ここはチョー大事だからとにかく大きくしたい！」と思って<FONT size="7" color="red">とやっても、テキストブラウザのLynxではまったく伝わらない。<STRONG>にしてくれれば伝わる。
　しかし、だからといって安直に<STRONG>にしても、今度はIEやネスケでは太字になるだけで、全然目立たなくなる。あちらを立てればこちらが立たず。
　この葛藤を解決するのがスタイルシート。<STRONG>に設定すれば、フォントサイズや色、さらに背景や枠線など、好きなだけ強調できる。そしてLynxでスタイルシートが無視されても、<STRONG>がちゃんと強調表示にしてくれる。

　このページは、<FONT>をひとつも使っていない。<B>も、意味によって<STRONG>と使い分けている。完璧ではないけど、「だいぶ正しいHTML」で書かれている。W3Cのチェック[R]より厳しいAnother HTML-lint[A]でも、98点という自分もびっくりの数字が出ている。（なにせ現在のトップページはマイナス67点！）
　それでも、結構頑張って「見た目」を作っている。レイアウト的には凝っていない（というか凝れない）が、IE5.5やネスケ6なら、それなりに華やかである。それでいて、ネスケ4.7、Opera6、Lynx、ワープロ書院でも充分な表示ができる。確認はしてないが、ドリームキャストでも表示できるだろう。
　制約の多い「正しいHTML」でも、こんな感じであれこれ遊ぶことができる。それもひとえにスタイルシートのおかげ、ということだ。

　スタイルシートは、完全にHTMLと分業している。というか、タグに装飾を与えるのが仕事である。ゆえに文書の論理構造は決められない。
　その代わり、見た目に関してはHTMLの比ではない。なんでもできる。新しいブラウザだと、JavaScriptと併せて珍妙な仕掛けも施せる。「どのタグをどうする」しかない（HTMLより簡単！）のに、わかってくると奥の深さに驚かされる。指定を効率化させるために様々な方法が存在し、まるでパズルのようにも思える。

　HTMLだけでも大変だが、これからはスタイルシートも憶えなくてはならない。少なくとも、ブラウザ戦争が終わりつつある今、見た目系の新しいタグは二度と出てこない。長らくお世話になった<FONT>も、すでに過去のものである。
　そうして、次々<FONT>を吐き出すオーサリングツールは、ますます役に立たなくなる。

　スタイルシートは、拡張機能でも特別な言語でもない。「これからはスタイルシートの時代」と言うけど、「これからは」は不要だ。俺が言うなら、「HTMLとスタイルシートを両立しないといけない時代」である。

スタイルシートを使うことの恩恵

　「見た目」をすべてスタイルシートに任せることで、様々なメリットもある。もっとも大きいのはメンテナンスの合理化で、たとえばこのページの緑の見出しは

　…としか書いてない。色や枠線といった「見た目」は、全部スタイルシートによる。同時に、<H2>に設定した部分をたった1ヵ所修正するだけで、すべてが同時に変わる。また、IE5とネスケ4ではまったく違う表示になる。（これはJavaScriptを併用）
　ただし、この恩恵を受けるためには、正しいHTMLでちゃんとした文書構造を作らないといけない。これまでみたいに行きあたりばったりだと、「1回しか使わないクラス」がぞろぞろ並ぶだけで、全然効率的にならない。
　正しいスタイルシートは、正しいHTMLから。
　あくまでも主役はHTMLなのである。

見る人にも愛の手を。

　他、「構造」と「見た目」を分離することで、見る人にも恩恵がある。IEではインターネットオプションのユーザー補助で、自分用のスタイルシートを適用できる。これはOperaというブラウザにもある機能で、じきに増えてくるはずだ。ネスケ6にないのが不思議なくらい。
　まぁ自分で作らないといけないので、使ってる人は少ないだろうけど、これはかなり便利な機能だ。俺も愛用している。
　簡単な例を挙げると、メモ帳に

　とだけ書いて適当な名前で保存し、ユーザー補助でこれを適用してみよう。ちなみに!importantは「これを最優先で採用しなさい」という指定。（結果、俺の指定が無視される）
　結果の画面写真[S]を見てもわかる通り、この機能を使うことで自分の読みやすい環境を整えることができる。

　しかしながら、でたらめなHTMLばかりがはびこる現在、適用すると読めなくなるWebページも多い。その都度にいちいち切り替えないといけないので、かなり面倒くさい。是非とも改善を望みたいところだ。
　果たして、Microsoftがワンタッチでオンオフできる使い勝手を実現してくれるのと、どっちが早いだろうか…（Operaはすでに実現しているというのに…）

でも…

　とはいえ、ブラウザによるスタイルシートの対応状況は、まだまだお寒い。いくら見た目装飾はスタイルシートでやれっても、そうすると非対応ブラウザがさらにお寒くなってしまう。あまつさえ、ネスケ4では下手な指定をすると簡単に落ちてくれる。（これが大問題なのだが）
　webmasterはすべての環境を考えに入れて作らねばならず、難しさに拍車をかけているのが実情だ。

　色を説明する時は、確実に色をつけないといけない。音声ブラウザでは再現できなくとも、「スタイルシートに対応してない」程度の理由で黒に化けるのでは困る。あるいは一部分だけフォントを大きくしないといけない時など、止むを得ない場合だってある。まだまだ<FONT>に引退してもらっては困るのが現状だ。

　ただ、これだけは言える。
　HTMLさえしっかりしていれば、どんな環境でも読めなくなることはない。
　たとえばこのページをスタイルシートなしで見てみる[O]と、だいぶお寒い画面になる。しかし、必要にして充分な表示が保障されている。音声ブラウザ等ではどうなるか知らないが、「なにがなんだかわからない」というようなことにはならないはずだ。
　文書構造（HTML）と見た目（スタイルシート）を分離することの真の恩恵が、ここにある。

このページのスタイルシート

　このページの場合、スタイルシートはすべて外部ファイルに入れてある。さらに、高度なレベル2版と、基本属性のみのレベル1版のふたつを用意し、JavaScriptでブラウザを見分けて、適した方を読みこませる。レベル2版はIE5以降とネスケ6、それとOpera6。レベル1版はIE4とネスケ4。
　JavaScriptでスタイルシートを書き出すのはあまり格好いい方法じゃないけど、ブラウザを確実に選ぶには一番早い方法だ。（ステータスバーに文字を流すよりゃ百倍も有意義）
　よって、IE5でもJavaScriptをOFFにすると寂しい画面が拝める。好んでそうする人は、見た目より3安（安心、安全、安定。今考えた）の方が大事なので、問題ないと判断している。

　また、IE3やネスケ3は実装に問題がありすぎるため、一切実行しない。その他のブラウザもどうなるかわからんので、一切実行しない。純粋なHTMLだけでの表示は寒いものだが、しかし、読む分にはまったく問題ない。文書の構造、段落の構成、俺が強調したいところ、伝えたいところはちゃんと伝わるだろう。
　「HTMLは文書の論理構造を決めるもの」とは、そういうことなのだ。
　※ただ、siteCTSはOSを「Windowsか否か」しか判別していないので、旧いWindowsのIE5でどうなるかは不明。これはJavaScriptの甘さと、ちゃんと実行できないIE5が悪いのであり、HTMLやスタイルシートのせいではない。

　だけど、正直、いくつものブラウザのことを考えてHTMLとスタイルシートを組むのは、非常に疲れる作業である。ツールに任せっきりの人には信じられない所業に感じる。
　でも俺は思うのだ。コンピュータはそんなに甘い世界じゃないと。プログラムが一字のミスも許さないように、HTMLにも厳格な規則がある。プログラムにも良い書き方と悪い書き方があるように、HTMLも「動きゃいいじゃん」ではすまされない。
　仮に自分がソフトを作ったとして、エラーでバカスカ落ちるような欠陥品は恥ずかしくて人に見せられないはずだ。その気持ちを、HTMLに対しても持つべきである。
　そこまでやってこそ、俺は胸を張って言うことができる。
　「見た目の華やかさが欲しいなら、JavaScript・スタイルシート対応ブラウザでご覧ください。」

アクセシビリティ、とは

　話題に上ることがだんだん増えてきた「アクセシビリティ」なるもの。どれだけアクセスに自由度があるか、言い換えればどんな環境にも対応できるか、ひとつの目安のことである。
　siteCTSのアクセシビリティは、「JavaScriptやスタイルシート非対応ブラウザでもそれなりに対応！えっへん！」とか、そんな次元である。
　目の見えない人にとって、<NOSCRIPT>がなんの役に立つ？　世の中には、音声読み上げブラウザや点字ブラウザなんてのもあるのに。
　ひらたく言うと、お話にならないレベル。

　HTML4.01は、すべての環境に対応できるように、いろんな工夫がしてある。そういう人達に優しい仕様となっている。それがゆえに、面倒くさい仕様である。
　スタイルシートも、レベル2と称して様々な新属性が登場し、ブラウザの対応が追いついていないほどだ。

　目の見えない人がsiteCTSにやって来る確率は、万にひとつもないだろう。でも、ゼロじゃない。
　明日、俺が仕事中の事故で失明する確率も、絶対にゼロではない。
　そして、自分が追い出される身になった時、レイアウト目的のテーブルがどれだけの混乱を招くか、インデント目的の<BLOCKQUOTE>がどれだけの障害になるか、はっきりわかることだろう。
　とはいえ、そういう特殊ブラウザのことをよく知らないので、せめて「ちょっとわかりにくいけど我慢してね」くらいは確保したいと思う。
　でないと、堂々と文句を言えないから。

　なにより、「五体満足じゃない奴に用はない。帰れ帰れ」と言う度胸は、俺にはちょっと持てない。

余談

　実はこの「再考・HTML」、事実（siteCTSの現状）とあまりに食い違ってるので、書きあがった後に封印された。実際にリンクを切る作業も行われた。
　それでもやっぱり載せちゃったあたり、「せっかく書いたんだし…」という貧乏根性の他に、相応の覚悟もあると意訳してくれい。