コンテンツへスキップ

ライブKPIダッシュボードの骨組みを作る

初級~12 0/4 ステップ

ライブKPIダッシュボードの骨組みを作る

優れたデータダッシュボードは、どれも同じ背骨から始まります。重要な数値をひと目で示す、整ったKPIカードのグリッドです。このレッスンでは、その骨組み — APIがリアルタイムのメトリクスを流し込むようなレイアウト — を作ります。

レスポンシブなカードのグリッドを組み、各カードにメトリクスのラベル、大きな数値、トレンドインジケーターを表示します。まるでライブのデータソースが数秒ごとに新しい数値を送り込んでいるかのようにスタイリングしていきましょう。

アナリストのように考えてください。目標は瞬時の読みやすさです。意思決定者がビジネスの状態を2秒で把握できること。それを可能にするフレームを作りましょう。

手順

1

ダッシュボードがAPI駆動だと分かるように、「ライブメトリクス」という h1 を持つヘッダーを追加しましょう。

ヒント: `<header>` の中に `<h1 class="text-3xl font-bold">ライブメトリクス</h1>` を入れましょう。

どこに書けばいい?

<!-- ここにKPIダッシュボードの骨組みを作りましょう -->

11 行目に書きましょう — そのコメントの下、すでに書いたコードの後ろです。

2

grid クラスを使って、KPIカード用のレスポンシブなグリッドコンテナを作りましょう。

3

スタイル付きのボックスとしてKPIカードを追加しましょう。「総売上」のカードも含めてください。

4

bg-gray-800 クラスを使って、各カードにカードらしい背景を付けましょう。

あなたのコード

html
13
1
2
3
4
5
6
7
8
9
10
11
12
13

ライブプレビュー

ライブプレビュー