W3J.org

HTMLとテーブルレイアウト

テーブルレイアウトというテクニックがあります。これは、IEやNetscapeといったグラフィカルブラウザで表示されることを想定して、レイアウト情報を含めたHTML文書を提供することによって実現されています。レイアウト情報というのは何かというと、大雑把にいえばtable要素、tr要素、td要素といった、「表」を構造として記述するための要素を、レイアウトのために利用したタグ群のことといえます。

HTMLは構造を定義するためのマークアップ言語です。コンテンツの内容には、見出しとされる文字列があったり、本文とおぼしき文章があったり、引用と考えられる段落があったりするわけですが、日本語で書かれたものであればふつう日本語を理解できる人なら、それらがどういう要素として存在しているのかは、読めばわかると思います。しかし自然言語を理解できないブラウザやその他のアプリケーションにとっては、どこからどこが見出しなのかとかを示すタグが入っていることによって、「ああ、ここら辺が見出しなわけね。アイシーアイシー」などと嬉しがって理解してくれるわけなのです。

グラフィカルブラウザは、見出し要素とされる文字列なりを表示するときに、見栄えを決定する何らかの情報に基づいて表示を行います。そのページを提供した制作者が用意したものがあれば、まずそれを利用します。さらにそのページを見に来た閲覧者が用意したものがあれば、制作者の用意したもので定義されていない箇所についてはそれを利用します。制作者も閲覧者も用意しなかった要素の見栄えは、ブラウザ自身が備えているデフォルトスタイルというものを利用します。そうやって、見栄えの定義にしたがって、何がしのコンテンツを表示しているわけです。で、HTML文書の見栄えを決定するために利用するのがCSSであるというわけです。

ちょっとここで話を最初に戻すと、少し矛盾があるような気がします。テーブルレイアウトされたHTML文書には、HTML自体にレイアウト情報といういわゆる外観や見栄えといったものが一緒くたにされているとありますので。とはいえ、何によってそのレイアウト情報を含めているかというのは、先にも書いたとおりtable要素という文書構造のひとつである要素を、「表」のためではなくレイアウトのために使っているから、一緒くたに出来てしまっているのです。

まあ早い話が、「表」でないものに「表」という意味づけをしているということになりますから、よしんば文法が正しかったとしても、内実の伴わないHTML文書ということになります。真の意味での「表」が何処なのか、傍目に判別できないだけでなく、そうなるとほかの要素のマークアップについても正しいかどうか信用できないというか。HTMLとCSSというものの存在意義とかいう辺りから考えますと、テーブルレイアウトなHTML文書は、HTML文書の名を騙った何か任意のモノというような勢いであると思われます。

とはいえ、業務の現場においては、正直いってテーブルレイアウトもやむを得ないだろうなと思うこともしばしばです。

なぜやむを得ないのか？

いわゆるウェブデザイナーなどと呼ばれる職業があります。実際にはHTMLのマークアップばかりしている日常を送っていたとしても、名刺にはウェブデザイナーと書いてあるかもしれません。ざっくりといえば「ウェブ屋」とかいう感じですが。

職業ですからつまりウェブサイトを作ったりしてお金を頂いているわけで、プロなわけです。プロなのに、表でないものを表だと主張したりという嘘をマークアップしなければならないなんて悲しいのですが、プロだけに、時にはビジネスライクにいかねばならん場合もあるのです。

そんな場合とはどういう時なのでしょうか。というか、むしろ「時には」どころかいつもそうなんじゃないかと思うくらいの勢いで、そんな場合があります。つまり日常的にそんな場合です。

ウェブサイト制作の案件には、これはもちろん仕事なわけですから、定義された要件というものがあります。要件のレイヤーにもよりますが、具体的な要件には対象ブラウザというものが含まれています。この対象ブラウザというものに、「Netscape4.x」およびそれに相当する記述があったら……「今がそんな場合だ！」と。

Netscape4.xというブラウザは、CSSに対応しているブラウザなのですが、ちょっち困ってしまうくらいの対応具合です。うまく解釈できない指定を無視してくれるのなら良いのですが、がんばって無理やり解釈しようとするのか、要するにバグっているという状態で表示してくれたりします。W3Cの仕様で定められている通りにCSSが解釈されるのであれば、同じメディアならばどのブラウザでも同じレンダリングがされるはずなので、理想的にはCSSファイルというものはひとつで済んだりするのです。しかしこういったバグったブラウザがあると、そのバグをうまく回避するように小細工しなければならなくなり、各ブラウザごとに違うCSSを適用させたりとか、それはもう壮絶に面倒くさい事態に発展していったりするのです。そしてさらに、どうあがいても解釈してくれないCSSのプロパティなどがあるため、バグ回避の小細工によって信じられない表示になること自体は避けることができても、異なるブラウザで同じ外観を維持することが不可能なこともあります。

