syncfusion-javascript-card

Syncfusion Card コンポーネントの実装

Card は、柔軟なコンテンツコンテナーを作成するための軽量な純 CSS レイアウトコンポーネントです。ヘッダー、画像、アクションボタン、カスタムスタイルに対応し、情報を構造的に整理して表示できます。

このスキルを使用する場面

次のような場合に、Syncfusion Card コンポーネントを使用します。

• コンテンツを整理されたまとまりのあるセクションに表示する
• 製品カード、サービス案内、チームメンバーのプロフィールを作成する
• 複数のカード要素を含むダッシュボードやポートフォリオのレイアウトを作成する
• 1 つのコンテナー内にヘッダー、画像、アクションボタンを組み合わせる
• 複数のコンテンツセクションに一貫したスタイルを適用する
• カードコンテナー内に他の Syncfusion コンポーネントを組み込む

主な機能

• 純 CSS コンポーネント：基本機能に JavaScript の依存関係は不要です
• 柔軟な構造：ヘッダー、コンテンツ、画像、アクションボタンに対応します
• 複数のレイアウト：縦方向（デフォルト）と横方向の配置に対応します
• カスタマイズ可能：スタイル設定やレスポンシブデザインに対応する豊富な CSS カスタマイズ機能があります
• コンポーネントの統合：カード内に他の Syncfusion コントロール（ListView、DropDownList など）を埋め込めます
• アクセシビリティ：tabindex に対応したセマンティック HTML 構造です

コンポーネントの概要

基本構造

e-card (root)
├── e-card-header (optional)
│   ├── e-card-header-image (optional)
│   └── e-card-header-caption
│       ├── e-card-header-title
│       └── e-card-sub-title (optional)
├── e-card-image (optional)
│   └── e-card-title (optional caption)
├── e-card-content
├── e-card-separator (optional dividers)
└── e-card-actions (optional)
    ├── e-card-btn (buttons)
    └── anchor elements

主な CSS クラス

クラス	目的	用途
e-card	ルートカード要素	必須
e-card-header	ヘッダーコンテナー	任意
e-card-header-caption	タイトル／サブタイトルのラッパー	ヘッダーテキストをまとめます
e-card-header-title	メインのヘッダータイトル	主見出し
e-card-sub-title	サブタイトルのテキスト	副見出し
e-card-header-image	ヘッダー画像要素	ヘッダーの装飾
e-card-image	カードの全幅画像	メイン画像
e-card-title	画像のキャプション／タイトル	画像上に重ねて表示
e-card-content	メインコンテンツ領域	本文／要素
e-card-separator	視覚的な区切り	セクションの分離
e-card-actions	アクションボタンのコンテナー	ボタングループ
e-card-btn	個々のボタン	操作要素
e-card-vertical	縦方向の配置	ボタンのレイアウトオプション
e-card-horizontal	横方向のレイアウト	要素を横並びに配置
e-card-stacked	横方向レイアウト内での積み重ね	横方向レイアウト内の縦方向セクション
e-card-corner	角丸	画像のスタイル設定

ドキュメントとナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

• @syncfusion/ej2-layouts を使用したインストールとパッケージの設定
• 基本的なカードのマークアップ構造
• CSS のインポートとテーマの設定
• 依存関係と開発環境
• 最小限の例を使った最初のレンダリング

ヘッダーとコンテンツ

📄 参照先： references/header-and-content.md

• タイトルとサブタイトルを含むヘッダー構造
• 位置を指定したヘッダー画像の追加
• サブタイトルへの対応とスタイル設定
• コンテンツセクションとテキスト領域
• ヘッダー画像の配置（前／後）

アクションボタン

📄 参照先： references/action-buttons.md

• アクションボタンの構造とマークアップ
• 横方向の配置（デフォルトの動作）
• e-card-vertical を使用した縦方向の配置
• e-card-btn クラスを使用したボタンのスタイル設定
• ボタンとアンカータグの組み合わせ

カードのレイアウトと画像

📄 参照先： references/card-layout.md

• カードの全幅画像（e-card-image）
• オーバーレイ表示の画像タイトルとキャプション
• 画像タイトルの位置（四隅）のカスタマイズ
• セクションを分ける区切り線
• 横方向のカードレイアウト（e-card-horizontal）
• 横方向レイアウト内でのコンテンツの積み重ね

カスタマイズとスタイリング

📄 参照： references/customization-and-styling.md

• CSS のカスタマイズパターンとベストプラクティス
• 要素ごとのスタイリング（カード、ヘッダー、コンテンツ、ボタン、画像）
• レイアウトのカスタマイズ（マージン、パディング、間隔）
• 色、フォント、タイポグラフィの変更
• レスポンシブデザインに関する考慮事項
• テーマとの統合と CSS 変数

