テーブルレイアウトとは
HTMLコーディングの主流が、旧式のテーブルレイアウトからCSSレイアウトに変わり、大規模Webサイトを中心にXHTMLへの移行がひと段落した感があります。しかし、まだテープルレイアウトを用いたWebサイトが多いのも実情です。
そこで本連載では、慣れ親しんだテーブルレイアウトからなかなか抜け出せない方向けに、CSSレイアウトへスムーズに移行をできるポイントを解説していきます。はじめにCSSレイアウトはHTML 4.01、XHTMLいずれのバージョンでも対応可能ですが、本記事ではXHTML 1.0を対象にCSSコーディングについて解説します。
テーブルレイアウトとは、HTMLタグの1つである表組み
| タグの中に入れていきます。要素の少ない行では、隣接するセルを結合させたり、要素が多い列ではセル の中に新しいテーブルを入れ込む（通称「入れ子」）ことで強引にレイアウトを形成していました。
また、テーブルレイアウトでは隣接する要素間をspacer.gifと呼ばれる1pxの透過gifを拡大することで間隔調整を行っていまし た。このようなHTMLタグとは違った使われ方をオーサリングソフトも積極的にサポートしてきたために、視覚的なコーディング方法が主流になっていまし た。 こういった本来の表組み用タグとは異なる使い方をしていたため、それに伴った問題点も出てきました。 まず1つ目の大きな問題点がブラウジングのスピードです。前述のように複雑にセルを繋げたりテーブルを何重にも入れ子にするテクニックがWebブラウザの表示を遅くしたり、HTMLのファイルサイズを重くする原因となりました。 2つ目にアクセシビリティ面があります。音声読み上げWebブラウザでは、HTMLをソース順に読み上げるため、複雑に入り組んだテーブル上では、文章の順番がバラバラになってしまいます。その結果、Webサイトの内容を正確に伝えられなくなりました。 3つ目にSEO（検索エンジン最適化）の重要性が高まったことです。現在の検索エンジンロボットは、タグ付けと文章の内容が一致するWebサイトを優位に評価する傾向が強いため、正確な文章構造、通称「Web準拠」に準じたコーディングが有効と言われています。  XHTMLの構造文書とは慣れ親しんだテーブルレイアウトからCSSレイアウトに移行するための前提として、XHTMLの文章構造化という概念が必要になります。 つまり、CSSレイアウトに移行する際には、CSSでレイアウトする前のXHTML側のマークアップで正しいタグ付けを行うことが重要となるのです。 テーブルレイアウトで使用していたタグは、主に表組み用の
|
