h1～h6

概要

• 見出しを表す要素。ページには通常<h1>は1つ。
• セクション内では<h2>〜<h6>で階層を作る。

最小サンプル

<h1>ページの主見出し</h1>
<section>
  <h2>セクションの見出し</h2>
  <p>本文…</p>
  <h3>小見出し</h3>
  <p>本文…</p>
</section>

実務での使い方（ポイント）

• デザイン都合でサイズを変えたい時でも、見出しレベルは意味重視（サイズはCSSで）。
• 見出しの連番抜け（h2→h4など）は避ける。

CSSの基本（必要な場合のみ）

h1 { font-size: clamp(24px, 3vw, 36px); }
h2 { font-size: clamp(20px, 2.4vw, 28px); }

アクセシビリティ

• 見出し構造はスクリーンリーダーのナビゲーションに直結。
• 1ページに<h1>は原則1つ。

よくある落とし穴

• 見た目目的で<div>に大きな文字を当てて見出しにしないこと。意味が失われる。

概要

• 見出しを表す要素。ページには通常<h1>は1つ。
• セクション内では<h2>〜<h6>で階層を作る。

最小サンプル

<h1>ページの主見出し</h1>
<section>
  <h2>セクションの見出し</h2>
  <p>本文…</p>
  <h3>小見出し</h3>
  <p>本文…</p>
</section>

実務での使い方（ポイント）

• デザイン都合でサイズを変えたい時でも、見出しレベルは意味重視（サイズはCSSで）。
• 見出しの連番抜け（h2→h4など）は避ける。

CSSの基本（必要な場合のみ）

h1 { font-size: clamp(24px, 3vw, 36px); }
h2 { font-size: clamp(20px, 2.4vw, 28px); }

アクセシビリティ

• 見出し構造はスクリーンリーダーのナビゲーションに直結。
• 1ページに<h1>は原則1つ。

よくある落とし穴

• 見た目目的で<div>に大きな文字を当てて見出しにしないこと。意味が失われる。