対象ブラウザという要件は、極論すれば、そこで列挙されるブラウザはいずれで見ても、同じ見栄えになることを前提とするような要件です。というわけで、Netscape4.xをはじめとするバグった対象ブラウザに含まれる時点で、CSSで外観をどうこうしようという目論見は崩れ去ってしまうのです。ちなみに崩れ去らないこともありえるとは思いますが、むしろ崩してしまったほうが安全だという経験則もあったり。

Netscapeのブラウザは、現在バージョン7.01というものが出ており、Netscape4.xというバージョンはかなり古いものです（Netscape4.8が出たのはそれほど古い話ではありませんが、以前のバージョンのバグフィクス版というようなものなので、基本的な動作に違いがありません）。それがどうしていまだに対象ブラウザの要件に残っているのか、これは謎としかいいようがありません。ブラウザのシェア率を統計している情報などを参照すると、Netscape4.xの利用率は非常に少なく、そういったシェア率のデータを頭から鵜呑みにしてしまうと、世の中みんなIE6とか、そんな感じなんじゃないかとさえ思えたりもするくらい、本当にNetscape4.xを常時利用している閲覧者は少ないものと思われます。Netscapeのサイトへ行っても、実際には存在しているのだけれども、Netscape4.xをダウンロードするためのリンクを探すのは困難を極めています。

IE3やMosaicなどの古い或いは以前のバージョンのブラウザは対象ブラウザの要件から外れていることに誰も疑問を投げかけません。しかしNetscape4.xというブラウザが要件に含まれていることが、疑問視されないのはどうしてなのでしょうね。まったくもって謎です。

「古いからといって見捨てる」とか、そういうつもりはまったく無いのです。外観を定義したCSSが読み取れなくても、コンテンツの内容を記したHTMLは読み取れるからです。同じ見栄えにしなければ見捨てることになるのであれば、Lynxなどのテキストブラウザは見捨てていることになりますし、ホームページリーダーのような読み上げブラウザを利用して、音声というかたちで情報を得ようとしている状況なんかは、もう眼中にないとかそういうことになってしまいます。

企業サイトなどには、ターゲットとしているユーザー層というものがあったり、その企業のブランド価値を示すものの一環としてサイトがあったりすることもあるため、主眼でない辺りを見捨てることが容認されていることもあるでしょう。容認というか、問題ないものと見なされているというか、それはそれでいいじゃんというか。

しかし企業の中でも公共性の高いものや、自治体など政府機関のたぐいであるとかのサイトであった場合は、特定環境を見捨てるというのは、どうかと思ったりもするわけです。これらには、可能な限り広く多くの人たちに、情報が伝達される必要性が求められるからです。

さまざまなブラウザで同じ見栄えを確保することは無理です。CSSで見栄えを制御する場合は、CSSに対応しているブラウザの間でも、CSS1が実装されているブラウザとCSS2が実装されているブラウザとで、多少の違いが出るでしょうし、またCSSに対応していないブラウザでは、明らかに違う見栄えとなることでしょう。一方、CSSではなくいわゆるテーブルレイアウトによる手法で見栄えを整えた場合でも、テーブルに対応していないブラウザもありますし、画像を利用できないブラウザもあったりするわけです。CSSで見栄えを整えているものを、CSSに対応していないブラウザで表示しても、そのコンテンツで書かれている情報は少なくとも伝わることが期待されます。しかしテーブルレイアウトに対応していることを前提とした記述の場合、テーブルや画像を利用できない環境で閲覧すると、書かれている情報も伝わらない可能性があります（もちろん問題なく伝わる可能性もあるのですが、ここではダメな場合の可能性を考慮したほうが有為といえます）。

Netscape4.xはそれほど使われているのか？

結論からいうと、はっきりいって使われていないか、Netscape4.xであることを自覚して使っているかということであると考えて問題ないでしょう。Win IE3やIE4、Mac IE4.5などは、往々にして要件から外されていたりしますが、Netscape4.xというのは要件にあります。使われていないというか、ようするに少数派のブラウザです。Netscape4.xでの見栄えを確保することによって、テーブルレイアウトという強引なマークアップが必要とされ、要素の内容が伝わりづらくなります。これは、外面的にはアクセシビリティの低下に起因するでしょう。また、これにより、実際に存在する要素とは関係なく、レイアウトなど見栄えを整える目的のために記述される要素が多分に含まれてしまいますから、内面的にもメンテナンシビリティの低下という弊害が出てきてしまいます。文書構造を記していくというHTMLの目的以外のことをやっていくと、ようするに見る人も作る人も幸せになれないということです。