コンポーネントの統合

📄 参照： references/component-integration.md

• カード内への他の Syncfusion コンポーネントの埋め込み
• リスト形式のコンテンツ向け ListView の統合
• DropDownList やその他のコントロールの統合
• 複合 UI レイアウトとパターン
• To-Do リストと高度な例

---

クイックスタートの例

基本的なカード

<div class="e-card">
    <div class="e-card-content">
        Sample Card Content
    </div>
</div>

ヘッダーとコンテンツを含むカード

<div class="e-card">
    <div class="e-card-header">
        <div class="e-card-header-caption">
            <div class="e-card-header-title">Card Title</div>
        </div>
    </div>
    <div class="e-card-content">
        Card content goes here
    </div>
</div>

ヘッダー画像とアクションを含むカード

<div class="e-card">
    <div class="e-card-header">
        <div class="e-card-header-image"></div>
        <div class="e-card-header-caption">
            <div class="e-card-header-title">Title</div>
            <div class="e-card-sub-title">Subtitle</div>
        </div>
    </div>
    <div class="e-card-content">
        Content here
    </div>
    <div class="e-card-actions">
        <button class="e-card-btn">Button 1</button>
        <button class="e-card-btn">Button 2</button>
    </div>
</div>

---

一般的なパターン

1. 商品カードパターン

ヘッダー画像、タイトル、説明、アクションボタンを組み合わせて、eコマースやマーケットプレイスのインターフェースを作成します：

<div class="e-card">
    <div class="e-card-image"></div>
    <div class="e-card-header-caption">
        <div class="e-card-header-title">Product Name</div>
        <div class="e-card-sub-title">Price/Category</div>
    </div>
    <div class="e-card-content">Product description</div>
    <div class="e-card-actions">
        <button class="e-card-btn">Add to Cart</button>
        <button class="e-card-btn">Details</button>
    </div>
</div>

2. チームメンバーカードパターン

ヘッダー画像、名前、役割、連絡先ボタンを含むプロフィール情報を表示します：

<div class="e-card">
    <div class="e-card-header">
        <div class="e-card-header-image"></div>
        <div class="e-card-header-caption">
            <div class="e-card-header-title">Name</div>
            <div class="e-card-sub-title">Role/Title</div>
        </div>
    </div>
    <div class="e-card-content">Bio or description</div>
    <div class="e-card-actions">
        <button class="e-card-btn">Email</button>
        <button class="e-card-btn">LinkedIn</button>
    </div>
</div>

3. 複数セクションのカードパターン

区切り線を使って、カードを論理的なセクションに分割します：

<div class="e-card">
    <div class="e-card-title">Section 1</div>
    <div class="e-card-separator"></div>
    <div class="e-card-content">Content 1</div>
    <div class="e-card-separator"></div>
    <div class="e-card-content">Content 2</div>
</div>

4. 横型カードパターン

画像と縦に並べたコンテンツを横並びに配置します：

<div class="e-card e-card-horizontal">
    <img src="image.png" alt="Sample">
    <div class="e-card-stacked">
        <div class="e-card-header-title">Title</div>
        <div class="e-card-content">Description</div>
        <div class="e-card-actions">
            <button class="e-card-btn">Action</button>
        </div>
    </div>
</div>

---

一般的なユースケース

1. 商品一覧：画像、商品名、価格、購入ボタンを含むeコマース商品カードを作成します
2. ダッシュボードウィジェット：指標、グラフ、ステータス表示用の独立したカードウィジェットを作成します
3. チームディレクトリ：従業員やチームメンバーのプロフィールを写真や連絡先情報とともに表示します
4. コンテンツカード：特集画像や概要を含む記事、ブログ投稿、ニュース項目を紹介します
5. サービス紹介：説明、アイコン、行動喚起ボタンを使ってサービスを紹介します
6. ポートフォリオ項目：画像、説明、プロジェクトへのリンクを含むプロジェクトの実績を表示します
7. 設定パネル：カードベースのレイアウトで設定や環境設定のオプションを整理します
8. データカード：ヘッダー、コンテンツセクション、アクションボタンを使って構造化データを提示します

---

インストール

Card コンポーネントには @syncfusion/ej2-layouts パッケージが必要です。詳細なセットアップ手順については、はじめにのリファレンスを参照してください。

---

次のステップ

1. 開始：はじめにを読み、インストールと基本的なセットアップを行います
2. 構築：上記の「一般的なパターン」セクションからパターンを選びます
3. 拡張：必要に応じてヘッダー、画像、ボタンを追加します
4. スタイリング：「カスタマイズとスタイリング」ガイドを使ってデザインに合わせます
5. 統合：必要に応じて「コンポーネントの統合」ガイドを使い、他のコンポーネントを埋め込みます