見出し(概要)

見出しは、主にページの冒頭やセクションの前に配置される、ページやセクションの主題を表すコンポーネントです。
ユースケース
- ページ全体の主題を示すとき
- ページの冒頭において、
<title>要素に相当するページの主題をレベル1見出しとして配置することで、ページ全体の主題を示すことができます。 - セクションの主題を示すとき
- セクションの前に、セクションの主題となるテキストをレベル2〜6見出しとして配置することで、ページ全体のコンテンツ構造を示すことができます。
注意が必要なケース
- 項目を列挙するとき
- 項目を列挙したり、項目の階層構造を示したりするケースでは、見出しと段落の組み合わせではなく、箇条書きリストを使用してください。逆に、セクションの主題を示す必要がある場合は、箇条書きリストの階層化で見出し代わりにするのではなく、見出し要素を使用してください。
- 用語と説明をセットにして繰り返すとき
- 用語と説明をセットにして繰り返すようなケースでは、見出しと段落の組み合わせではなく、説明リストを使用してください。逆に、セクションの主題を示す必要がある場合は、説明リストのタイトルで見出しを表現するのではなく、見出し要素を使用してください。
- 原文に見出しが存在しないとき
- 見出しはコンテンツを構造化するための要素ですが、すべての文書やセクションに見出しが必要なわけではありません。物語や発話録など、見出しを挿入することが適当でない文書に見出しを追加する必要はありません。
関連コンポーネント
各種リソース
| 種別 | リソース | 状態 |
|---|---|---|
| デザイン | デザインデータ(Figma) | 提供中 |
| HTML版実装 | ソースコード(GitHub) | 提供中 |
| サンプル(Storybook) | 提供中 | |
| React版実装 | ソースコード(GitHub) | 提供中 |
| サンプル(Storybook) | 提供中 |