Section Component

セクションコンポーネントのデモ - バーティカルリズムに準拠したレイアウトコンポーネント

基本的な使用例

Basic Usage

複合コンポーネントパターンを使用したシンプルなSectionコンポーネントの使用例です。

このセクションは、複合コンポーネントパターン（Section.Header、Section.Title、Section.Subtitle、Section.Description）を使用して作成されています。

見出しレベルのバリエーション

h1からh6までの適切な見出し階層とそのコード例

見出しレベルの指定

TSX

// 見出しレベルの指定例
<Section.Title level="h1">H1 見出し</Section.Title>
<Section.Title level="h2">H2 見出し</Section.Title>
<Section.Title level="h3">H3 見出し</Section.Title>
<Section.Title level="h4">H4 見出し</Section.Title>
<Section.Title level="h5">H5 見出し</Section.Title>
<Section.Title level="h6">H6 見出し</Section.Title>

レンダリング結果

H1 見出し

H2 見出し

H3 見出し

H4 見出し

H5 見出し

H6 見出し

複合コンポーネントパターン

Compound Component Pattern

Sectionコンポーネントは複合コンポーネントパターンを採用し、柔軟で予測可能なAPIを提供します。

複合コンポーネントの構造

TSX

// 複合コンポーネントパターンの例
<Section>
  <Section.Header>
    <Section.Title>タイトル</Section.Title>
    <Section.Subtitle>サブタイトル</Section.Subtitle>
    <Section.Description>
      説明文テキスト
    </Section.Description>
  </Section.Header>
  
  <Section.Container>
    <div>メインコンテンツ</div>
  </Section.Container>
</Section>

実装例

デモタイトル

デモサブタイトル

複合コンポーネントパターンの実装例です。各コンポーネントが適切に組み合わされています。

メインコンテンツエリアの例

コンポーネント構成要素

Section - メインコンテナ
Section.Header - ヘッダーセクション
Section.Title - タイトル要素（h1-h6）
Section.Subtitle - サブタイトル要素
Section.Description - 説明文要素
Section.Container - コンテンツコンテナ

使用例コード

実際のコードと実行結果を比較して、Sectionコンポーネントの使用方法を理解できます。

基本的な使用法

TSX

import { Section } from '@/components/Section';

// 基本的な使用法
<Section spacingBottom="large">
  <Section.Header>
    <Section.Title>セクションタイトル</Section.Title>
    <Section.Subtitle>サブタイトル</Section.Subtitle>
    <Section.Description>
      セクションの説明文
    </Section.Description>
  </Section.Header>
  <Section.Container>
    {/* コンテンツ */}
    <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded">
      <p>セクションのコンテンツエリア</p>
    </div>
  </Section.Container>
</Section>

実行結果

セクションタイトル

サブタイトル

セクションの説明文

セクションのコンテンツエリア