syncfusion-react-cards

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

Syncfusion React Card コンポーネントは、ヘッダー、画像、区切り線、アクションボタン、統合コンポーネントに対応した、整理されたコンテンツを表示するための軽量で柔軟なコンテナーです。

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

次のような場合にこのスキルを使用してください。

• シンプルまたは複雑なカードベースのレイアウトを作成する
• ヘッダー、画像、アクションセクションを備えたカードを作成する
• 区切り線を使ってカード内にコンテンツを表示する
• カードにアクションボタン（横並びまたは縦並び）を追加する
• コンテンツを積み重ねた横型カードレイアウトを作成する
• カード内に他の Syncfusion コンポーネント（ListView、Charts など）を埋め込む
• 画像、タイトル、配置を使ってカードの外観をカスタマイズする
• レスポンシブなカードベースのユーザーインターフェイスを構築する

ナビゲーションガイド

実装する内容に応じて、このガイドに従ってください。

はじめに

📄 参照: references/getting-started.md

• パッケージのインストールとセットアップ
• 基本的なカード構造と CSS のインポート
• シンプルなカードの例
• 必要な依存関係

カードの構造とヘッダー

📄 参照: references/card-structure-headers.md

• カードのルート要素とクラス
• タイトルとサブタイトルを含むヘッダー構造
• ヘッダー画像と配置
• コンテンツセクションと構成

画像、タイトル、区切り線

📄 参照: references/images-titles-dividers.md

• カードへの画像の追加
• 画像タイトルとオーバーレイ効果
• セクションを区切るための区切り線
• タイトルの配置とカスタマイズ

アクションボタン

📄 参照: references/action-buttons.md

• カードへのボタンとリンクの追加
• 横並びのボタンレイアウト（デフォルト）
• 縦並びのボタン配置
• アイコンボタンとスタイル設定

レイアウトと応用

📄 参照: references/layouts-customization.md

• 横型カードレイアウト
• カード内の縦積みセクション
• 画像タイトルの配置クラス
• CSS による配置とスタイル設定

コンポーネントの埋め込み

📄 参照: references/embedding-components.md

• カードへの ListView の統合
• チャートやデータコンポーネントの埋め込み
• 動的コンテンツのパターン
• 実用例

クイックスタートの例

ヘッダーとコンテンツを含む基本的なカード:

import React from 'react';
import '@syncfusion/ej2-layouts/styles/tailwind3.css';

export default function BasicCard() {
  return (
    <div className="e-card">
      <div className="e-card-header">
        <div className="e-card-header-caption">
          <div className="e-card-header-title">Card Title</div>
          <div className="e-card-sub-title">Subtitle</div>
        </div>
      </div>
      <div className="e-card-content">
        This is the main content of the card. Add any HTML content here.
      </div>
    </div>
  );
}

アクションボタン付きカード:

import React from 'react';

export default function CardWithButtons() {
  return (
    <div className="e-card">
      <div className="e-card-header-title">Product Card</div>
      <div className="e-card-content">
        High-quality product description goes here.
      </div>
      <div className="e-card-actions">
        <button className="e-card-btn">View</button>
        <button className="e-card-btn">Buy Now</button>
        <button className="e-card-btn">Share</button>
      </div>
    </div>
  );
}

横型レイアウトのカード:

import React from 'react';

export default function HorizontalCard() {
  return (
    <div className="e-card e-card-horizontal" style={{ width: '400px' }}>
      <img src="./image.png" alt="Card" style={{ height: '180px' }} />
      <div className="e-card-stacked">
        <div className="e-card-header">
          <div className="e-card-header-caption">
            <div className="e-card-header-title">Title</div>
          </div>
        </div>
        <div className="e-card-content">
          Content displayed vertically within horizontal layout
        </div>
      </div>
    </div>
  );
}

よく使用するパターン

パターン 1: ユーザープロフィールカード

ヘッダー画像、タイトル、アクションボタンを組み合わせて、ユーザー一覧やチームページ向けのプロフィールカードを作成します。

<div className="e-card">
  <div className="e-card-header">
    <div className="e-card-header-image" style={{ backgroundImage: 'url(./profile.jpg)', width: '60px', height: '60px', borderRadius: '50%' }} />
    <div className="e-card-header-caption">
      <div className="e-card-header-title">John Doe</div>
      <div className="e-card-sub-title">Product Manager</div>
    </div>
  </div>
  <div className="e-card-content">
    Experienced in building user-centric products.
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Message</button>
    <button className="e-card-btn">Follow</button>
  </div>
</div>

パターン 2: 画像付き商品カード

カード画像とタイトルを使って、価格とアクションボタンを含む商品一覧を作成します。

<div className="e-card">
  <div className="e-card-image" style={{ backgroundImage: 'url(./product.jpg)', height: '200px' }}>
    <div className="e-card-title">Product Name</div>
  </div>
  <div className="e-card-content">
    <p>$99.99</p>
    <p>High-quality product with excellent features</p>
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Add to Cart</button>
    <button className="e-card-btn">Buy Now</button>
  </div>
</div>

パターン 3: ブログ記事カード

ヘッダー、区切り線、コンテンツセクションを組み合わせて、ブログ記事カードを作成します。

<div className="e-card">
  <div className="e-card-header-title">Blog Post Title</div>
  <div className="e-card-sub-title">Published on March 26, 2026</div>
  <div className="e-card-separator" />
  <div className="e-card-content">
    Blog post excerpt and content goes here...
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Read More</button>
    <button className="e-card-btn">Share</button>
  </div>
</div>

主な 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-actions	ボタンのコンテナー
e-card-btn	個々のボタンのスタイル
e-card-vertical	ボタンの縦並び配置
e-card-separator	区切り線の要素
e-card-horizontal	横型カードレイアウト
e-card-stacked	横型レイアウト内の縦積み
e-card-corner	画像の角丸

必須のセットアップ

1. パッケージをインストールします。

   npm install @syncfusion/ej2-layouts
   

2. CSS をインポートします。

   @import '@syncfusion/ej2-layouts/styles/tailwind3.css';
   

3. カード要素を作成します。

   • ルートの div に e-card クラスを追加します
   • 必要に応じてヘッダー、コンテンツ、画像、またはボタンを追加します
   • レイアウトとスタイル設定のために追加のクラスを適用します

一般的なユースケース

• ダッシュボードカード：主要な指標やデータの概要を表示します
• 商品一覧：画像や価格とともに商品を紹介します
• チームメンバー：ユーザープロフィールや連絡先情報を表示します
• ブログ記事：メタ情報とともに記事のプレビューを表示します
• 機能の紹介：説明とともに機能を紹介します
• データレポート：表形式またはリスト形式のデータをカードに整理します
• 通知カード：アラートやメッセージを表示します
• 設定カード：関連する設定をまとめます

---

次のステップ： 具体的なニーズに合ったリファレンスを選び、提供されている例やパターンに沿ってカードレイアウトを実装してください。