Heading

セマンティックな見出しコンポーネント。レベル1〜6、説明テキスト、ボーダー付きに対応。

GitHub でソースを見る

プレビュー

大見出し (h1)

中見出し (h2)

見出しに説明文を添えることができます

小見出し (h3)

h4 見出し

h5 見出し
h6 見出し

ボーダー付き見出し

使いどころ

使う場面

  • ページと節のタイトル。見出しは文書の構造を作るので、見た目の大きさでなく階層で選ぶ
  • level は見た目（heading--1 から 6 のスタイル）を決める。出力のタグは既定で同じ数字の h1 から h6
  • 見た目と階層が食い違うときは as でタグを指定する。例: 文書上は h3 だが目立たせたくないなら、level={5} と as="h3" を組み合わせる
  • 見出しの補足は description に渡す。見出しの直後に <p> が付く

使わない場面

  • 大きな文字や太字にするだけの用途。見出しでない文は Text の size と weight で整える
  • level の飛ばし（h2 の次に h4）。階層が分かりづらく、スクリーンリーダーの見出し一覧が崩れる
  • ページに h1 を複数置くこと。h1 はページのタイトルで 1 つ。Hero を使う LP では Hero が h1 を出力するので、ほかに h1 を置かない
  • カードやパネルの中の短いタイトルを見た目の都合で h1 や h2 にすること。周囲の階層に合わせた level（多くは 3 か 4）を選ぶ

使い方

<Heading level={1}>大見出し</Heading>
<Heading level={2} description="補足テキスト">中見出し</Heading>
<Heading level={3} bordered>ボーダー付き</Heading>

プロパティ

名前型デフォルト説明
level1 | 2 | 3 | 4 | 5 | 62見出しレベル（サイズとセマンティクス）
as`h${HeadingLevel}`なしレンダリングするHTML要素を上書き
descriptionReactNodeなし見出し下の説明テキスト
borderedbooleanfalse下線ボーダーを表示
children必須ReactNodeなし見出しの文言

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • スクリーンリーダー利用者は見出し一覧から目的の節へ移動する。ページ全体で h1、h2、h3 の順に入れ子になっているかを確認する
  • level の既定は 2。ページの最上位に置くなら level={1} を明示する
  • Section 内の SectionHeader は h2、FeatureCard と PricingCard は h3、LPFooter の列見出しは h4 を出力する。これらの下や前後に Heading を置くときは階層を合わせる

文言

  • 見出しだけを読んで、その節に何が書いてあるか分かるようにする。「概要」より「請求書の発行方法」
  • 文にするなら言い切る。体言止めか、「〜する」で終える

関連するコンポーネント