Webページ全体の見出し、アウトラインを一覧マップするChrome拡張機能 『HeadingsMap』

Webページ全体の見出し、アウトライン構造を

一覧マップにしてくれるChrome拡張機能。

Web制作時やサイト全体の構造把握、

長いページを見るときの目次にも便利です。

headingsmap8

Chrome拡張機能 HeadingsMap インストール

インストール

headingsmap1

上記リンク先ページをChromeで開き

「Chromeに追加」をクリックします。

headingsmap2

拡張機能を追加をクリックします。

これでChromeにインストール完了です。

アイコンが追加されますが、よく使う人は

Chromeにピン留めしておくと使う時に便利です。

レビュー

headingsmap3

チェックしたいページでアイコンをクリックします。

このブログを開いてチェックしてみます。

headingsmap4

検出されたアウトライン構造が

一覧画面で表示されます。

サイト全体の目次みたいな感じでしょうか。

headingsmap5

一覧内の項目をクリックすると

どの部分かを赤枠で教えてくれます。

Web制作時の最終チェックなどに便利です。

headingsmap6

階層もしっかりと分かるので

サイトマップみたいな感じでも見れます。

また長いページなどでは目次代わりでも

使えそうですね。

headingsmap7

画面右上に設定項目があるので

表示などの変更も可能です。

headingsmap8

H1やH2などHTML5アウトラインの

表示も可能でサイト全体の構造チェックが

可能になります。

主にWeb制作現場で活用できそうな

便利なChrome拡張機能です。

  • コメント: 0

ハイクオリティーなSNS投稿画像を作成できるWebサービス 『Pablo 2.0』前のページ

個人、商用利用も無料なテイストで探せるアイコン配布サイト 『ICON BOX』次のページ

関連記事

  1. 言語・開発

    マウスオーバーでCSS表示してくれるWeb開発者に便利なChrome拡張機能 『CSSViewer』…

    マウスを上に持ってくるだけで、その場所の要素のCSSを表示して…

  2. 言語・開発

    iPhone・スマートフォン対応のWebページを表示してくれるChrome拡張機能 IPhone E…

    IPhone・スマートフォン対応のWebページをサクっと表示してくれる…

  3. 言語・開発

    Google Analyticsが導入しているか分かるChrome拡張機能 導入時などに便利 Ana…

    表示したページがGoogleAnalyticsを導入しているかどうかが…

  4. 言語・開発

    WebサイトのSEO的な分析ができるChrome拡張機能 『AdMatrix Analytics』

    WebサイトのSEO的な分析が出来るChrome拡張機能H1タ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

こんな人が書いてます

子供のころからパソコンや電子機械が好きでコンピュータ専門学校を卒業後にIT関連企業に勤めております。

企業や個人のネットワーク構築やパソコントラブル対応、ホームページ制作、システム開発などITに関する仕事を数多く対応しています。

Twitterでこのブログの投稿や日々の出来事などをつぶやいています。Twitter:@mogeringo

最近の記事

PAGE TOP