Skip to content

4. 見出し（h1〜h6）と文章構造のルール

見出し（h1〜h6）を正しく使うと、ページの「目次」が整い、読みやすさ・SEO・アクセシビリティが良くなります。

•beginnerheadingsstructureseoaccessibilitysemantics
目次
まず結論（1行）
最小の書き方（コピペで動く最小コード）
重要ポイント（初心者が迷う所だけ）
例で理解（よく使うパターン：4つ）
1) ブログ記事（定番）2) FAQ（質問＝見出し、回答＝本文）3) 長いページの「章→節」4) カードUI内の見出し（小さく見せたいとき）
使い分け（似た要素との違い）
実務のコツ（SEO・安全・アクセシビリティ）
NG・禁止例（なぜダメ？どう直す？）
1) いきなりh3から始める（階層飛ばし）2) h2の次がh4（段差飛ばし）3) 大きくしたいだけで見出しを使う4) 見出しが連続して本文がない
見た目を整える（HTML+CSSセット：3例）
例1：見出しの余白と読みやすさを整える例2：目次っぽいナビ（見出しと相性が良い）例3：カード内の見出しを小さく見せる（構造は保つ）
理解チェック（3問・答え付き）
ミニ演習（すぐ試せる小課題）

まず結論（1行）

見出し（h1〜h6）を正しく使うと、ページの「目次」が自動で整い、読みやすさ・SEO・アクセシビリティが一気に良くなります。

最小の書き方（コピペで動く最小コード）

HTMLCode
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>見出しの基本</title>
  </head>
  <body>
    <h1>カレーの作り方</h1>

    <h2>材料</h2>
    <p>玉ねぎ、肉、ルー、水…</p>

    <h2>手順</h2>
    <h3>1. 炒める</h3>
    <p>玉ねぎを色づくまで炒めます。</p>

    <h3>2. 煮込む</h3>
    <p>具材と水を入れて煮込みます。</p>
  </body>
</html>
Preview を表示

重要ポイント（初心者が迷う所だけ）

  • h1はページの主題（基本1つ）：そのページが「何のページか」を一言で表す。
  • 見出しは階層（親→子）：h2の下にh3、h3の下にh4…のように段差を守る。
  • “大きさ”のために使わない：文字を大きくしたいだけならCSSで調整。
  • 見出しの直後は本文（pなど）：見出しだけが連続すると内容が薄く感じられる。

例で理解（よく使うパターン：4つ）

1) ブログ記事（定番）

HTMLCode
<h1>旅行の持ち物チェック</h1>

<h2>必須</h2>
<p>財布、スマホ、身分証…</p>

<h2>あると便利</h2>
<p>モバイルバッテリー、折りたたみ傘…</p>
Preview を表示

2) FAQ（質問＝見出し、回答＝本文）

HTMLCode
<h2>よくある質問</h2>

<h3>Q. 返品できますか？</h3>
<p>A. 未使用なら到着後7日以内に可能です。</p>
Preview を表示

3) 長いページの「章→節」

HTMLCode
<h1>サービスの使い方</h1>

<h2>はじめに</h2>

<h2>登録</h2>
<h3>メールアドレス</h3>
<h3>パスワード</h3>
Preview を表示

4) カードUI内の見出し（小さく見せたいとき）

HTMLCode
<section>
  <h2>新着記事</h2>

  <article>
    <h3>時短レシピ3選</h3>
    <p>忙しい日に助かる…</p>
  </article>
</section>
Preview を表示

小さく見せたいなら h3 を h4 に落とすのではなく、CSSでサイズを調整するのが基本。

使い分け（似た要素との違い）

  • 見出し（h1〜h6）：ページ構造の「章タイトル」。検索・読み上げ・目次の基準になる。
  • ただの強調（strong / em）：文章内の強調。章立てにはならない。
  • 見た目調整（CSS）：フォントサイズや余白はここでやる。

実務のコツ（SEO・安全・アクセシビリティ）

  • 見出しだけ読んでも内容が追えるようにする（見出しが目次になる）。
  • h2の粒度を揃える：章の分け方がブレると読みにくい。
  • 画面読み上げでは見出しジャンプが多い：見出しの順序が崩れると迷子になりやすい。

NG・禁止例（なぜダメ？どう直す？）

1) いきなりh3から始める（階層飛ばし）

HTMLCode
<h3>概要</h3>
Preview を表示

→ ✅ まず h1、章なら h2 を使う

2) h2の次がh4（段差飛ばし）

HTMLCode
<h2>手順</h2>
<h4>1. 準備</h4>
Preview を表示

→ ✅ h3 にする

3) 大きくしたいだけで見出しを使う

HTMLCode
<h1>注意事項（見た目を大きくしたいだけ）</h1>
Preview を表示

→ ✅ 構造上の主題でないなら p や strong + CSS で調整

4) 見出しが連続して本文がない

HTMLCode
<h2>材料</h2>
<h2>手順</h2>
Preview を表示

→ ✅ それぞれに短くても説明文を付ける

見た目を整える（HTML+CSSセット：3例）

例1：見出しの余白と読みやすさを整える

例1：見出しの余白と読みやすさを整える

HTMLCode
<main class="doc">
<h1 class="doc__title">見出しのルール</h1>
<h2 class="doc__h2">基本</h2>
<p>見出しは構造を作ります。</p>
</main>
CSSCode
.doc {
max-width: 760px;
margin: 0 auto;
padding: 24px;
line-height: 1.8;
}

.doc__title {
margin: 0 0 18px;
}

.doc__h2 {
margin: 28px 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid currentColor;
}
Preview を表示

例2：目次っぽいナビ（見出しと相性が良い）

例2：目次っぽいナビ（見出しと相性が良い）

HTMLCode
<nav class="toc" aria-label="目次">
<a class="toc__link" href="#mat">材料</a>
<a class="toc__link" href="#steps">手順</a>
</nav>

<h1>カレーの作り方</h1>
<h2 id="mat">材料</h2>
<p>…</p>

<h2 id="steps">手順</h2>
<p>…</p>
CSSCode
.toc {
display: flex;
gap: 12px;
padding: 12px;
border: 1px solid currentColor;
border-radius: 14px;
}

.toc__link {
text-decoration: underline;
text-underline-offset: 4px;
}

.toc__link:hover {
opacity: 0.7;
}
Preview を表示

例3：カード内の見出しを小さく見せる（構造は保つ）

例3：カード内の見出しを小さく見せる（構造は保つ）

HTMLCode
<article class="card">
<h3 class="card__title">時短レシピ3選</h3>
<p>10分で作れるメニュー…</p>
</article>
CSSCode
.card {
border: 1px solid currentColor;
border-radius: 18px;
padding: 16px;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.card__title {
margin: 0 0 8px;
font-size: 1.05rem; /* 見た目はCSSで小さく */
}
Preview を表示

理解チェック（3問・答え付き）

Q. h1は基本いくつ置く？

A. 基本は1つ（そのページの主題）。

Q. h2の直下に置くべき見出しは？

A. h3（階層を飛ばさない）。

Q. 見出しを「文字を大きくするため」に使っていい？

A. ダメ（見た目はCSS、見出しは構造）。

ミニ演習（すぐ試せる小課題）

  1. 「自己紹介ページ」を作り、h1=名前、h2=趣味 / 経歴 / 連絡先 のように章立てしてみよう。
  2. h2の下にh3を2つ作り（例：趣味→ゲーム/料理）、階層が崩れていないか確認しよう。