HTML5のアウトラインをチェックするツールとしてHTML 5 Outlinerとか、同名のChrome拡張などは有名です。
ただ、先日から利用しているHeadingsMapは、Chrome拡張でもFirefoxアドオンでも利用でき、より詳細なアウトライン解析ができて便利なので紹介です。
目次
HeadingsMapとは
HeadingsMapは、HTMLドキュメントの「HTML5アウトライン」や「見出し構造」のナビゲートマップを表示してくれるブラウザ拡張です。
HeadingsMapは、Chrome拡張版と、Firefoxアドオン版があります。
これまでよく利用されていたHTML5 Outliner（Chrome拡張）等のツールは、アウトライン構造のみが表示されていましたが、HeadingsMapは、アウトライン構造に加えてセクション情報も表示してくれます。
例えば、HTML5 Outlinerで、表示させた場合は、単にアウトライン構造だけが表示されていました。
一方、HeadingsMapで表示すると、見出しで使われているタグまで見ることができ、構造をより詳細に表示することができます。
また、section、nav、article、asideのようなセクション要素が利用されているときは、以下のようなセクション構造とともに表示してくれます。
また、Headingsタブを表示すると、見出しタグ（h1-h6）のみの構造も見ることができます。
ChromeでもFirefoxでも利用可能
HeadingsMapは、ChromeでもFirefoxでも利用することができます。
以下で、それぞれについて簡単に使い方を紹介します。
Chrome拡張「HeadingsMap」
HeadingsMap（Chrome拡張）は、インストールするとツールバーに
ボタンが表示されるので、クリックすると、画面右側にポップアップ形式で表示されます。
Firefoxアドオン「HeadingsMap」
HeadingsMap（Firefoxアドオン）は、インストール後、オプションボタンから「カスタマイズ」をクリックしてください。
カスタマイズ画面で出てくる、HeadingsMapアイコンをドラッグ＆ドロップでツールバーに移動させます。
ツールバーに移動すると、こんな感じで表示されます。
あとは、アウトライン構造を見たいページ上で
ツールボタンを押せば、サイドバーに分析結果が表示されます。
まとめ
HeadingsMapを利用すると、従来のツールにはなかったアウトラインに関する情報を、ちょっと詳しく表示させることができます。
これからサイトを作るとか、Wordpressテーマを作成する場合などは、色々なサイトをHeadingsMapで眺めて、参考にしながら作成するといろいろと捗るかもしれません。
Chrome拡張 HeadingsMap
Firefoxアドオン HeadingsMap
