メニュー

見出し概要

スクリーンショット:2行4列に並んだ見出しのバリエーション。左から順に、装飾なしの見出し、斜線模様のリードアイコン付き見出し、青い縦線のチップ付き見出し、下部に青い飾り罫のある見出しが、レベル別に上下2段で表示されている。

見出しは、主にページの冒頭やセクションの前に配置される、ページやセクションの主題を表すコンポーネントです。

ユースケース

ページ全体の主題を示すとき
ページの冒頭において、<title>要素に相当するページの主題をレベル1見出しとして配置することで、ページ全体の主題を示すことができます。
セクションの主題を示すとき
セクションの前に、セクションの主題となるテキストをレベル2〜6見出しとして配置することで、ページ全体のコンテンツ構造を示すことができます。

注意が必要なケース

項目を列挙するとき
項目を列挙したり、項目の階層構造を示したりするケースでは、見出しと段落の組み合わせではなく、箇条書きリストを使用してください。逆に、セクションの主題を示す必要がある場合は、箇条書きリストの階層化で見出し代わりにするのではなく、見出し要素を使用してください。
用語と説明をセットにして繰り返すとき
用語と説明をセットにして繰り返すようなケースでは、見出しと段落の組み合わせではなく、説明リストを使用してください。逆に、セクションの主題を示す必要がある場合は、説明リストのタイトルで見出しを表現するのではなく、見出し要素を使用してください。
原文に見出しが存在しないとき
見出しはコンテンツを構造化するための要素ですが、すべての文書やセクションに見出しが必要なわけではありません。物語や発話録など、見出しを挿入することが適当でない文書に見出しを追加する必要はありません。

関連コンポーネント

各種リソース

種別リソース状態
デザインデザインデータ(Figma)提供中
HTML版実装ソースコード(GitHub)提供中
サンプル(Storybook)提供中
React版実装ソースコード(GitHub)提供中
サンプル(Storybook)提供中