syncfusion-aspnetcore-cards

Syncfusion ASP.NET Core カードコンポーネントの実装

Card コンポーネントは、ヘッダー、画像、アクションなどを含むコンテンツを表示するための柔軟なレイアウトコンテナーです。すっきりとしたモダンな外観で、商品紹介、コンテンツの概要、ユーザープロフィール、ダッシュボードウィジェットを作成するのに最適です。

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

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

• 整理されたコンテンツを表示する — 関連する情報（タイトル、画像、テキスト、アクション）を、視覚的にまとまりのあるコンテナーにまとめます
• ダッシュボードウィジェットを作成する — ダッシュボードのパネルやコンテンツカードに再利用可能なカードレイアウトを構築します
• 商品やアイテムを紹介する — 商品画像、説明、アクションボタンを構造化された形式で表示します
• レスポンシブレイアウトを構築する — レスポンシブデザインにより、横方向または縦方向に並べて表示できます
• インタラクティブな要素を追加する — カード内にボタン、リンク、画像、その他のコンポーネントを含めます
• モダンな UI パターンを実装する — Material Design やモダンなカードベースのインターフェイスに準拠します

コンポーネントの概要

Syncfusion ASP.NET Core Card（e-card クラス）では、次の機能を利用できます。

• 柔軟な構造 — ヘッダー、コンテンツ、画像、アクションボタンを任意に組み合わせられます
• レイアウトオプション — 縦方向（既定）、横方向、または積み重ねたレイアウト
• 豊富なコンテンツへの対応 — テキスト、画像、タイトルやサブタイトル付きのヘッダー、区切り線
• アクションボタン — ユーザー操作に合わせて、ボタンを横方向または縦方向に配置できます
• レスポンシブデザイン — さまざまな画面サイズやコンテナーに適応します
• 簡単なカスタマイズ — スタイル設定や配置に使用できる CSS クラス

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

はじめに

📄 参照: references/getting-started.md

• ASP.NET Core プロジェクトのセットアップと前提条件
• Syncfusion のスタイルシートとスクリプトの追加
• 最初の基本的なカードの作成
• アプリケーションの実行と結果の確認

ヘッダーとコンテンツ

📄 参照: references/header-and-content.md

• タイトルとサブタイトルを含むヘッダー構造
• 配置オプションを指定したヘッダー画像の追加
• テキストおよび HTML 要素用のコンテンツ領域
• 適切な要素構造を使用した完全な例

画像と区切り線

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

• カードへの全幅画像の追加
• オーバーレイを使用した画像タイトルとキャプションの追加
• コンテンツセクションの区切りに区切り線を使用
• 複数の画像と高度な画像レイアウト

アクションボタン

📄 参照: references/action-buttons.md

• アクションボタン用コンテナーの作成
• ボタンを横方向または縦方向に配置
• e-card-btn クラスを使用したボタンのスタイル設定
• アクションとしてボタンとアンカータグを使用

横方向および積み重ねたレイアウト

📄 参照: references/horizontal-layout.md

• e-card-horizontal を使用した横方向のカードレイアウトの作成
• e-card-stacked を使用した横方向と縦方向の組み合わせ
• 複数列のデザインにおけるコンテンツの配置
• 横方向のレイアウトに関するレスポンシブ設計上の考慮事項

高度なカスタマイズ

📄 参照: references/advanced-customization.md

• CSS を使用した画像タイトルの配置のカスタマイズ
• カード内への他の Syncfusion コンポーネントの組み込み
• スタイル設定とテーマ設定のオプション
• 実際の統合例（ListView、フォームなど）

クイックスタートの例

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

<div class="e-card">
    <div class="e-card-header">
        <p><strong>Card Title</strong></p>
        <p>Subtitle or description</p>
    </div>
    <div class="e-card-content">
        Your content goes here
    </div>
</div>

よく使われるパターン

パターン 1：画像とヘッダーを含むカード

Header (title/subtitle) + Image + Content + Actions

商品カード、プロフィールカード、ブログ記事のプレビューに使用します。

パターン 2：横並びの画像とコンテンツ

Image (left) | Header + Content + Actions (right)

横方向のレイアウト、リスト項目、メディアカードに使用します。

パターン 3：タイトルを重ねた画像

Image + Title (overlay at bottom) + Actions

ギャラリーカード、注目コンテンツ、ビジュアル紹介に使用します。

パターン 4：コンテンツのみのカード

Header + Content + Divider + Actions

シンプルな情報カード、概要カード、アクション項目に使用します。

主要な CSS クラス

クラス	目的
e-card	カードのルートコンテナー
e-card-header	ヘッダーのラッパー要素

| e-card-content | コンテンツ領域 | | e-card-image | カードの全幅画像 | | e-card-title | 画像上に重ねて表示するタイトル | | e-card-actions | アクションボタンのコンテナー | | e-card-btn | アクションボタンのスタイル | | e-card-separator | セクション間の区切り線 | | e-card-horizontal | 水平方向のレイアウト | | e-card-stacked | 水平方向のレイアウト内の垂直セクション | | e-card-vertical | アクションボタンの垂直方向の配置 | | e-card-corner | 画像の角を丸くする |

始める前に

ASP.NET Core プロジェクトに次の設定があることを確認してください。

• Syncfusion NuGet パッケージがインストールされている
• _ViewImports.cshtml に TagHelpers が登録されている
• _Layout.cshtml で Syncfusion CSS スタイルシートが参照されている
• 必要な JavaScript ファイルが含まれている

セットアップの全手順については、はじめにを参照してください。