【コピペで使える】Markdown見出し記法（#）の書き方完全ガイド｜正しい階層構造・SEO注意点・自動連番＆アンカーリンクまで徹底解説

Markdown（マークダウン）で文書や技術仕様書、ブログ記事、社内Wiki、GitHubのREADMEを作成する際に、「見出し（#）の正しい付け方やレベルの使い分けを知りたい」「h1〜h6の階層構造をどのように設計すべきか迷う」「見出しへのページ内リンク（アンカー）の書き方は？」「章番号（1. 1.1 1.1.1）を自動で振る方法はある？」「# を書いたのに見出しとして反映されない」と疑問に思ったことはありませんか？

見出しは、文書全体の「骨格（アウトライン）」を決定づける最重要のMarkdown記法です。適切な見出し階層を設定することで、読者が一目で内容を把握できるようになるだけでなく、目次（TOC）の自動生成、エディタでのアウトライン折りたたみ、さらにはGoogleなどの検索エンジンに対するSEO評価の向上にも直結します。

本記事では、基本となる # 記法（h1〜h6）とSetext形式の文法早見表から、読みやすく論理的な見出し階層構造の作り方、SEO上の注意点、ページ内アンカーリンクの仕様、VS CodeやCSSを使った自動連番（ナンバリング）テクニック、反映されない場合のトラブル対処法までを完全網羅してわかりやすく徹底解説します！

1. 【早見表】Markdown見出し記法（#）の基本構文と対応HTML一覧

Markdownにおける見出し（Heading）は、行頭にシャープ記号（#）を1個から6個記述することで指定します。# の個数がHTMLの <h1> 〜 <h6> タグに対応し、数字が小さいほど上位（大きな）見出しを表します。

ATX形式（# 〜 ######）の書き方とレベル対応

もっとも一般的で標準的な書き方は、行頭に # を並べるATX形式（ATX Style Headings）です。

# 見出しレベル1（h1相当：文書全体のタイトルなど）
## 見出しレベル2（h2相当：大見出し・大章）
### 見出しレベル3（h3相当：中見出し・節）
#### 見出しレベル4（h4相当：小見出し・項）
##### 見出しレベル5（h5相当：微細な区切り）
###### 見出しレベル6（h6相当：最小レベルの見出し）

【早見表】見出しレベル・記法・HTMLタグ・用途一覧

各見出しレベルのHTMLタグ、フォントサイズ感、一般的なドキュメントやWebページにおける使い分けは以下の通りです。

【超重要】# の直後に「半角スペース」が必須な理由

Markdownで見出しを書く際に、初心者が最も陥りやすいミスが「# の直後に半角スペースを入れ忘れること」です。

なお、末尾に ## 見出し ## のように閉じる # を記述する「閉じスタイル」も許可されていますが、一般的には行頭のみに記述する形式が最もシンプルで推奨されます。

代替構文：Setext形式（=== と —）の使い方

Markdownには、ATX形式（#）のほかに、テキストの下にハイフンやイコール記号を並べて下線を引くSetext形式（Setext Style Headings）も存在します。

見出しレベル1（h1）
===============

見出しレベル2（h2）
---------------

Setext形式では、見出しテキストの直下に = または - を3個以上並べます。記号の長さは見出しテキストと揃える必要はありません。

2. 読みやすい文書を作る！正しい見出し階層構造（アウトライン）のルール

見出しは、単に「文字を大きく太くして目立たせるための装飾」ではありません。文書全体の論理構造（アウトライン）を定義し、読者や検索エンジンに内容を正確に伝えるための骨組みです。

見出し構造が崩れていると、読者はどこが重要なポイントなのか迷ってしまい、エディタの目次機能やスクリーンリーダーなどのアクセシビリティツールも正常に機能しなくなります。ここでは、美しく論理的な文書を作るための3つの鉄則を解説します。

原則1：h1（#）は文書に1つ！本文は h2（##）から始める

HTML規格およびSEOの基本原則として、<h1>（#）は1つの文書・Webページにつき「原則1つ」と定められています。ブログやCMS（WordPressなど）、Qiita、Zenn、GitHubのプレビューでは、記事タイトルやファイル名が自動的に h1 として扱われることが一般的です。

原則2：階層をスキップ（ジャンプ）させない

見出しレベルは、必ず1段階ずつ順番に深くする必要があります。文字の見た目やサイズ感だけで選んで、階層を飛び越えてはいけません。

