実践：Tailwind CSSで管理ダッシュボードを構築する
プロジェクト要件
サイドバーナビゲーション、トップの統計カード、データテーブル、フォームセクション、チャートプレースホルダーを備えたシンプルな管理ダッシュボードを構築します。ダークモード対応とデスクトップ/モバイルレスポンシブ対応も含みます。
技術要件
- Tailwind CSS v4 CDN
- CSS Gridをメインのレイアウトソリューションとして使用
- ダークモード（
dark:プレフィックス） - カスタムカラーとインタラクティブ状態
- レスポンシブサイドバーの折りたたみ
ステップバイステップの実装
例：ステップ1 - サイドバーナビゲーション
ロゴ、メニュー項目、ユーザーアバターを備えた固定左サイドバー。モバイルでは折りたたみ可能です。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理パネル - サイドバーナビゲーション</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: { 50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' }
}
}
}
}
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100">
<!-- モバイルトップバー -->
<div class="lg:hidden fixed top-0 w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 z-40 px-4 py-3 flex items-center justify-between">
<button id="sidebarToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<span class="font-bold">管理パネル</span>
<div class="w-10"></div>
</div>
<!-- オーバーレイ -->
<div id="overlay" class="hidden fixed inset-0 bg-black/50 z-40 lg:hidden"></div>
<!-- サイドバー -->
<aside id="sidebar" class="fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transform -translate-x-full lg:translate-x-0 transition-transform">
<div class="flex flex-col h-full">
<!-- ロゴ -->
<div class="h-16 flex items-center gap-3 px-6 border-b border-gray-200 dark:border-gray-800">
<div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">A</span>
</div>
<span class="text-lg font-bold">AdminKit</span>
</div>
<!-- メニュー -->
<nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
<a href="#" class="flex items-center gap-3 px-3 py-2.5 bg-primary-50 dark:bg-primary-700/20 text-primary-600 dark:text-primary-400 rounded-lg">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
<span>ダッシュボード</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
<span>分析</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
<span>ユーザー</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
<span>プロダクト</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
<span>注文</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
<span>設定</span>
</a>
</nav>
<!-- ユーザーアバター -->
<div class="p-4 border-t border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-3 px-3 py-2">
<div class="w-9 h-9 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
<span class="text-primary-600 dark:text-primary-400 font-semibold text-sm">山</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium truncate">山田太郎</p>
<p class="text-xs text-gray-500 truncate">admin@example.com</p>
</div>
<button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
</button>
</div>
</div>
</div>
</aside>
<!-- メインコンテンツプレースホルダー -->
<main class="lg:ml-64 pt-16 lg:pt-0 min-h-screen p-6">
<p class="text-gray-500">メインコンテンツエリア</p>
</main>
<script>
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('overlay');
const toggle = document.getElementById('sidebarToggle');
toggle?.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full');
overlay.classList.toggle('hidden');
});
overlay?.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
overlay.classList.add('hidden');
});
</script>
</body>
</html>
例：ステップ2 - 統計カード
主要な指標を表示する4つのトップ統計カードです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>統計カード</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- 総ユーザー数 -->
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500 dark:text-gray-400">総ユーザー数</span>
<div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">24,589</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400 flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
12.5%
</span>
<span class="text-gray-500">前月比</span>
</div>
</div>
<!-- 総売上 -->
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500 dark:text-gray-400">総売上</span>
<div class="w-10 h-10 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">892,400ドル</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400 flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
8.2%
</span>
<span class="text-gray-500">前月比</span>
</div>
</div>
<!-- 注文数 -->
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500 dark:text-gray-400">注文数</span>
<div class="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">3,847</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-red-600 dark:text-red-400 flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
3.1%
</span>
<span class="text-gray-500">前月比</span>
</div>
</div>
<!-- コンバージョン率 -->
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500 dark:text-gray-400">コンバージョン率</span>
<div class="w-10 h-10 bg-orange-50 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">5.6%</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400 flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
2.4%
</span>
<span class="text-gray-500">前月比</span>
</div>
</div>
</div>
</body>
</html>
例：ステップ3 - データテーブル
ゼブラ柄のストライプとアクションボタンを備えたスクロール可能なレスポンシブデータテーブルです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>データテーブル</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
<!-- テーブルヘッダーツールバー -->
<div class="p-4 border-b border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<h3 class="text-lg font-semibold">最近の注文</h3>
<div class="flex items-center gap-3 w-full sm:w-auto">
<div class="relative flex-1 sm:flex-none">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input type="text" placeholder="注文を検索..." class="w-full sm:w-64 pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
</div>
<button class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors flex-shrink-0">
エクスポート
</button>
</div>
</div>
<!-- テーブル -->
<div class="overflow-x-auto">
<table class="w-full min-w-[640px]">
<thead>
<tr class="border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">注文ID</th>
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">顧客</th>
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">プロダクト</th>
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">金額</th>
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">ステータス</th>
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">日付</th>
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">アクション</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-gray-800">
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7891</td>
<td class="px-4 py-3">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center text-xs font-semibold text-blue-600">山</div>
<span class="text-sm">山田太郎</span>
</div>
</td>
<td class="px-4 py-3 text-sm">Pro年間プラン</td>
<td class="px-4 py-3 text-sm font-medium">1,188ドル</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">完了</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-15</td>
<td class="px-4 py-3 text-right">
<button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
</button>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7892</td>
<td class="px-4 py-3">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center text-xs font-semibold text-green-600">王</div>
<span class="text-sm">王麗華</span>
</div>
</td>
<td class="px-4 py-3 text-sm">Enterprise年間プラン</td>
<td class="px-4 py-3 text-sm font-medium">3,588ドル</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded-full">処理中</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-14</td>
<td class="px-4 py-3 text-right">
<button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
</button>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7893</td>
<td class="px-4 py-3">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center text-xs font-semibold text-purple-600">張</div>
<span class="text-sm">張明</span>
</div>
</td>
<td class="px-4 py-3 text-sm">Pro月額プラン</td>
<td class="px-4 py-3 text-sm font-medium">99ドル</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">完了</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-13</td>
<td class="px-4 py-3 text-right">
<button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
</button>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7894</td>
<td class="px-4 py-3">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center text-xs font-semibold text-orange-600">鈴</div>
<span class="text-sm">鈴木花子</span>
</div>
</td>
<td class="px-4 py-3 text-sm">無料アップグレード</td>
<td class="px-4 py-3 text-sm font-medium">0ドル</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-full">キャンセル</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-12</td>
<td class="px-4 py-3 text-right">
<button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- ページネーション -->
<div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
<p class="text-sm text-gray-500">256件中1-4件を表示</p>
<div class="flex items-center gap-1">
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50" disabled>前へ</button>
<button class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg">1</button>
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">2</button>
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">3</button>
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">次へ</button>
</div>
</div>
</div>
</body>
</html>
例：ステップ4 - フォームセクション
入力フィールド、ドロップダウン、テキストエリア、ボタンを備えたフォームです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームセクション</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 max-w-2xl">
<h3 class="text-lg font-semibold mb-6">新規ユーザーの追加</h3>
<form class="space-y-5">
<!-- 名前行 -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div>
<label class="block text-sm font-medium mb-1.5">姓</label>
<input type="text" placeholder="姓を入力"
class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
</div>
<div>
<label class="block text-sm font-medium mb-1.5">名</label>
<input type="text" placeholder="名を入力"
class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
</div>
</div>
<!-- メールアドレス -->
<div>
<label class="block text-sm font-medium mb-1.5">メールアドレス</label>
<input type="email" placeholder="user@example.com"
class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
</div>
<!-- ロールとステータス -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div>
<label class="block text-sm font-medium mb-1.5">ロール</label>
<select class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all appearance-none cursor-pointer">
<option value="">ロールを選択</option>
<option value="admin">管理者</option>
<option value="editor">編集者</option>
<option value="viewer">閲覧者</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1.5">ステータス</label>
<select class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all appearance-none cursor-pointer">
<option value="active">アクティブ</option>
<option value="inactive">非アクティブ</option>
</select>
</div>
</div>
<!-- メモ -->
<div>
<label class="block text-sm font-medium mb-1.5">メモ</label>
<textarea rows="3" placeholder="任意のメモ..."
class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all resize-none"></textarea>
</div>
<!-- 通知トグル -->
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div>
<p class="text-sm font-medium">ウェルカムメールを送信</p>
<p class="text-xs text-gray-500">ユーザー作成時にログイン情報を自動送信します</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-300 dark:bg-gray-600 rounded-full peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full"></div>
</label>
</div>
<!-- ボタン -->
<div class="flex items-center gap-3 pt-2">
<button type="submit" class="px-6 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors">
ユーザーを作成
</button>
<button type="button" class="px-6 py-2.5 border border-gray-200 dark:border-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
キャンセル
</button>
</div>
</form>
</div>
</body>
</html>
例：ステップ5 - チャートプレースホルダーセクション
実際のチャートライブラリ用に予約されたプレースホルダーエリアです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チャートプレースホルダー</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- 売上推移チャート -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold">売上推移</h3>
<select class="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-xs focus:outline-none">
<option>過去7日間</option>
<option>過去30日間</option>
<option>過去90日間</option>
</select>
</div>
<div class="h-64 flex items-end gap-2 px-2">
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-200 dark:bg-blue-900 rounded-t" style="height: 45%"></div>
<span class="text-xs text-gray-500">月</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height: 65%"></div>
<span class="text-xs text-gray-500">火</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height: 50%"></div>
<span class="text-xs text-gray-500">水</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-500 dark:bg-blue-600 rounded-t" style="height: 80%"></div>
<span class="text-xs text-gray-500">木</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-600 dark:bg-blue-500 rounded-t" style="height: 70%"></div>
<span class="text-xs text-gray-500">金</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height: 90%"></div>
<span class="text-xs text-gray-500">土</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height: 60%"></div>
<span class="text-xs text-gray-500">日</span>
</div>
</div>
</div>
<!-- ユーザー来源ドーナツチャートプレースホルダー -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="text-lg font-semibold mb-6">トラフィック来源</h3>
<div class="flex flex-col items-center justify-center">
<div class="relative w-48 h-48">
<!-- シンプルなドーナツチャート -->
<svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#e5e7eb" stroke-width="3" class="dark:stroke-gray-700"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="0"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#10b981" stroke-width="3" stroke-dasharray="25 75" stroke-dashoffset="-40"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#f59e0b" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="-65"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="15 85" stroke-dashoffset="-85"/>
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="text-2xl font-bold">100%</span>
<span class="text-xs text-gray-500">合計</span>
</div>
</div>
<div class="mt-6 grid grid-cols-2 gap-x-8 gap-y-2">
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-blue-500 rounded-full"></div>
<span class="text-sm">検索 <span class="text-gray-500">40%</span></span>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
<span class="text-sm">直接 <span class="text-gray-500">25%</span></span>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
<span class="text-sm">ソーシャル <span class="text-gray-500">20%</span></span>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-red-500 rounded-full"></div>
<span class="text-sm">その他 <span class="text-gray-500">15%</span></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
例：完成版管理ダッシュボード
すべてのセクションを組み合わせた完成版の管理ダッシュボードです：
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AdminKit - ダッシュボード</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: { 50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' }
}
}
}
}
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100">
<!-- モバイルトップバー -->
<div class="lg:hidden fixed top-0 w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 z-40 px-4 py-3 flex items-center justify-between">
<button id="sidebarToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
<span class="font-bold">AdminKit</span>
<button id="themeToggleMobile" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<span class="dark:hidden">🌙</span>
<span class="hidden dark:inline">☀️</span>
</button>
</div>
<!-- オーバーレイ -->
<div id="overlay" class="hidden fixed inset-0 bg-black/50 z-40 lg:hidden"></div>
<!-- サイドバー -->
<aside id="sidebar" class="fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transform -translate-x-full lg:translate-x-0 transition-transform">
<div class="flex flex-col h-full">
<div class="h-16 flex items-center justify-between px-6 border-b border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">A</span>
</div>
<span class="text-lg font-bold">AdminKit</span>
</div>
<button id="sidebarClose" class="lg:hidden p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
<a href="#" class="flex items-center gap-3 px-3 py-2.5 bg-primary-50 dark:bg-primary-700/20 text-primary-600 dark:text-primary-400 rounded-lg">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
<span>ダッシュボード</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
<span>ユーザー</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
<span>プロダクト</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
<span>注文</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
<span>設定</span>
</a>
</nav>
<div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
<span class="text-primary-600 dark:text-primary-400 font-semibold text-sm">山</span>
</div>
<div class="min-w-0">
<p class="text-sm font-medium truncate">山田太郎</p>
<p class="text-xs text-gray-500 truncate">admin@example.com</p>
</div>
</div>
<button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<span class="dark:hidden text-sm">🌙</span>
<span class="hidden dark:inline text-sm">☀️</span>
</button>
</div>
</div>
</aside>
<!-- メインコンテンツ -->
<main class="lg:ml-64 pt-16 lg:pt-0 min-h-screen">
<div class="p-6 space-y-6">
<!-- ページタイトル -->
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div>
<h1 class="text-2xl font-bold">ダッシュボード</h1>
<p class="text-sm text-gray-500 mt-1">おかえりなさい、山田太郎さん</p>
</div>
<div class="flex items-center gap-3">
<button class="px-4 py-2 border border-gray-200 dark:border-gray-700 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
レポートをエクスポート
</button>
<button class="px-4 py-2 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700 transition-colors">
+ 新規作成
</button>
</div>
</div>
<!-- 統計カード -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500">総ユーザー数</span>
<div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">24,589</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400">+12.5%</span>
<span class="text-gray-500">前月比</span>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500">総売上</span>
<div class="w-10 h-10 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">892,400ドル</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400">+8.2%</span>
<span class="text-gray-500">前月比</span>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500">注文数</span>
<div class="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">3,847</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-red-600 dark:text-red-400">-3.1%</span>
<span class="text-gray-500">前月比</span>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500">コンバージョン率</span>
<div class="w-10 h-10 bg-orange-50 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">5.6%</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400">+2.4%</span>
<span class="text-gray-500">前月比</span>
</div>
</div>
</div>
<!-- チャートセクション -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold">売上推移</h3>
<select class="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-xs focus:outline-none">
<option>過去7日間</option>
<option>過去30日間</option>
</select>
</div>
<div class="h-48 flex items-end gap-2 px-2">
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-200 dark:bg-blue-900 rounded-t" style="height:45%"></div><span class="text-xs text-gray-500">月</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height:65%"></div><span class="text-xs text-gray-500">火</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height:50%"></div><span class="text-xs text-gray-500">水</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-500 dark:bg-blue-600 rounded-t" style="height:80%"></div><span class="text-xs text-gray-500">木</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-600 dark:bg-blue-500 rounded-t" style="height:70%"></div><span class="text-xs text-gray-500">金</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height:90%"></div><span class="text-xs text-gray-500">土</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height:60%"></div><span class="text-xs text-gray-500">日</span></div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="text-lg font-semibold mb-6">トラフィック来源</h3>
<div class="flex items-center justify-center">
<div class="relative w-40 h-40">
<svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#e5e7eb" stroke-width="3" class="dark:stroke-gray-700"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="0"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#10b981" stroke-width="3" stroke-dasharray="25 75" stroke-dashoffset="-40"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#f59e0b" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="-65"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="15 85" stroke-dashoffset="-85"/>
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="text-xl font-bold">100%</span>
</div>
</div>
<div class="ml-8 space-y-2">
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-blue-500 rounded-full"></div><span class="text-sm">検索 40%</span></div>
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-green-500 rounded-full"></div><span class="text-sm">直接 25%</span></div>
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><span class="text-sm">ソーシャル 20%</span></div>
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><span class="text-sm">その他 15%</span></div>
</div>
</div>
</div>
</div>
<!-- データテーブル -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
<div class="p-4 border-b border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<h3 class="text-lg font-semibold">最近の注文</h3>
<input type="text" placeholder="注文を検索..." class="w-full sm:w-64 px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50">
</div>
<div class="overflow-x-auto">
<table class="w-full min-w-[640px]">
<thead>
<tr class="border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">注文ID</th>
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">顧客</th>
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">金額</th>
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">ステータス</th>
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">日付</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-gray-800">
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7891</td>
<td class="px-4 py-3 text-sm">山田太郎</td>
<td class="px-4 py-3 text-sm font-medium">1,188ドル</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">完了</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-15</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7892</td>
<td class="px-4 py-3 text-sm">王麗華</td>
<td class="px-4 py-3 text-sm font-medium">3,588ドル</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded-full">処理中</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-14</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7893</td>
<td class="px-4 py-3 text-sm">張明</td>
<td class="px-4 py-3 text-sm font-medium">99ドル</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">完了</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-13</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
<p class="text-sm text-gray-500">256件中1-3件を表示</p>
<div class="flex items-center gap-1">
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg disabled:opacity-50" disabled>前へ</button>
<button class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg">1</button>
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg">2</button>
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg">次へ</button>
</div>
</div>
</div>
<!-- フォームセクション -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="text-lg font-semibold mb-6">クイックユーザー追加</h3>
<form class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<input type="text" placeholder="氏名" class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
<input type="email" placeholder="メール" class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
<select class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 appearance-none cursor-pointer">
<option>ロールを選択</option>
<option>管理者</option>
<option>編集者</option>
<option>閲覧者</option>
</select>
<button type="submit" class="px-4 py-2.5 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700 active:bg-primary-800 transition-colors">
ユーザーを追加
</button>
</form>
</div>
</div>
</main>
<script>
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('overlay');
document.getElementById('sidebarToggle')?.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full');
overlay.classList.toggle('hidden');
});
document.getElementById('sidebarClose')?.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
overlay.classList.add('hidden');
});
overlay?.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
overlay.classList.add('hidden');
});
const toggleTheme = () => document.documentElement.classList.toggle('dark');
document.getElementById('themeToggle')?.addEventListener('click', toggleTheme);
document.getElementById('themeToggleMobile')?.addEventListener('click', toggleTheme);
</script>
</body>
</html>
📖 まとめ
- サイドバーナビゲーション：固定レイアウト、モバイルではハンバーガーメニューで開閉、オーバーレイで閉じる
- 統計カード：Grid レイアウトで1→2→4列にレスポンシブ切り替え
- データテーブル：
overflow-x-autoで水平スクロール、ステータスは色付きバッジで表現 - フォームセクション：フォーカス時のリングエフェクト、トグルスイッチ、ドロップダウン
- チャートプレースホルダー：棒グラフとドーナツチャートのCSS実装、実際のライブラリ（Chart.jsなど）に差し替え可能
- ダークモード：
dark:プレフィックスで一括切り替え、トグルボタンで動的に切り替え
💡 ポイント：管理ダッシュボードは複数のコンポーネントが組み合わさるため、各セクションを個別に開発してから統合すると効率的です。Grid レイアウトは複雑なダッシュボード配置に最適です。
⚠️ 注意：実際のプロジェクトでは、チャートはChart.jsやEChartsなどのライブラリを使用し、データはAPIから取得します。フォームにはバリデーションとエラーメッセージの表示も必要です。
📝 課題
- サイドバーにサブメニュー（折りたたみ可能）を追加してみましょう
- テーブルにソート機能（列ヘッダークリックで並び替え）を実装してみましょう
- 通知ドロップダウンをヘッダーに追加してみましょう
- ダークモードの切り替えをlocalStorageに保存して、ページ再読み込み時も維持してみましょう
❓ よくある質問
Q: サイドバーの開閉アニメーションがカクつく場合はどうすればよいですか？
A: transition-transformにduration-300を追加し、will-change-transformをサイドバーに設定すると滑らかになります。
Q: データテーブルの行数が多い場合、パフォーマンスはどうなりますか？ A: 100行を超える場合は、仮想スクロール（仮想化リスト）の導入を検討してください。ページネーションも有効な手段です。
Q: チャートをChart.jsに置き換えるにはどうすればよいですか？
A: プレースホルダーの<div>を<canvas>に置き換え、Chart.jsの初期化コードを追加するだけで済みます。Tailwindでスタイリングされたコンテナはそのまま使用できます。
受入基準
- [ ] デスクトップではサイドバーが固定表示、モバイルではトグルボタンで非表示
- [ ] 統計カードがモバイル1列、タブレット2列、デスクトップ4列で表示される
- [ ] データテーブルが小さい画面で水平スクロールし、レイアウトが崩れない
- [ ] フォームの入力フィールドがフォーカス時に青いボーダーとリングエフェクトを表示する
- [ ] ダークモード切り替え時にすべてのコンポーネントのカラーが正しく変わる
- [ ] モバイルメニューがオーバーレイクリックで閉じる
- [ ] すべてのボタンとリンクにホバー/アクティブ状態のフィードバックがある
拡張機能
- Chart.jsやEChartsを統合して実際のチャートを表示
- テーブルのソート、フィルタリング、一括アクションを追加
- 折りたたみ可能なサイドバーサブメニューを実装
- パンくずリストナビゲーションとタブ切り替えを追加
- 通知センターとメッセージドロップダウンを統合
- レスポンシブテーブル用のカードビュー切り替え（モバイル）を実装