← Hubに戻る

カード素材

基本カード

タイトル
説明テキストがここに入ります。
フッター
<div class="card">
  <div class="card-title">タイトル</div>
  <div class="card-desc">説明テキストがここに入ります。</div>
  <div class="card-footer">フッター</div>
</div>
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px #4f8cff22;
  padding: 28px 32px;
  min-width: 220px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
  box-shadow: 0 8px 32px #4f8cff44;
  transform: translateY(-6px) scale(1.03);
}
.card-title {
  font-size: 1.2em;
  font-weight: bold;
  color: #4f8cff;
}
.card-desc {
  color: #444;
  font-size: 1em;
}
.card-footer {
  margin-top: 12px;
  font-size: 0.95em;
  color: #888;
}

イメージ付きカード

サンプル画像
イメージカード
画像とテキストの組み合わせ。
<div class="card">
  <img src="画像URL" alt="サンプル画像" style="width:100%;border-radius:8px 8px 0 0;">
  <div class="card-title">イメージカード</div>
  <div class="card-desc">画像とテキストの組み合わせ。</div>
</div>

プロフィールカード

アイコン
山田 太郎
Webデザイナー
<div class="card" style="align-items:center;text-align:center;">
  <img src="アイコンURL" alt="アイコン" style="width:60px;height:60px;border-radius:50%;margin-bottom:8px;">
  <div class="card-title">山田 太郎</div>
  <div class="card-desc">Webデザイナー</div>
</div>

ラベル付きカード

NEW
ラベル付き
ラベルやタグを付けられるカード。
<div class="card">
  <span style="display:inline-block;background:#ff6ec4;color:#fff;padding:2px 10px;border-radius:12px;font-size:0.95em;margin-bottom:8px;">NEW</span>
  <div class="card-title">ラベル付き</div>
  <div class="card-desc">ラベルやタグを付けられるカード。</div>
</div>

グラデーションカード

グラデーション
背景がグラデーションのカード。
<div class="card" style="background:linear-gradient(120deg,#4f8cff 60%,#ff6ec4 100%);color:#fff;">
  <div class="card-title">グラデーション</div>
  <div class="card-desc">背景がグラデーションのカード。</div>
</div>

ホバーアニメーションカード

ホバーアニメ
ホバーで拡大＆シャドウ強調。
<div class="card card-hover">
  <div class="card-title">ホバーアニメ</div>
  <div class="card-desc">ホバーで拡大＆シャドウ強調。</div>
</div>
.card-hover:hover {
  transform: scale(1.07) rotate(-1deg);
  box-shadow: 0 12px 32px #ff6ec488;
}

通知カード

お知らせ
新しいアップデートがあります。
<div class="card" style="border-left:6px solid #4f8cff;">
  <div class="card-title">お知らせ</div>
  <div class="card-desc">新しいアップデートがあります。</div>
</div>

ボーダーカード

ボーダーカード
点線枠のカードデザイン。
<div class="card" style="border:2px dashed #ff6ec4;">
  <div class="card-title">ボーダーカード</div>
  <div class="card-desc">点線枠のカードデザイン。</div>
</div>

アイコン付きカード

★
アイコン付き
アイコンとテキストの組み合わせ。
<div class="card" style="flex-direction:row;align-items:center;gap:16px;">
  <span style="font-size:2em;color:#4f8cff;">★</span>
  <div>
    <div class="card-title">アイコン付き</div>
    <div class="card-desc">アイコンとテキストの組み合わせ。</div>
  </div>
</div>