# 統計カード（KPI表示）のCSS実装

> ダッシュボードで使う数値カード。tabular-numsで桁を揃え、増減は色と矢印記号の両方で伝える色覚フレンドリーな作りです。

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

## HTML

```html
<div class="stats">
  <article class="stat">
    <p class="stat-label">月間ページビュー</p>
    <p class="stat-value">128,400</p>
    <p class="stat-diff up">↑ 12.4%（先月比）</p>
  </article>
  <article class="stat">
    <p class="stat-label">直帰率</p>
    <p class="stat-value">42.1%</p>
    <p class="stat-diff down">↓ 3.2pt（先月比）</p>
  </article>
</div>
```

## CSS

```css
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stat {
  min-width: 160px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 10px;
}

.stat p { margin: 0; }

.stat-label {
  font-size: 12px;
  color: #8a7d63;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1a1712;
  line-height: 1.2;
  font-variant-numeric: tabular-nums; /* 数字の桁幅を揃える */
}

.stat-diff {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
}

.stat-diff.up   { color: #4a7c59; }
.stat-diff.down { color: #8e354a; }
```

## 仕組みの解説

数値には font-variant-numeric: tabular-nums を指定し、更新で値が変わっても桁幅が揃ってガタつかないようにします。増減の良し悪しは緑／臙脂の色だけでなく「↑↓」の記号でも重ねて表現し、色の区別が難しいユーザーにも伝わるようにしています。カード自体は flex-wrap で並べ、画面幅に応じて折り返します。

## 実装のポイント

「増加=良い」とは限らない指標（直帰率など）では、色の意味を「値の方向」ではなく「良し悪し」に合わせると誤読を防げます。

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

ダッシュボード用のKPI統計カードを作ってください。ラベル・大きな数値（font-variant-numeric: tabular-nums）・前月比の増減表示の構成で、増減は色と矢印記号の両方で伝えてください。

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

- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [flex-wrap](https://www.css-dictionary.com/property/flex-wrap.md)
- [gap](https://www.css-dictionary.com/property/gap.md)
- [font-size](https://www.css-dictionary.com/property/font-size.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)