Web標準に進路を取れ 第5回「テーブルレイアウトは罪なのか」
2006-03-21 Tue[Web制作]
こんぬつば。Web屋のサルサです。
えーと…。
「Web屋のサルサです」と「おサルのかごやです」ってなんか似てますね。似てませんか。語感とかほら。似てませんかそーですか。
くだらんことはさておき、約4ヶ月ぶりのWeb標準関連の記事です。
半月ほど前にWeb屋は時給アップの夢を見るか？という記事を書いた際、まるちさんから次のようなコメントをいただいたのでございます。
私はいまだにテーブルレイアウトを多用しております。
が、やはりテーブルレイアウトは今後廃れて行く一方なのでしょうか。やはり完全スタイルシートレイアウトが望ましいのでしょうか。salsaさんの率直なご意見をお聞かせ願えればと思います。
まず先にお答えしておきます。
どっちもあり。
もちろん条件は付きます。
「自分らをとりまく、ブラウザ環境が劇的に変化しない限り」…、どっちもあり。スタイルシート・Web標準推進派の方の記事を見ると、テーブルレイアウトは「悪」くらいのニュアンスで書かれていたりします。が、その言葉を借りるならテーブルレイアウトは「必要悪」である、と。逆に、スタイルシートレイアウトの方向へ進むのもアリだよと。
私もまだ思い悩んでいるところは多々ありますが、自分のわかるところで、今回はテーブルレイアウト寄りの考えを書いていこうと思います。なお便宜上、テーブルタグを使ってページを組むのを「テーブルレイアウト」、divタグ等を用いて、見ばをほとんどスタイルシートで定義するのを「スタイルシートレイアウト」（以下CSSレイアウト）とここでは呼んでおきます。
テーブルレイアウトとCSSレイアウト
| ヘッダ部分 | |
| メニュー | 本文 |
| フッタ部分 | |
テーブルレイアウトとはテーブルタグを、左のようにセルを切ってレイアウトするもの。そもそもはテーブルタグは表に使われるものであって、レイアウト目的で使うべきではないという意見はごもっともなものの、きっちり幅指定や余白指定ができてブラウザ依存しにくいことから、企業サイトはもとよりいろいろなサイトに使われておりました。いや、今でも立派に使われています。
対してCSSレイアウトは、上と同じレイアウトをHTML（XHTML）＋CSSで表現するもの。こんな感じです。記述は一例として適当に書いてるんで、アテにしたり突っ込みいれたりしないでくださいね(笑)。
【HTML】
<div id="header">
<h1>毎日考ブログ（ヘッダ部分）</h1>
</div>
<div id="main">
<div class="menu">メニュー部分</div>
<div class="contents">本文</div>
</div>
<div id="futter">フッタ部分</div>
【CSS】
div#header {width: 700px; background-color: #69c;}
div#main {width: 700px; background-color: #fff;}
div#main div.menu {float: left; width:200px;}
div#main div.contents {margin: 0 0 0 210px;}
div#futter {clear: left;}
そもそも、その時代にテーブルタグを使ってレイアウトしていたのは、HTMLのタグにレイアウトという概念を持つタグがなかったから（一部の独自タグは除く）。表以外の目的にテーブルタグを使うなんてケシカラン！という議論は前々からあったけれど、だったらそういう、ページ構造を定義できるタグを作ればよかったんだよ初めから！と思ってしまいます。
ブログとCSSレイアウト
最近では立派に市民権を獲得したブログ、あれは立派にCSSレイアウト（一部のサービスを除く）ですね。HTML側では構造くらいしか記述していないから、HTMLをちょっとかじっていた人がテンプレートをいじろうと思うと、やれXHTMLだの、CSSファイルだの、いったいどこをいじれば意図することができるのかわからなーい！ ちょっといじるとレイアウトが崩れてしまうし…となってしまったりするのよね。
また、ブログを利用している方で、ページがHTMLかXHTMLかを意識されている方はそう多くないと思います。XHTML形式でも、管理画面の入力フォームから記事を投稿する際、意識してXHTMLのタグを使っているという方も多くないでしょう。ま、今のXHTML1.0ではそれでも表示されてしまうし、これもひとつのハイブリッドなのだろうね。
また、自分から見るとへえ、すごいと驚かされることなんですが、最近ブログを始め、ブログのテンプレートをいじり始めた方の中には、逆にテーブルレイアウトがまったくわからない方もいらっしゃるといいます。確かに、divタグで囲んで構造だけ書いてしまい、位置やらなにやらをスタイルシートで記述する方法というのは、そこから入った人にとってはそう難しくないことなんだろうな。テンプレートも数多く配布されているしね。ほとんどがCSSで定義できてしまうから、フォントタグも、さまざまな属性も知る必要はないし。…とまぁ、これは脱線。
テーブルレイアウトは悪なのか？
少し前にはテーブルタグでのレイアウトが一般的だった多くのサイトでも、ここに来てCSSレイアウトに移行する動きが顕著になってきつつあります。ありますが、ここ1年か2年でテーブルレイアウトは姿を消すのかと訊かれれば、答えはノーです。ひとつは、CSSの各ブラウザの解釈がマチマチだから。もうひとつは、決定的に下位互換性がないから。廃止になるブラウザや古いバージョンになったブラウザが、その日から使えなくなるなんてこたぁ無いですもんね。畜生。（こら）
ここでいう下位互換性というのは「読めない・表示されない」ということではなく、同じような見ばを提供できるか否かということですよ。まあね、それを考えていたら先に進めないよというのも考えとしてはアリ。Web標準では、「最新ブラウザ以外、通常ブラウザ以外、もしくはパソコン以外、スタイルシートを読み込めない環境でもそれなりに情報が得られる」というのが前提…と、前に自分の記事でも書いておりますし。
けど、音声ブラウザやテキストブラウザや携帯などはともかく、CSSをうまく解釈してくれない、バージョンの低いブラウザというのは意外なほど使われているもの。テキスト情報だけ見られても、画像は見られても、なにこの崩れたページ？
あーもぅわかりましたよ、テーブルでガチガチに組んだろう！
ほれ動けんだろう。うひひひ。さぁどう料理してやｒ（ヤケクソ）
…哀しいけど、これもWeb屋なのよね。
音声ブラウザやテキストブラウザでも、テーブルレイアウトしてあると読まなかったり表示できなかったりするわけではありません。セルの順番に読まれ、もしくは表示されるだけです。ものすごく極悪非道な組み方をされているのでなければ、これはこれでアリだと思います。
Webの主役は誰なんだ
こうなると、結局どっちで組めばいいのよってなことになってきますね。
ここでひとつ問題なのは、ページを見るのは誰なのよ？ってこと。
一方は、なんとか勉強して、CSSレイアウトで完膚無きまでに緻密に組まれ、ほぼ、どの環境でも同じような見ばで閲覧できるページ。一方は古くからのテーブルレイアウトでストリクトに組まれ、セルの順番なんかも考慮して書かれた、同じくブラウザ依存をしないページ。
あえて、Web屋としてではなく、一個人として言うと。
閲覧者にとっては、読めれば同じじゃないですか？
個人的には、CSSレイアウトで組んでいる人の全員が、Web標準本来の目的を理解してやっているのかは疑問です。Web標準はスタイルシートだから。テーブルレイアウトなんて古いから。でもって、div、div、divで入れ子のオンパレード、それこそ「DIV厨」と呼ばれてしまうわけよ（私も言われるかもしれん）。どれだけCSSで無駄なく組むかみたいな、目的と手段を取り違える人が出てくるわけですよ。そういう人に限って、とんでもなくフォントが小さかったりするわけよ。意味ないのよ。それは単なるエゴ、自己満足ですよ。
…って、なんかバカにしたような言いぐさになってしまったけど、私なんかはそれが職業だし、一つの技術を追求しようとするのは悪いことではなく、分からないではないんですよ。それに読み上げリーダーだってテキストブラウザだって昔からあったものだけど、CSSレイアウトの方がより表示はスムーズだったりする、それは事実ですから。なんだか、逆行した意見のようで言い訳をしたためてみるわけですけど(笑)。
でもさ。
まず「コンテンツありき」じゃない。
何を見てもらうかが大前提じゃない。
意地悪くソースを見て「あ、こいつdiv厨だ」「今さらテーブルかよ」なんて思っているのは、そういう記事が目立って多いように見えても実はほんのほんのほんのほんの一握りの人であって、ほとんどの人間はあなたの文章を読みに来ているんだから。（もちろん、それがCSSレイアウトを極めるとかいうコンテンツなら、この限りではないですから）
スタイルシートで組まれていようが、テーブルタグを使って組まれていようが、その先に閲覧者が見えているかいないか。どう組むかというのはあくまでも「手段」なんだもん。これって、すごく大切なことだと私は思うんです。
ハイブリッドレイアウト
最後に、これについても触れておきます。
下位互換性などの理由から、テーブルレイアウトとCSSレイアウトを併用するわけです。交配種ですね。苦肉の策というわけじゃないけれど、これが今のところ一番現実的ではないかなと思いますね。
繰り返すようですが、なんだかんだ言って、実際仕事でページを作る場合にどうしようもなくテーブルレイアウトせざるを得ない場合というのはありますもん。それが「標準化」という見地から、魔女狩りのように忌み嫌われてしまうのであれば、それはあまりに実際を知らないお役所仕事ってやつです。
テーブル本体やセルそれぞれに指定していた属性を一気にCSSで指定できるし、ボーダーを出すための余分な入れ子を作らなくてよくなるかもしれないですし。もちろんCSSが絡むので、表示確認はより必須になりますけどね。詳しくは、下記の記事をお読みください。
長々書いてきましたが…
まるちさん、こんなんで答えになったかなあ？
へっぽこですみません。所詮へたれコーダーの言うことですから(笑)。
さてと、舌の根の乾かぬうちに次回、第6回は「CSSレイアウトの利点」を予定しておきます(笑)。
そいではまた〜
<< ファミレス23時「振り込め詐欺」 | main | シェルフに見る暮らし臭 >>
同じカテゴリの新着記事
- こんな環境で仕事してますの話 (2010-04-23)
- CSSエディタのCSSEditを愛用してます。 (2009-04-21)
- 非対応の環境の方に謝ってみる。 (2009-03-31)
- FeedBurner、ある意味諦める／フィード購読者数の現状 (2009-03-29)
- 春だからおブログの衣替えをしましたの。 (2009-03-26)
- Internet Explorer6とWeb屋とツレヅレ (2009-03-25)
- Yahoo!サイトエクスプローラーのカスタム検索が意外によいかもしれない (2009-03-12)
- 見ているだけでセンスが良くなる気がする海外Webデザイン系サイト5つ (2009-03-11)
- 会社生活における自分流LifeHack (2009-02-23)
- 「一万円キッチリ買いまショー」再び、Web本とカメラ本 (2009-02-13)
