問題一覧に戻る
上級Tailwind基礎
問題26: ダッシュボードレイアウト
複雑なダッシュボード構築を学びましょう!
📝 タスク1: 最外側のdivにflex h-screenを適用
📝 タスク2: asideにw-64 flex-shrink-0 bg-gray-800 text-whiteを適用
📝 タスク3: navにflex flex-col p-4 space-y-2を適用、各aにpx-4 py-2 rounded hover:bg-gray-700を適用
📝 タスク4: mainにflex-1 p-6 bg-gray-100を適用
📝 タスク5: 統計グリッドにgrid grid-cols-3 gap-6を適用、各統計にbg-white p-6 rounded-lg shadowを適用
HTMLエディタ
プレビュー
統計1
統計2
統計3