---------------- 以下コンテンツ部分 ----------------

テーブルレイアウトの良い点を探す旅


テーブルレイアウトとの出会い

テーブルレイアウトからCSSレイアウトに移行されはじめて早数年が経ちました。テーブルレイアウト主流の時代では、当時のブラウザではCSSの解釈が大幅に異なるためCSSでのレイアウトは現実的ではない、とまで思われていました。ネスケとか、MAC IEとかは確かに地獄的解釈をしてくれてました。まあ、そんな中、海外のニュースサイトがフルCSS化したり、個人サイトもいつの間にかCSS化していったりしたわけです。ワンソースマルチユース、正しいマークアップ、SEO、軽量化という風に押され、企業サイトでもチラホラ見かけるようになってきたかと思ったら、一気にCSSレイアウト以外は有り得んと言わんばかりのブームがきたように覚えています。

テーブルと出会う前

僕は大学の情報処理でHTMLを習ったので、当然マークアップからはじまり、構造化された文書の素晴らしさと、表示はスタイルシートで行うべきだと教わりました。薦められる参考書も当然仕様書に忠実な本だったりしたわけです。さすがに、ブラウザごとにハックを使って表示を整える、なんてことは習いませんでしたが。

出会いと第一印象

入社後、HTMLコーディングの際に<font>タグで囲えと注意された時は、天地がひっくり返る思いでした。それでも、デザイナからあがってくるデザインは非常にグラフィカルで、規定のブラウザによっては崩れてしまい、いったいどうやって組めばいいんだろうと悩まされました。

組み方を聞いてビックリ、テーブルを入れ子にして組むというじゃないですか。確かに、DreamWeaverの本などを読んでいてテーブルで組まれることは知っていましたが、ここまでゴチャゴチャにして組むとは!!ッて感じでした。

先輩の指導の下、テーブルレイアウトをしてみて思ったことは、「パズルみたい」「意外と簡単」ということです。今思い返しても、CSSより簡単ですね。ただし、オーサリングソフトを使っての話ですが。手打ちでテーブルとかは、今でも有り得ないと思います。

テーブルと距離を置いた時期

段階的にですがレイアウト方法が変わっていきました。大枠をテーブルでレイアウトし、ブラウザによって表示が変わらない部分をCSSでレイアウトしていく制作方法にシフトしていきました。いわゆるハイブリッドレイアウトとか呼ばれる代物です。そのうち、CSSレイアウトが声高に叫ばれるようになり、会社でもCSSレイアウトの利点をクライアントに納得してもらい、リニューアルしていく時期がきました。リニューアル費を稼ぐ口実だったようにすら思えます。

テーブルとの別れ

CSSでレイアウトする人が増えたため、ネット上にノウハウもどんどんたまりました。なんとかハックと呼ばれるCSSハックがたくさん開発され、サイト全体をCSSで作ることも珍しくなくなってきました。その頃には、DreamWeaverもMX2004にバージョンアップされ、CSSが扱いやすいインターフェースになりました。また、CSSっぽいレイアウトが氾濫した時期もこの頃だったと記憶しています。DreamWeaver 8が登場した頃はCSSとは思えないレイアウトを目の当たりにし、刺激を受けました。いつしか、テーブルのことは忘れてしまい、表として使う時しか登場しなくなってしまいました。さようならテーブルレイアウトと言う暇も無くCSS化されてしまいました。

テーブルとの再開

業務上、時間をかけずに作る簡単なサイトの場合は、テーブルでもいいという許可が下り、テーブルと再開したわけです。偶然再会したテーブルを目の当たりにして思うことは、なんて使い易いんだということです。まるで胴着の下に重いアンダーウェアを着ていた孫悟空のようでした。そして、時々思うわけです、「テーブルと寄りを戻せないかな」と。叶わぬ願望だと知りながら。


---------------- 以上コンテンツ部分 ----------------

各ページの内容には万全を期してはいますが、(1)私の解釈の間違い (2)参考にしたソースの間違い (3)情報が古くなったことによる間違い、の可能性が常にあります。内容の信頼性は各人の判断に委ねます。

また、あるサイトからあるサイトへリンクをはる場合、サイト運営者の許可は不必要だと考えます。したがって、当サイトへのリンクは自由ですが、URLはトップページ以外常に変わる可能性があります。

デジタルメディアである以上、コピー&ペーストを制限することはできないとあきらめていますが、著作権を放棄したわけではありません。

InternetExplorerでも問題なく見れると思いますが、FireFoxでみることをおすすめします。

Another HTML-lint