階層を飛ばしてしまうと、自動生成される目次（TOC）でインデントが不自然に空いてしまったり、コード静的解析ツール（markdownlintなど）でエラー（MD001 / heading-increment）として警告されます。

原則3：見出しの粒度・親子関係を揃える

同じ階層の見出し（例えば同じ h2 同士、あるいは同じ h3 同士）は、情報の重要度や抽象度のレベル（粒度）を揃えることが重要です。

• h2（大見出し）: その章で扱う主題・大きなテーマ（例：インストール手順、基本的な使い方、応用設定）
• h3（中見出し）: 主題を構成する具体的な要素（例：Macでの手順、Windowsでの手順、Linuxでの手順）
• h4（小見出し）: さらに細かい手順や補足（例：Homebrewを使う場合、インストーラーを使う場合）

【比較】良い見出し構造 vs 悪い見出し構造の実例

具体的な文書の例で、構造の違いを見比べてみましょう。

# タイトル
# 次のテーマ（h1が複数ある）
### Macのインストール（h2をスキップ）
## 概要（階層の順序が逆転）
##### 補足（いきなりh5に飛ぶ）

# ドキュメントタイトル（h1は1つ）
## 1. 概要（h2）
## 2. インストール手順（h2）
### 2.1 Macでの導入（h3）
### 2.2 Windowsでの導入（h3）
## 3. 基本的な使い方（h2）

3. SEO＆ユーザビリティを高める見出し作成のベストプラクティス

Webサイトや技術ブログにおいて、見出しタグ（h2〜h4）は検索エンジンのクローラーが「この記事は何について書かれているのか」を正確に理解するための最重要指標です。SEO効果と読者の読みやすさを両立させるポイントを解説します。

検索エンジン（Google）が見出しタグを評価する仕組み

Googleをはじめとする検索エンジンは、本文全体のテキストよりも見出しタグ（h1, h2, h3）に含まれる文言を重要視してインデックスします。見出しを見るだけで「記事全体の要約」が伝わるように設計されているページは、検索クエリとの関連性が高いと評価されやすくなります。

検索キーワードを自然に含めるポイント

• 主要キーワードをh2に配置する: 狙っているメインキーワード（例：「markdown 見出し」「アンカーリンク」など）を、不自然にならない範囲でh2見出しに含めます。
• 関連語・サジェストキーワードをh3に配置する: 「自動連番」「反映されない」「書き方」など、ユーザーが検索する関連トピックをh3見出しに割り振ることで、ロングテール検索からの流入を獲得できます。
• 過度なキーワード詰め込みは避ける: すべての見出しに同じキーワードを機械的に詰め込むと、読みにくくなるだけでなく検索エンジンからスパムと判定される恐れがあります。あくまで「人間が読んで分かりやすい文章」を最優先にしましょう。

見出し直下に適切な本文テキストを配置する

見出しを書いたら、その直後に必ずその見出しに対応する説明文（本文）を配置しましょう。見出しの直後にいきなり次の見出しが連続する（見出しの空打ち）状態は、文書構造として不完全であり、読者にとっても不親切です。

見出し内に太字（**）やリンク（[]()）を入れても良いか？

4. 見出しへの「ページ内リンク（アンカーリンク）」の貼り方とルール

Markdown文書内で、特定のセクション（見出し）へ瞬時にスクロールジャンプさせたい場合は、ページ内アンカーリンク（Internal Anchor Link）を使用します。

