# 記事カード（画像＋タグ）のCSS実装

> ブログ一覧で使う記事カード。サムネイル・タグ・タイトル・抜粋・日付の定番構成を、aspect-ratioとoverflowで崩れないように組みます。

- カテゴリ: カード
- URL: https://www.css-dictionary.com/recipes/article-card/

## HTML

```html
<article class="card">
  <div class="card-media" role="img" aria-label="記事のサムネイル"></div>
  <div class="card-body">
    <div class="card-tags">
      <span class="tag">CSS</span>
      <span class="tag">レイアウト</span>
    </div>
    <h3 class="card-title">Gridで作る雑誌風レイアウト入門</h3>
    <p class="card-excerpt">grid-template-areasを使うと、複雑な誌面のような配置もHTMLの順序を変えずに実現できます。</p>
    <p class="card-meta">2026-07-23 ・ 5分で読める</p>
  </div>
</article>
```

## CSS

```css
.card {
  max-width: 280px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 10px;
  overflow: hidden; /* 角丸から画像がはみ出さないように */
}

.card-media {
  aspect-ratio: 16 / 9; /* 画像が未読込でも高さが確保されガタつかない */
  background: linear-gradient(135deg, #d9c79a, #b0413e);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  padding: 2px 10px;
  border: 1px solid #cbbfa5;
  border-radius: 999px;
  font-size: 11px;
  color: #8a6d3b;
}

.card-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.card-excerpt {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #5c5445;
}

.card-meta {
  margin: 0;
  font-size: 12px;
  color: #b5a583;
}
```

## 仕組みの解説

サムネイル領域に aspect-ratio: 16 / 9 を指定しておくと、画像の読み込み前後で高さが変わらず、一覧のガタつき（レイアウトシフト）を防げます。カード全体の overflow: hidden は、角丸の内側に画像を収めるためです。本文は flex-direction: column と gap で縦に積み、要素間の余白をmarginではなくgapで一元管理しています。

## 実装のポイント

実際の画像を使う場合は img に width/height 属性か object-fit: cover を指定します。抜粋の行数制限には line-clamp が使えます。

## AIに依頼するときの文例

ブログ一覧用の記事カードを作ってください。サムネイル（aspect-ratio: 16/9）・タグの列・タイトル・抜粋・日付の構成で、画像読み込み時にレイアウトシフトが起きない作りにしてください。

## 使っているプロパティ

- [aspect-ratio](https://www.css-dictionary.com/property/aspect-ratio.md)
- [overflow](https://www.css-dictionary.com/property/overflow.md)
- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [flex-direction](https://www.css-dictionary.com/property/flex-direction.md)
- [gap](https://www.css-dictionary.com/property/gap.md)