コンテンツへスキップ

デプロイ可能なダッシュボードを組み立てる

中級~15 0/4 ステップ

デプロイ可能なダッシュボードを組み立てる

これが総仕上げです。KPIカード、チャート、レポートレイアウトを作ってきました。今度はそれらのピースをひとつにまとめ、実際のURLに公開できる完全なダッシュボードページに仕上げます。

フルページを組み立てましょう。ブランドを冠したヘッダー、KPIカードの行、チャートセクション、データテーブル — すべてをひとつのまとまった画面に収めます。これこそ、ステークホルダーに手渡して「これがライブのダッシュボードです」と言える成果物です。

エンドツーエンドで考えましょう。デプロイ可能なアプリは、見た目がきれいなだけでは足りません。整理されていて、読みやすく、それ自体で説明が完結していることが大切です。このレッスンを終えれば、ポートフォリオに載せられるデータアプリが手に入ります。さあ、リリースしましょう。

手順

1

「セールス分析」という h1 のアプリタイトルを持つページヘッダーを追加しましょう。

ヒント: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">セールス分析</h1></header>` を使いましょう。

どこに書けばいい?

<!-- ここにフルダッシュボードを組み立てましょう -->

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

2

レスポンシブなグリッドコンテナを使ってKPIの行を追加しましょう。

3

bg-purple-500 の色でスタイルしたバーの div を使って、チャートセクションを追加しましょう。

4

最近の注文のデータテーブルを追加して、ダッシュボードを完成させましょう。

あなたのコード

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

ライブプレビュー

ライブプレビュー