見出しの抽出・アウトライン確認

貼り付けたHTMLやMarkdownから h1〜h6 を抜き出して階層を表示します。h1の欠落・重複やレベル飛びを警告し、アンカー付きの目次を作ります。

公開中のページは、ブラウザで「ページのソースを表示」(Ctrl+U / ⌘+Option+U)して全体をコピーし、ここへ貼り付けてください。

HTMLかMarkdownを貼り付けてください。

補足

  • URLを入れてページを取りに行く機能はありません。このサイトは外部へ通信しないため、ページのソースを貼り付けてもらう方式にしています。 JavaScriptで後から描かれる見出しは、ソースに含まれないため数えられません。
  • HTMLはブラウザに解釈させず、<h1>〜<h6> のタグを探して読みます。コメント・script・style の中は無視します。画像だけの見出しは alt を本文として扱います。
  • Markdownは # 形式と、下線(=== / ---)形式の見出しを読みます。コードブロックの中は無視します。
  • 目次のアンカーは、HTMLの id 属性や Markdown の {#id} があればそれを使い、無ければ GitHub と同じ規則で見出しの文字から作ります(同じ見出しには -1 -2 を付けます)。 HTMLで id が無い見出しは、ページ側に同じ id が無ければリンクしても飛べません。

よくある質問

URLを入れるだけで見出しを調べられますか?

できません。このサイトは外部へ通信しないため、ページを取りに行く機能はありません。ブラウザで「ページのソースを表示」(Ctrl+U / ⌘+Option+U)して全体をコピーし、貼り付けてください。JavaScriptで後から描かれる見出しはソースに含まれないため数えられません。

どんな問題を警告してくれますか?

h1 が無い・h1 が2個以上ある・h2 の次が h4 のようにレベルが飛んでいる・見出しが空、の4つです。HTMLではほかに、同じ id の重複と、id の無い見出し(目次から飛べない可能性)も知らせます。浅くなる方向(h4 の次が h2)は正しい構造なので警告しません。

目次のリンク先(アンカー)はどう決まりますか?

HTMLの id 属性や Markdown の {#id} があればそれを使い、無ければ GitHub と同じ規則で見出しの文字から作ります。小文字にして記号を除き、空白をハイフンにします。日本語はそのまま残り、同じ見出しが続くと -1、-2 を付けます。

Markdown のどの見出しの書き方に対応していますか?

「# 見出し」の形式と、次の行に === や --- を引く形式の両方に対応します。コードブロックの中と4文字以上字下げした行は見出しとして扱いません。強調やリンクの記法は外して本文だけを表示します。

↑↓ 移動 / Enter 開く / Esc 閉じる