テーブルは窓から投げ捨てろ(和訳:Throwing Tables Out the Window)
ママ見て、テーブルがないよ!
今年シアトルで開かれた Digital Design World に参加された方は、私 [Douglas Bowman] が行った「No More Tables, CSS レイアウトテクニック」というタイトルのセッションをご覧になったでしょう。このセッションでは、テーブルの正しい使い方を見直し、CSS を使ってそれらのテーブルにスタイルを適用する際のヒントをいくつか示しました。次に、テーブルを使わないレイアウト (tableless layout) を考え、2 つの基本的なアプローチ (positioning と float) の例と概要を見ていただきました。
プレゼンテーションが半分を過ぎたあたりで、私は趣を変えて、テーブルとスペーサー GIF を使った従来のレイアウトを完全な CSS レイアウトに書き換えた実例を示しました。本当は、プレゼンテーションの中で使えるような架空の例を作ることもできたのですが、そうすると、いかにも無理して作ったような、不自然なものになりそうだったのでやめました。もしそこで私が独自の例を作っていたら、それなりにきちんとした良いものが出来上がっていたでしょう。すべて私の期待通りに正確に表示されて、あらかじめ避けられることが分かった「問題点」はすべて取り除いた、完璧な状態になっていたはずです。
架空の例を作るのは物足りませんでした。私は本当の挑戦をしたかったのです。そこで、セッションを聞きに来てくださった方の中でも知っている人はほとんどいないと思われる、シアトルの小さな地元企業のサイトを実例に選びました。それは、
まあ、実際には、このそれほど小さくない会社を知っていたのは、数人の参加者だけではなかったと思います。Microsoft の ホームページ には、毎日たくさんの利用者が訪れています。Microsoft の文字通りのホームページが、巨大検索エンジンの Google や Yahoo! と同じぐらい有名で、頻繁に利用されているかどうかは分かりません。しかし、microsoft.com 全体では膨大な量のアクセスがあって、毎日このドメインを通過する人は何百万という数に上るでしょう。
残念なことに、Microsoft のサイトはあまり最適化されていません。まだ何か躊躇しているようです。利用者は無駄にサイズが大きいページをダウンロードさせられ、サーバは余計な帯域を浪費し続けています。Microsoft のホームページに使われている HTML ファイルのサイズは 40 キロバイトで、決して「太りすぎた野獣」とは言えません。しかし実際には、独自属性がいっぱい使われて、厄介な JavaScript もいくつか含まれた、アクセシブルでない、いい加減な、テーブルベースのマークアップを抱えています。私がマークアップが正当 (valid) かどうかには触れなかったのに気が付きましたか。Microsoft は、XHTML 風のソースコードを書いているにもかかわらず、ホームページの doctype を省略しているのです。
テーブルは窓から投げ捨てろ
テーブルは窓から投げ捨てろ(和訳:minutedesign/原文:stopdesign) | PRiMENON
