CSVからWebアプリへ
beginner~15 分0/4 ステップ
CSVからWebアプリへ
データのクエリはもうできます。SQLでのスライスもできます。次は、それを見せる方法を学びましょう。
スプレッドシートの中の表は世界からは見えません。ブラウザに表示された表はプロダクトです。このレッスンでは、ソート可能なヘッダー、色分けされた行、合計行を備えたインタラクティブなHTMLデータダッシュボードをゼロから作ります。PythonもPandasも不要。HTMLとTailwindだけです。
手順
1
<h1> でダッシュボードのタイトルを追加しましょう — どんなデータを表示していますか?
ヒント: 例: `<h1 class="text-2xl font-bold text-white">プロダクト分析</h1>`
2
3つ以上の列ヘッダー (<th>) を含む <thead> 付きの <table> を追加しましょう
3
4行以上のデータ行 (<tr>) を持つ <tbody> を追加しましょう — 実際にありそうな数値を入れてください
4
一番下に合計行を追加しましょう: 各列の合計を太字で示す <tr class="summary-row">
あなたのコード
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ViBotでバイブコーディング無料メッセージ 0 / 12
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ:<h1> でダッシュボードのタイトルを追加しましょう — どんなデータを表示していますか?
ライブプレビュー
ライブプレビュー