カードとは

画像・見出し・本文・リンクなどをひとまとめにした、四角い箱型の表示パーツ。

概要

画像や見出し、本文、リンクなどの情報を 1 枚の四角い箱にまとめて表示するパーツです。名刺やトランプのカードのように独立した情報の単位として扱えるため、商品一覧やブログの記事一覧など、同じ形の情報を繰り返し並べたい場面でよく使われます。単体でも、後述の「カードグリッド」のように複数枚並べても使えます。

別名

表記ゆれ：カード、カード UI、カード型レイアウト、card

「カード UI」「カード型レイアウト」はどちらもこのパーツを指す言い方で、指す範囲に大きな違いはありません。

AI への伝え方

「カードコンポーネントを作って」で通じます。カード全体をクリック可能にするか、カード内のリンクだけをクリック可能にするかで実装が変わる点なので、「カード全体をリンクにして」のように伝えると仕様がぶれません。カード全体をクリック可能にする場合、<a> を position: absolute かつ inset: 0 の ::after 疑似要素でカード全面に拡張する実装がよく使われます(内部に別のリンクを置かない前提)。

似たパーツとの違い

複数のカードを格子状に並べる「カードグリッド」は、このカード自体ではなく、カードを並べる側のレイアウトを指します。カード 1 枚の見た目・構造と、並べ方の話は分けて考えると理解しやすくなります。

デモ

タイトルが入ります

カードの本文がここに入ります。2〜3 行程度の説明文を想定したサンプルテキストです。

詳しく見る

コード

HTML

<article class="card-demo">
  <div class="card-demo__media" aria-hidden="true"></div>
  <div class="card-demo__body">
    <h3 class="card-demo__title">タイトルが入ります</h3>
    <p class="card-demo__text">
      カードの本文がここに入ります。2〜3 行程度の説明文を想定したサンプルテキストです。
    </p>
    <a class="card-demo__link" href="#">詳しく見る</a>
  </div>
</article>

CSS

.card-demo {
  position: relative;
  width: 260px;
  font-family: sans-serif;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-demo:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.card-demo__media {
  height: 120px;
  background: linear-gradient(135deg, #0017c1 0%, #6673e6 100%);
}

.card-demo__body {
  padding: 16px;
}

.card-demo__title {
  margin: 0 0 8px;
  font-size: 16px;
  color: #212121;
}

.card-demo__text {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

.card-demo__link {
  position: relative;
  font-size: 13px;
  color: #0017c1;
  text-decoration: none;
  font-weight: bold;
}

.card-demo__link:hover {
  text-decoration: underline;
}

/* カード全体をクリック可能にする場合は、リンクの ::after を
   position: absolute; inset: 0; でカード全面に拡張する(内部に別のリンクを置かない前提) */
.card-demo__link::after {
  content: "";
  position: absolute;
  inset: 0;
}