CSSレイアウトとテーブルレイアウトの話

今回僕が作製したこのブログテンプレートは、テーブルレイアウトではなく、CSSレイアウトを採用しています。

テーブルレイアウトとは、表（table）を作り、その中に要素をブロックとして入れていくことでWEBサイトをレイアウトしていく方法です。
CSSレイアウトとは、クラス要素でブロックを作り、CSSで位置や装飾を指定してレイアウトする方法です。HTMLで論理構造を、CSSでデザイン要素を、と分離しているのが特徴です。

CSSレイアウトはテーブルレイアウトに比べて以下の３つの観点から優れていると言えます。

●アクセシビリティの向上

テーブルは、ブラウザがそのテーブル内の全ての情報を読み込むまで表示されません。よって、途中に重い画像やリンク切れの画像があったりした場合、表示がとても遅くなってしまいます。通信速度に関しては、今ではブロードバンドの普及率も上がっていますが、PHSで接続するモバイルユーザーも増えていますし、いまだに電話回線のユーザーの存在も無視できません。
また、論理的言語であるHTMLの文法に従ったつくりになるので、音声読み上げソフトで正常に読み上げられるという利点もあります。

●ＳＥＯ効果の向上

テーブルレイアウトは、論理構造を無視したソースになります。検索ロボットは、テーブルになったときの見た目ではなく、＜Hn＞の見出し要素や段落要素などの、HTML文法に従ってサイトを理解します（音声読み上げソフトと同じように）。プレーンなHTML文書を作れるCSSレイアウトの方が、意図したとおりにインデックスされやすいと言えます。
また、CSSレイアウトなら、＜body＞タグのすぐ後に見出しや本文がすぐに始まります。このエリアは検索エンジンで特に強く重み付けをされる部分です。しかしテーブルレイアウトの場合、ここが何十行もレイアウトのための設定タグで無意味に埋められてしまいます。SEOの観点からは、これは大きなマイナスになります。（例：テーブルレイアウトのソース、CSSレイアウトのソース）

●デザイン変更が容易

CSSレイアウトは、HTMLの文書構造とデザイン要素が切り離されているため、CSSを差し替えるだけでデザインが完全に変わります。これによって、いちいちすべてのファイルを変更しなくとも、サイト単位でのデザインリニューアルができます。
普通のサイトでは難しい部分もあるかもしれませんが、中身のテンプレートが同じで見た目だけ違うものにしたい、例えば今回試作したブログのテンプレートには最適と言えます。新しいデザインを追加したいとき、リニューアルしたいとき、いちいち新しいHTMLファイルを作らなくても、CSSファイルを作り足すだけでデザインを変更できます。

WEBデザイナーの間でも、これはしばしば議論になる話題です。WEB制作の現場でも、CSSレイアウトとテーブルレイアウトが混在しています。テーブルレイアウトの方が優れている面のひとつは、作業時間です。作業が視覚的に把握しやすいテーブルレイアウトは、これまでの主流だったため、ノウハウが蓄積されていますし、DreamWeaverなどのアプリで扱いやすい。WEBデザインの現場でテーブルレイアウトが使われているのは、この作業時間効率の問題もあると思います。

議論の例：
with Computer | CSSレイアウトをどう捉えるか←フリーのWEBデザイナーの方による、現場での捉え方。

こんな興味深い事例も見つけました。
Web::Blogoscope: ［143］ 主要ポータルの脱テーブル状況

米MSNと米Yahoo!はCSSレイアウトになっていますが、日本はテーブルのまま。でも見た目はだいたい同じ。CSSでもテーブルと同等のレイアウトが実現できるという好例ですね。
日本Yahoo!（テーブル）
米Yahoo!（CSS）

日MSN（テーブル）
米MSN（CSS）

←BLOGランキングに参加してみました。これを押すと、このブログに１票入ります。