Re: 第7回 ページ構造を確認する方法

2006年9月8日 著

益子さんがITProで連載中の「Web標準の基礎と実践」、その第7回はページ構造を確認する方法ということで、Web Developer Toolbarを利用しページ構造を確認する方法を解説されていました。ページ構造という言葉の意味するところはいろいろ考えられると思うのですけど、どの情報要素がHTMLの何要素としてマークアップされているか、という意味合いが個人的にはしっくり来ます。要素の種類は、記事中でも紹介されているようにWeb Developer Toolbarでも知ることができるのですが、なにぶんその文字サイズがデフォルトのままでは小さすぎ、見づらく感じることが多いです。
そこで僕がよく使うのは、Web Developer ToolbarにX-Rayを組み合わせるやり方。まず最初にWeb Developer Toolbarで制作者スタイルシートをすべて無効化し、次いでX-Rayを利用すると、まさに僕の望むとおりの感じに（通常ではソースを開かなければ表示されることのない）HTMLタグをid/class属性とともに表示してくれるのです。かつ、ブラウザのデフォルトスタイルシートは適用されている状態だから、h1やh2といった見出し要素を見つけ出しやすくて（太く・大きく表示されるから）、そういう意味でも重宝しています。テーブルレイアウトなページですと、この方法をもってしてもページ全体の情報構造を把握するのは面倒というかかえって分かりにくかったりしますが、対象がCSSレイアウトなページであれば、とてもわかりやすいです。当たり前？ですが、順番を逆（先にX-RayでHTMLタグを表示してからWeb Developer Toolbarでスタイルシート無効化）にするとまったく意味が無いのでご注意を。さらに、これに加えてProfessor Xを利用すれば、同じウィンドウ内の先頭部分にhead要素の中身まで表示してくれます。具体的にはmeta要素、title要素、link要素等の要素内容や参照先を表示してくれるんですね。
そういうわけで、「ページ構造を確認する」といった場合、僕にとってFirefoxに加えWeb Developer Toolbar、X-Ray、Professor Xという3つの拡張の組み合わせがお気に入りです。それぞれの作者の方々に深く感謝。