見出しリンクの基本構文（[テキスト](#アンカーID)）

通常のリンク記法 [表示名](URL) のURL部分に、シャープ（#）から始まるアンカーID（スラッグ）を指定します。

[インストール手順へジャンプ](#installation-guide)


## Installation Guide {#installation-guide}

GitHub・Qiita等のスラッグ（アンカーID）自動生成4原則

GitHub、Qiita、Zenn、VS Codeなどの主要なMarkdown環境では、見出しのテキストから自動的にアンカーID（スラッグ）が生成されます。その自動生成ルールは以下の4原則です。

日本語見出しでリンクを確実に動作させる方法

日本語の見出しの場合、プラットフォームによってアンカーIDの生成挙動が異なります。

• GitHub / Qiita / Zenn: 日本語テキストがそのままスラッグになります。
  例：## 基本的な使い方 → リンクは [使い方](#基本的な使い方) で動作します。
• URLエンコードが必要な環境: プラットフォームによっては日本語がパーセントエンコード（例：#%E5%9F%BA%E6%9C%AC...）される場合があります。

HTMLカスタムアンカー（id属性）を使った確実なリンク指定

日本語見出しの文字化けやプラットフォーム差異を防ぎ、絶対にリンクを飛ばしたい場合は、HTMLの id 属性を明示的に埋め込む手法がもっとも確実です。

[設定手順を見る](#sec-settings)


## <span id="sec-settings"></span>詳細な設定手順


<h2 id="sec-settings">詳細な設定手順</h2>

5. 【自動化】見出しに章番号（1. 1.1 1.1.1）を自動付与・連番化する方法

長文のドキュメントやマニュアルを作成していると、「見出しの頭に 1. や 1.1 などの章番号（連番）を振りたい」「途中に章を追加したときに番号を手動で振り直すのが大変」という課題が発生します。見出しの連番化を自動化する代表的な2つの手法を紹介します。

VS Code（Markdown All in One）で見出し連番を自動挿入する手順

VS Codeの大人気拡張機能「Markdown All in One」には、見出しへの連番追加（Section numbering）機能が標準搭載されています。

途中に新しい見出しを挿入した場合も、同じコマンドを再実行するだけで一瞬で連番が再計算・更新されます。連番を削除したい場合は Markdown All in One: Remove section numbers を実行するだけです。

CSSカウンター（counter-increment）で自動ナンバリングする記述法

Markdownのテキスト自体を書き換えることなく、HTMLレンダリング時やPDF出力・印刷時のみ自動で連番を表示させたい場合は、CSSカウンター（CSS Counter）を利用するのが最適です。

/* 文書全体でカウンターを初期化 */
body {
  counter-reset: h2-counter;
}

/* h2見出しの連番 */
h2 {
  counter-reset: h3-counter;
}
h2::before {
  counter-increment: h2-counter;
  content: counter(h2-counter) ". ";
}

/* h3見出しの連番（1.1, 1.2 ...） */
h3 {
  counter-reset: h4-counter;
}
h3::before {
  counter-increment: h3-counter;
  content: counter(h2-counter) "." counter(h3-counter) " ";
}

/* h4見出しの連番（1.1.1, 1.1.2 ...） */
h4::before {
  counter-increment: h4-counter;
  content: counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) " ";
}

このCSSを適用しておけば、Markdown側には ## 概要 と書いておくだけで、ブラウザやPDF上では自動的に 1. 概要 とプレフィックスが表示されます。

MarpやTypora等での自動連番設定

• Typora: カスタムテーマCSSに上記のCSSカウンターを追加することで、エディタ内でリアルタイムに連番が表示されます。
• Marp（スライド作成）: スライド用のテーマCSSにカウンターを設定することで、アジェンダやスライドタイトルに自動番号を付与できます。

6. 主要エディタ・ツールでの見出し操作と便利ショートカット

Markdownエディタには、見出しを快適に操作するための強力な機能やショートカットが用意されています。

VS Codeでのアウトライン表示・パンくず・折りたたみ

Obsidian / Typora / Notion / GitHub での見出し機能

• Obsidian: 見出しごとの折りたたみ（Folding）や、見出し単位でのブロック参照（[[ノート名#見出し名]]）による双方向リンクが可能。
• Typora: Ctrl + 1 〜 Ctrl + 6（Mac: Cmd + 1 〜 Cmd + 6）で見出しレベルをワンタッチで切り替え可能。
• Notion: /h1 〜 /h3 または # 入力で見出しブロックに即時変換。トグル見出し機能も利用可能。
• GitHub: READMEやIssueプレビューで自動的にページ上部にアウトラインアイコンが表示され、見出し一覧から素早くジャンプ可能。

7. 【トラブルシューティング】見出しが反映されない・崩れる原因と対処法

「# を入力したのに文字が大きくならない」「見出しにならずシャープ記号がそのまま表示されてしまう」というトラブルが発生した際は、以下の5つのチェック項目を確認してください。

8. まとめと関連記法チートシート

Markdownの見出し記法（#）は、文書の読みやすさ・メンテナンス性・SEO効果のすべてを支える最重要の基本構文です。最後に、実践で役立つ重要ポイントをおさらいしましょう。