カード (Cards)

関連する情報をグループ化して表示する、柔軟で再利用可能なカードコンポーネントです。

基本的なカード構造

シンプルなカードです。基本の構造でコンテンツを囲みます。

カードタイトル

ヘッダー、ボディ、フッターを持つ完全なカード構造です。

Code:

<div class=“card”>
<div class=“card-header”>カードタイトル</div>
<div class=“card-body”>コンテンツ</div>
<div class=“card-footer”>アクション</div>
</div>

スタイル

デフォルト

基本のカードスタイル

Elevated

影付きで立体感があります

Outlined

太い境界線で強調

Code:

<div class=“card”>デフォルト</div>
<div class=“card card-elevated”>Elevated</div>
<div class=“card card-outlined”>Outlined</div>

サイズ

小さいサイズ

コンパクトな表示に適しています

標準サイズ

最も一般的に使用されるサイズです

大きいサイズ

重要なコンテンツや詳細な情報の表示に使用します

Code:

<div class=“card card-sm”>小</div>
<div class=“card card-md”>中</div>
<div class=“card card-lg”>大</div>

インタラクティブカード

クリック可能

ホバーすると浮き上がり、カーソルも変わります

選択済み

選択状態を示すスタイルです

Code:

<div class=“card card-interactive”>クリック可能</div>
<div class=“card card-selected”>選択済み</div>

実用的なパターン

田中太郎

フロントエンド開発者

総売上

¥1,234,567

+12.5% 前月比

商品名

商品の説明文がここに入ります

¥9,800

プロフィールカード:

<div class=“card card-elevated”>
  <div class=“card-body text-center”>
    <div class=“w-16 h-16 bg-blue-100 rounded-full mx-auto mb-4 flex items-center justify-center”>
      <svg class=“w-8 h-8 text-blue-600” fill=“none” stroke=“currentColor” viewBox=“0 0 24 24”>
        <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z”></path>
      </svg>
    </div>
    <h3 class=“font-semibold”>田中太郎</h3>
    <p class=“text-gray-600 text-sm”>フロントエンド開発者</p>
    <button class=“btn btn-primary btn-sm mt-3”>プロフィール</button>
  </div>
</div>

統計カード:

<div class=“card card-outlined”>
  <div class=“card-body”>
    <div class=“flex items-center justify-between mb-2”>
      <h3 class=“font-semibold text-gray-900”>総売上</h3>
      <svg class=“w-5 h-5 text-green-500” fill=“none” stroke=“currentColor” viewBox=“0 0 24 24”>
        <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M13 7h8m0 0v8m0-8l-8 8-4-4-6 6”></path>
      </svg>
    </div>
    <p class=“text-2xl font-bold text-gray-900”>¥1,234,567</p>
    <p class=“text-sm text-green-600”>+12.5% 前月比</p>
  </div>
</div>

商品カード:

<div class=“card card-interactive card-elevated”>
  <div class=“card-body”>
    <div class=“w-full h-32 bg-gray-200 rounded mb-4 flex items-center justify-center”>
      <svg class=“w-12 h-12 text-gray-400” fill=“none” stroke=“currentColor” viewBox=“0 0 24 24”>
        <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z”></path>
      </svg>
    </div>
    <h3 class=“font-semibold mb-1”>商品名</h3>
    <p class=“text-gray-600 text-sm mb-2”>商品の説明文がここに入ります</p>
    <p class=“text-lg font-bold text-blue-600”>¥9,800</p>
  </div>
</div>

アクセシビリティ

  • • インタラクティブカードにはキーボードアクセス（Tabキー）対応
  • • 選択状態は視覚的に明確に表示されます
  • • カードのコンテンツは論理的な順序で構造化
  • • 色だけでなく境界線やアイコンでも状態を表現
  • • 十分なコントラスト比を確保

アクセシブルなカード

Tabキーでフォーカスできます。Enterキーで選択可能です。