kaze風
Section
汎用セクションラッパー
プレビュー
使いどころ
使う場面
- LP を縦に区切る基本の単位。Section の中に SectionHeader と本文（FeatureGrid、Stats など）を置く
- size は sm、md、lg で上下の余白を変える。節の重みに合わせる
- background は default、muted、dark。節の切り替わりを背景で示し、muted と default を交互にするのが基本
- SectionHeader の title は h2 で出力される。節ごとに 1 つ置く
使わない場面
- ページ最上部。Hero を使う
- 業務アプリの画面内のまとまり。Card や Heading を使う
- dark を何度も重ねること。強い節はページ内で 1 回から 2 回にとどめる
- 背景の違いを装飾のために増やすこと。色数は default、muted、dark の 3 つで足りる
使い方
<Section size="md" background="muted">
<SectionHeader title="タイトル" description="説明" />
<FeatureGrid>...</FeatureGrid>
</Section>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | 上下パディングのサイズ |
background | "default" | "muted" | "dark" | "default" | 背景色バリアント |
children | React.ReactNode | なし | セクションの内容 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- <section> で出力されるが、名前がないとランドマークにならない。節のタイトルと結びつけたいときは aria-labelledby で見出しの id を指す
- SectionHeader の h2 は Hero の h1 の下の階層。節の中の小見出しは h3 から始める（FeatureCard と PricingCard は h3）
文言
- SectionHeader の title は、その節で読者が得ることを言い切る（「3 つの手順で導入できる」）。「特長」「機能一覧」のようなラベルだけの見出しは避ける
- description は 1 から 2 文。title の繰り返しにしない