見出しの抽出・アウトライン確認
貼り付けた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文字以上字下げした行は見出しとして扱いません。強調やリンクの記法は外して本文だけを表示します。