XHTML+CSSでは、ページ構造を意識して制作することが大切。Firefoxの拡張ツール﹁Web Developer Toolbar﹂を利用して、テーブルレイアウトの構造、フルCSSのページ構造、見出し構造、非推奨要素を確認する方法を説明しよう。
Firefoxの拡張ツール﹁Web Developer Toolbar﹂
Firefoxでは﹁Web Developer Toolbar﹂︵以下、WDT︶という高機能な拡張ツールが利用できる。名前のとおり、Web開発者向けのツールバーであり、CSSやJavaScriptの無効化、画像表示の無効化、ソースのバリデーションなどをツールバーから直接実行することができる。 まず、インフォアクシアで公開されているWDT日本語版をインストールしよう︵http://www.infoaxia.com/tools/webdeveloper/︶。Firefox︵またはMozilla︶が動作する環境であれば、OSを問わずインストール可能だ。インストール後、Firefoxを一度立ち上げなおすことでWDTが使えるようになる。 WDTには﹁table,th,td要素を枠で囲う﹂という機能がある。この機能を使えば、そのページがテーブルレイアウトかフルCSSレイアウトかは一目瞭然だ。 たとえばYahoo! JAPAN︵http://www.yahoo.co.jp/︶にアクセスし、﹁枠表示﹂→﹁table,th,td要素を枠で囲う﹂を選択してみると、テーブルの複雑な入れ子によってレイアウトされていることがわかる。
 【図1-1】Yahoo! JAPANにアクセス |
 【図1-2】Web Developer Toolbar「枠表示」→「table,th,td要素を枠で囲う」を選択 |
 【図1-3】テーブルの複雑な入れ子によってレイアウトされている |
さらに、「情報」→「table要素の入れ子の深さを表示する」を選択すると、最大5階層のテーブルの入れ子によってレイアウトされていることがわかる。
 【図2-1】「情報」→「table要素の入れ子の深さを表示する」を選択 |
 【図2-2】最大5階層のテーブルの入れ子によってレイアウトされている |