とかいうことを、HTMLを書く担当者（弊社ではマークアップエンジニアと呼んでいます）のレベルで言っていても実際にはほとんど意味がなく、対象ブラウザには依然としてNetscape4.xが含まれています。

なぜかというと、ぶっちゃけた話、使っている人がほとんどいないけれども、Web業界には「バージョン4のブラウザ」という慣用句的なものが、過去に強く広まっていたことがあったから。もしくは、クライアント企業の担当者の方が愛用しているだとか、あるいはその企業の方針としてとかで、Netscape4.xが求められるからです。

まずは前者の理由について。「バージョン4のブラウザ」というのは、Win IE4とNetscape4.xのことです。ブラウザ戦争とかいっていた頃、Netscapeのシェアに対してIEが勢いを増しつつあり、このふたつが広く一般に使われているであろうと統計されていたときは、対象ブラウザを「バージョン4のブラウザ」として制作するのが、確かに流行っていたというか、半ば常識的に行われていたわけです。

その名残で、Netscape4.xという話がよく出てくることも往々にしてあるのです。クライアント企業の担当者の方が、その慣用句的なものを覚えていたり、それが今でも普通なことであると信じていたりするのかもしれません。

案件を受ける際にやりとりされる提案書のたぐいに、ちょろっと書かれた対象ブラウザのところ、ここにNetscape4.xという言葉が入っていないと、「Netscape4.xは対応しないんですか」という話になったりするというわけです。そして対応するということになって、いつしか実装仕様となってマークアップエンジニアの手元へ回ってくるのです。対象ブラウザについては、要件定義かそれより前の段階で話しておかないとダメですね。

そして後者の理由のほうですが、これは結構厄介というか、そりゃ自分がいつも使っているブラウザで、最適化されている表示が得られなかったら、面白くないですよね。その気持ちはとてもよくわかるのですが、クライアントのクライアント、つまりエンドユーザというか一般のお客様というか、その人たちのことを考えてみて欲しかったりするのです。クライアントのクライアントは、おそらくIE5以降やNetscape7などのブラウザを使って見に来るはずで、Netscape4.xでの表示がどうであろうと重要ではなかったりするものと思われます。だからというわけにもいかないのかもしれませんが、真の意味でのお客様が嬉しい実装にするのがスジなんじゃないかと思ったりするわけなのですが。

で、しつこく言いますが、「Netscape4.xなんてマジでみんな使ってないよ！」ということ。微塵もひとりたりとも使ってないとは言いませんが、気にするほど使われていないというかむしろ使われている比率的に考えると、w3mとかOperaとかのほうが多いんじゃないでしょうかってくらいなので。

だから、Netscape4.xではCSSを読み込ませないように細工してあげたうえで、CSSでデザインすることはまったく問題ないといえると思います。Netscape4.xで見ても、少なくとも書いてある情報は表示されるのだから。

テーブルレイアウトでアクセシビリティが低下する？

結論的にいうと、凶悪なテーブルレイアウトでない限り、それほど低下することはありません。ようするに、WCAG 1.0で仕方ないから認めている範囲のテーブルレイアウトであれば、まあいいんじゃないかと、そういうわけです。

HTML Techniques for Web Content Accessibility Guidelines 1.0の5.2 Tables for layoutには、次のように書かれています。

Authors should use style sheets for layout and positioning. However, when it is necessary to use a table for layout, the table must linearize in a readable order. When a table is linearized, the contents of the cells become a series of paragraphs (e.g., down the page) one after another. Cells should make sense when read in row order and should include structural elements (that create paragraphs, headings, lists, etc.) so the page makes sense after linearization.

これは早い話が「レイアウトにはテーブルじゃなくてCSSを使おうね。でもどうしても仕方なくテーブルを使うときは線形テーブルになるようにしようね」ということです。線形テーブルというのは、table要素、tr要素、td要素のそれぞれの開始タグと終了タグをばっさり削除しても、内容が順序よくつながるようなテーブルのことです。また、こういったテーブルでは、th要素やcaption要素など、真の意味での「表」を構造化するために利用される各要素を用いてはいけませんし、summary属性に、これはレイアウト用のテーブルであるということや、各セルの内容がどうなっているかの説明を記載する必要があります。

