TOPシステム開発【即実践!HTML+CSS】テーブルレイアウトから脱出せよ!> 第1回:XHTMLの文書構造化とボックスモデル (1/3)




【即実践!HTML+CSS】テーブルレイアウトから脱出せよ!

【即実践!HTML+CSS】
テーブルレイアウトから脱出せよ!

第1回:XHTMLの文書構造化とボックスモデル

著者:米倉 明男

公開日:2008/04/01(火)

テーブルレイアウトとは

HTMLコーディングの主流が、旧式のテーブルレイアウトからCSSレイアウトに変わり、大規模Webサイトを中心にXHTMLへの移行がひと段落した感があります。しかし、まだテープルレイアウトを用いたWebサイトが多いのも実情です。

そこで本連載では、慣れ親しんだテーブルレイアウトからなかなか抜け出せない方向けに、CSSレイアウトへスムーズに移行をできるポイントを解説していきます。はじめにCSSレイアウトはHTML 4.01、XHTMLいずれのバージョンでも対応可能ですが、本記事ではXHTML 1.0を対象にCSSコーディングについて解説します。

テーブルレイアウトとは、HTMLタグの1つである表組み<table>タグを利用してレイアウトを組む方法です。見出しや文章、画像などをそれぞれ表のセル<td>タグの中に入れていきます。要素の少ない行では、隣接するセルを結合させたり、要素が多い列ではセルの中に新しいテーブルを入れ込む(通称「入れ子」)ことで強引にレイアウトを形成していました。

また、テーブルレイアウトでは隣接する要素間をspacer.gifと呼ばれる1pxの透過gifを拡大することで間隔調整を行っていました。このようなHTMLタグとは違った使われ方をオーサリングソフトも積極的にサポートしてきたために、視覚的なコーディング方法が主流になっていました。

こういった本来の表組み用タグとは異なる使い方をしていたため、それに伴った問題点も出てきました。

まず1つ目の大きな問題点がブラウジングのスピードです。前述のように複雑にセルを繋げたりテーブルを何重にも入れ子にするテクニックがWebブラウザの表示を遅くしたり、HTMLのファイルサイズを重くする原因となりました。

2つ目にアクセシビリティ面があります。音声読み上げWebブラウザでは、HTMLをソース順に読み上げるため、複雑に入り組んだテーブル上では、文章の順番がバラバラになってしまいます。その結果、Webサイトの内容を正確に伝えられなくなりました。

3つ目にSEO(検索エンジン最適化)の重要性が高まったことです。現在の検索エンジンロボットは、タグ付けと文章の内容が一致するWebサイトを優位に評価する傾向が強いため、正確な文章構造、通称「Web準拠」に準じたコーディングが有効と言われています。

Image

XHTMLの構造文書とは

慣れ親しんだテーブルレイアウトからCSSレイアウトに移行するための前提として、XHTMLの文章構造化という概念が必要になります。

つまり、CSSレイアウトに移行する際には、CSSでレイアウトする前のXHTML側のマークアップで正しいタグ付けを行うことが重要となるのです。

テーブルレイアウトで使用していたタグは、主に表組み用の<table><tr><td>タグやフォントのサイズや色を変更する<font>タグ、そして画像の<img>タグが中心でした。

XHTMLでは、本来のHTMLのタグの意味合いに基づいたマークアップを行います。見出し部分は<h1>〜<h6>タグで記述し、本文は<p>段落タグ、箇条書きには<li>リストタグを使います。これはHTML辞典に載っているような基本作業で、Webページの内容とタグの意味付けを一致させることが重要になります。実際にXHTML+CSSでコーディングをするようになってからHTML辞典をよく使うようになりました。

これはWorld Wide Webで利用される技術仕様の標準化を推進する団体であるW3C(World Wide Web Consortium)が勧告してきたタグの意味に基づいたマークアップを行い、XHTMLはデザイン(装飾)要素を排除した構成要素のみの文章という前提です。

デザイン(装飾)要素は、CSS(Cascading Style Sheets)にまとめて別々のファイルとして共存させ、お互いが関連づけられたときにデザインされたWebページがWebブラウザに表示される考え方です(図1)。 次のページ




米倉 明男
著者プロフィール
米倉 明男
Webデザイナー
印刷会社、Web制作会社などのデザイナー/ディレクターを経て、2007年からフリーランスとして活動。デジタルハリウッド講師。
http://www.morethanwords.jp


この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。

INDEX
第1回:XHTMLの文書構造化とボックスモデル
テーブルレイアウトとは
  CSSコーディングの最初のステップ「ボックスモデル」とは
  ボックスモデルの問題点
【即実践!HTML+CSS】テーブルレイアウトから脱出せよ!
第1回 XHTMLの文書構造化とボックスモデル
第2回 カラムを理解する!
第3回 リストタグを試す!
第4回 Webブラウザの検証!
関連記事
ポストWebコーディング
テーブルレイアウトから脱出せよ!
身につけたい!正しいコーディング作法
チームによるWeb制作の現場
私流、ツールの選び方
Webデザイナは知っていた