kaze風
SplitSection
画像＋テキストの左右分割レイアウト。LP の交互セクションに最適。
プレビュー
使いどころ
使う場面
- 画像や画面のスクリーンショットと、説明の文章を左右に並べる。1 つの機能を深く説明する節に使う
- media に画像や図、children に見出し・本文・リンクを渡す。左右を入れ替えるときは reverse
- 2 つ以上続けるときは reverse を交互にして、視線が左右に動くようにする
使わない場面
- 同じ重みの特長を並べる場面。FeatureGrid を使う
- 画像のない節。Section と SectionHeader だけで足りる
- 3 つ以上の要素を横に並べること。2 列は文字と画像の組に限る
- mediaBg で複数の色相のグラデーションを使うこと。単色か単一アクセントの控えめな背景にする
使い方
<SplitSection mediaBg="linear-gradient(135deg, var(--zinc-200), var(--zinc-400))">
<Text variant="overline">Philosophy</Text>
<Text size="2xl" weight="bold">見出しテキスト</Text>
<Text variant="lead">説明テキスト</Text>
<Button variant="outline">詳しく見る</Button>
</SplitSection>
<SplitSection mediaBg="..." reverse>
{/* reverse で左右反転 */}
</SplitSection>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
media | ReactNode | なし | メディアエリアに表示する要素 |
mediaBg | string | なし | メディアエリアの背景（CSS gradient / color） |
reverse | boolean | false | テキスト左・画像右に反転 |
children | React.ReactNode | なし | テキストエリアの内容 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- 出力は <section> で、見出しを自動では持たない。children の先頭に h2 か h3 の見出しを置き、節の階層に合わせる
- media の画像には、内容を伝える alt を付ける。飾りなら alt="" にする
- DOM の順序は media が先、本文が後で、reverse は見た目だけを入れ替える。読み上げでも本文より先に media が読まれるので、意味のある画像には alt を付け、本文だけで内容が伝わるようにする
文言
- 見出しは機能名でなく、それで何ができるかを書く（「承認の状況を一画面で見渡せる」）
- 本文は 2 から 3 文。リンクは動詞で書く（「仕組みを見る」）