凶悪なテーブルレイアウトというのは、箇条書きのリストマークをそろえたいがためにテーブルを組んでみたりだとか、とある領域においてコンテンツをセンタリングしたいからという理由でテーブルを組んでみたりとか、そういったテーブルの使い方です。これらがなぜ凶悪なのかというと、線形化することが非常に難しいからというか実際無理でしょうし。

というわけで僕が主張するのであれば、「エリアをグリッドに沿わせるためにテーブルでレイアウトする」というのは、まあ良しとして、このエリア定義で用いたテーブルにネストするレイアウト用テーブルはダメとしたいわけで。

凶悪なテーブルレイアウトは明らかにアクセシビリティが低下します。アクセシビリティの状況をはかるのには、よく読み上げブラウザというものが用いられますが、ネストしたテーブルを、ホームページリーダーのテーブル読み上げモードで読み上げさせると、その凶悪さにうんざりします。summary属性がきちんと書かれていなかったりすると、何を読み上げているんだかさっぱりわからなくなったりもします。まあ、これは是非やってみていただければと。

読み上げブラウザのほかにも、読み上げ環境としてはスクリーンリーダーというものがあります。これを使う場合は、線形化したテーブルであっても、うまく内容が読み取れないかもしれません。スクリーンリーダーは画面全体において（あるいは特定領域において）左上から右下方向へ向かって読み上げていくという動作が基本だからです。これだと、CSSでレイアウトしていても、一見すると同じ結果になりそうではありますが、CSSの場合は、CSSを無効にすれば済みますし、メディアタイプによってCSSのレイアウトそのものを変えておくこともできますので、そういう意味では、やはりCSSのほうに一日の長があるといえるでしょう。テーブルを無効にできるブラウザもありますが、テーブルだけを無効にできても、HTMLに含まれてしまっているその他のレイアウト情報のすべてを無効にできるわけではありませんので、あまり意味がないと考えて良いと思われます。レイアウト情報のすべてをCSSに入れておけば、CSSを無効にするだけで、純粋にコンテンツの内容のみを受け取れるということになるわけです。

もっとも、CSSでレイアウトすればアクセシビリティが高まる、というわけではありません。前述の通り、ある程度それなりなテーブルレイアウトであっても、アクセシビリティを確保することはできます。HTML 4.01として妥当な文書であるというだけで、そうでない文書に比べると、アクセシビリティが高まると考えられるわけだからです。まあ、テーブルレイアウトは妥当な用法とはいえないという意味では、テーブルレイアウトだとアクセシビリティが低下するともいえますが。

CSSは難しい？

さて以上のことから、テーブルでレイアウトしてもCSSでレイアウトしても、見に来る人たちはどっちでレイアウトされているかは気づかないだろうし（どちらも表示される環境が多いから）、読み上げ環境なんかのことも考えるとCSSでレイアウトしたほうがイイ感じじゃないの？ということになるってことなんで、じゃあ早速CSSでやってみようよという話にもなるわけです。が、「テーブルレイアウトに比べて柔軟なデザインが出来ると聞いていたのに、全然そんなことないじゃないか」とか「逆にレイアウトしづらいよ」とか、そういう声が巷に溢れているかもしれません。これは本当にそうなのでしょうか。

というより、テーブルレイアウトするときのHTMLの書き方のつもりでマークアップするから、難しいというかやりづらくなってしまうのだと思われます。

テーブルレイアウトなHTML文書は、HTMLの中にレイアウト情報や見栄えの情報を含んでいます。ですから、コンテンツをマークアップするときに、もう見栄えのことも考えながらマークアップしていかなければならないのです。一方、CSSレイアウトなHTML文書をつくる時は、見栄え云々はさておき、ただひたすら、コンテンツの内容がどのような要素なのかをマークアップしていくだけなのです。そしてマークアップが終わったら、それぞれの要素がどのように表示されるかというスタイル定義をしていくという、こういう順序になります。そのため、作り方の手順に大きな違いがあるといえます。これが、やりづらさにつながっているのではないでしょうか。

コンテンツの内容を要素に合わせてマークアップするという作業は、ふつうに日本語というか自然言語を理解できてさえいれば、それほど難しいものではありません。ですから、むしろテーブルレイアウトを経験したことがない人のほうが、CSSでのレイアウトやデザインというものがやりやすいというか、すんなり入っていけるように思います。だって、WordなどのワープロソフトやQuarkとかのDTPソフトも、そうやって要素に見栄えをつくっていくわけですから。こっちのほうが素直だといえると思うんですがね。

というわけで、要素とその構造、そして見栄えとを切り分けてレイアウトやデザインしていくというやり方なわけですが、次の章でとりあえず実際にそうやっていくサマを、順を追って見ていくことにしましょう。