ダッシュボードのシェルとサイドバー
ナビゲーションリンク、アイコン、下部のユーザープロフィールセクションを備えた固定サイドバーを含む、2列構成のダッシュボードのシェルを設定します。
「ダッシュボードのシェルとサイドバー」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Dashboard Layout Overview
An admin dashboard is structured around a persistent sidebar on the left and a main content area on the right. The sidebar is fixed-width and typically full viewport height, while the main area fills the remaining space and scrolls independently. This two-column shell is the foundation on which all dashboard widgets, tables, and charts are placed.
<!-- Dashboard shell structure -->
<div class="flex h-screen overflow-hidden bg-gray-100">
<!-- Sidebar -->
<aside class="w-64 flex-shrink-0">
<!-- Navigation -->
</aside>
<!-- Main content area -->
<div class="flex flex-1 flex-col overflow-hidden">
<!-- Top bar -->
<main class="flex-1 overflow-y-auto p-6">
<!-- Page content -->
</main>
</div>
</div>Building the Sidebar Shell
The sidebar uses flex h-full w-64 flex-col bg-gray-900 for a dark, full-height panel. flex-shrink-0 prevents it from compressing when the main content grows. Divide it into three sections using flex column layout: a logo area at the top, a scrollable nav section in the middle with flex-1 overflow-y-auto, and a user profile area pinned to the bottom.
<aside class="flex h-screen w-64 flex-shrink-0 flex-col bg-gray-900">
<!-- Logo area -->
<div class="flex h-16 items-center border-b border-gray-800 px-4">
<div class="flex items-center gap-2 font-bold text-white">
<div class="h-7 w-7 rounded-lg bg-blue-500"></div>
Dashboard
</div>
</div>
<!-- Scrollable navigation -->
<nav class="flex-1 overflow-y-auto px-3 py-4">
<!-- Navigation links -->
</nav>
<!-- User profile -->
<div class="border-t border-gray-800 p-4">
<!-- User info -->
</div>
</aside>Sidebar Navigation Links
Navigation items in the sidebar combine an icon and a label. Use flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium as the base link style. Inactive links use text-gray-400 hover:bg-gray-800 hover:text-white transition-colors. The active link is highlighted with bg-gray-800 text-white to show the current page.
<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
<!-- Active link -->
<a href="/dashboard"
class="flex items-center gap-3 rounded-lg bg-gray-800 px-3 py-2
text-sm font-medium text-white">
<svg class="h-5 w-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-3"/>
</svg>
Overview
</a>
<!-- Inactive link -->
<a href="/users"
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
text-gray-400 transition-colors hover:bg-gray-800 hover:text-white">
<!-- Icon + label -->
Users
</a>
</nav>Sidebar Navigation Groups
Group related navigation items under labeled sections for better discoverability. Add a section label with mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500 before each group of links. This pattern is common in analytics and SaaS dashboards where there are 10 or more navigation destinations.
<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
<!-- Main group -->
<p class="mb-2 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
Main
</p>
<a href="/dashboard" class="flex items-center gap-3 rounded-lg ...">Overview</a>
<a href="/analytics" class="flex items-center gap-3 rounded-lg ...">Analytics</a>
<!-- Settings group -->
<p class="mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
Settings
</p>
<a href="/billing" class="flex items-center gap-3 rounded-lg ...">Billing</a>
<a href="/team" class="flex items-center gap-3 rounded-lg ...">Team</a>
</nav>User Profile Area in Sidebar
The bottom of the sidebar shows the logged-in user's avatar, name, and email. Use flex items-center gap-3 to align the avatar and text. Add a settings icon button on the far right with ml-auto. Wrap the whole section in a subtle hover state: hover:bg-gray-800 rounded-lg p-2 cursor-pointer.
<div class="border-t border-gray-800 p-3">
<div class="flex cursor-pointer items-center gap-3 rounded-lg p-2 transition hover:bg-gray-800">
<img src="/avatar.jpg" alt="User" class="h-9 w-9 rounded-full">
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-white">Jane Doe</p>
<p class="truncate text-xs text-gray-400">jane@example.com</p>
</div>
<button class="ml-auto rounded-md p-1 text-gray-400 hover:text-white">
<svg class="h-4 w-4" 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.065 2.572c1.756.426 1.756 2.924 0 3.35"/>
</svg>
</button>
</div>
</div>Main Content Area Wrapper
The main content area sits to the right of the sidebar. Use flex flex-1 flex-col overflow-hidden so it fills the remaining horizontal space and allows independent scrolling. The top bar docks at the top of this area (not the sidebar), and the main scrolling region sits below it using flex-1 overflow-y-auto.
<div class="flex flex-1 flex-col overflow-hidden">
<!-- Top bar (sticks to top of main area) -->
<header class="flex h-16 items-center border-b border-gray-200 bg-white px-6">
<!-- Search, notifications, avatar -->
</header>
<!-- Scrollable page content -->
<main class="flex-1 overflow-y-auto bg-gray-100 p-6">
<!-- Dashboard widgets, tables, charts -->
</main>
</div>Mobile Sidebar Strategy
On mobile screens, the sidebar cannot be permanently visible without taking too much space. Hide it off-screen with -translate-x-full by default and slide it in when the hamburger menu is activated by toggling translate-x-0. Overlay the main content with a semi-transparent backdrop bg-black/50 that closes the sidebar on click. This pattern is identical to the one used in the collapsible sidebar lesson.
<!-- Overlay backdrop (shown when sidebar is open) -->
<div id="sidebar-backdrop"
class="fixed inset-0 z-20 hidden bg-black/50 lg:hidden"
onclick="closeSidebar()"></div>
<!-- Sidebar with transition -->
<aside id="sidebar"
class="fixed inset-y-0 left-0 z-30 w-64 -translate-x-full flex-col bg-gray-900
transition-transform duration-300 lg:relative lg:translate-x-0 lg:flex">
<!-- ... -->
</aside>Sidebar Width Variants
Some dashboards use a collapsed sidebar that shows only icons and expands on hover or via a toggle. Achieve this with CSS transitions on the sidebar width: default w-16 shows icons only, expanded w-64 shows labels. Transition with transition-all duration-300. Hide the text labels in collapsed mode using opacity-0 w-0 overflow-hidden.
<!-- Collapsible sidebar pattern -->
<aside id="sidebar"
class="flex flex-col bg-gray-900 transition-all duration-300"
:class="expanded ? 'w-64' : 'w-16'">
<a href="/dashboard" class="flex items-center gap-3 rounded-lg px-3 py-2">
<svg class="h-5 w-5 flex-shrink-0 text-gray-400"><!-- icon --></svg>
<span :class="expanded ? 'opacity-100' : 'opacity-0 w-0 overflow-hidden'"
class="transition-opacity duration-200 text-sm text-gray-400">
Overview
</span>
</a>
</aside>Sidebar Section Dividers
Use my-4 border-t border-gray-800 to add horizontal dividers between navigation groups in the sidebar. This creates a cleaner separation than just spacing alone. Keep dividers thin and dark so they blend with the sidebar background while still providing visual structure. Avoid overusing dividers — two or three per sidebar is typically enough.
<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
<!-- Main group -->
<a href="/" class="...">Overview</a>
<a href="/analytics" class="...">Analytics</a>
<a href="/reports" class="...">Reports</a>
<!-- Divider -->
<div class="my-4 border-t border-gray-800"></div>
<!-- Settings group -->
<a href="/billing" class="...">Billing</a>
<a href="/api" class="...">API Keys</a>
</nav>Notification Badge on Nav Item
Some sidebar links need a notification badge to indicate unread items or pending actions. Add a small pill badge aligned to the right of the link using ml-auto. Style it as a small circle: ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white for a count, or a smaller dot for a simple unread indicator.
<a href="/messages"
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
text-gray-400 transition hover:bg-gray-800 hover:text-white">
<svg class="h-5 w-5"><!-- message icon --></svg>
Messages
<!-- Badge -->
<span class="ml-auto flex h-5 min-w-[20px] items-center justify-center
rounded-full bg-blue-500 px-1 text-xs font-semibold text-white">
3
</span>
</a>Dark and Light Sidebar Themes
While dark sidebars are traditional, light sidebars (bg-white border-r border-gray-200) with dark text are increasingly popular for a cleaner, modern look. The choice depends on your brand. A dark sidebar creates strong visual contrast and clearly separates navigation from content. A light sidebar feels airier and pairs well with white main content areas.
<!-- Dark sidebar -->
<aside class="w-64 bg-gray-900 text-gray-400">
<!-- Links: text-gray-400 hover:bg-gray-800 hover:text-white -->
<!-- Active: bg-gray-800 text-white -->
</aside>
<!-- Light sidebar -->
<aside class="w-64 border-r border-gray-200 bg-white text-gray-600">
<!-- Links: text-gray-600 hover:bg-gray-50 hover:text-gray-900 -->
<!-- Active: bg-blue-50 text-blue-700 -->
</aside>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: building the two-column dashboard shell with a fixed sidebar and flexible main area, structuring sidebar navigation with groups, active states, and notification badges, and handling mobile sidebars with an off-screen translate and overlay backdrop. Next up we build the top bar and breadcrumbs.
よくある質問
「ダッシュボードのシェルとサイドバー」レッスンは無料ですか？
はい。「ダッシュボードのシェルとサイドバー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「ダッシュボードのシェルとサイドバー」で何を学びますか？
ナビゲーションリンク、アイコン、下部のユーザープロフィールセクションを備えた固定サイドバーを含む、2列構成のダッシュボードのシェルを設定します。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「ダッシュボードのシェルとサイドバー」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ダッシュボードのシェルとサイドバー
- トップバーとパンくずリスト
- 統計カードと KPI ウィジェット
- データテーブルとグラフのプレースホルダー