数値メトリクス（KPI）カード
ラベル・現在値・前期比トレンドの 3 行だけで構成された、ダッシュボード向けの KPI カードです。数値部分には font-variant-numeric:tabular-nums を指定しており、桁の幅が揃うため複数枚を並べても金額の位置がガタつきません。
解説
ラベル・現在値・前期比トレンドの 3 行だけで構成された、ダッシュボード向けの KPI カードです。数値部分には font-variant-numeric:tabular-nums を指定しており、桁の幅が揃うため複数枚を並べても金額の位置がガタつきません。トレンド行は上昇用と下降用のクラスを分け、--up は緑、--down は赤というように色だけで増減を直感的に伝えます。JavaScript を使わない純粋な CSS 実装です。
こんな場面で使えます
- SaaS の管理画面や売上ダッシュボード
- 社内ツールの月次サマリー表示
- 経営レポートの主要指標カードを横並びにするとき
カスタマイズは st-card__trend--up と --down を付け替えるだけで矢印と色の向きが変わります。値や単位を書き換えれば売上以外の指標にも転用でき、複数枚を Grid で並べれば指標一覧になります。色だけに頼らず ▲ ▼ の記号も残しておくと、色覚に配慮した分かりやすい表現になります。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
増減の色はどうやって切り替えますか。
トレンド行に付けるクラスを st-card__trend--up から --down に変えるだけです。up は緑、down は赤に切り替わり、矢印の記号も合わせて差し替えれば上昇・下降を正しく表現できます。
金額の桁がそろわないときはどうすればいいですか。
数値に font-variant-numeric:tabular-nums を指定すると、数字の幅が等しくなり桁位置がそろいます。このカードでは最初から指定済みなので、複数枚を縦や横に並べても値の頭が揃って見えます。