【Tailwind CSS入門 Day9】PC用サイドバーを作る

目次

• はじめに
• 今日作るもの
• STEP 1：Day9用HTMLファイルを作る
• STEP 2：タイトルをDay9用に直す
• STEP 3：ヘッダー下にレイアウト用の箱を作る
• STEP 4：mainの中にサイドバー用の箱を追加する
• STEP 5：サイドバーと作品カードを横並びにする
• STEP 6：サイドバーの幅を決める
• STEP 7：サイドバーに背景色を付ける
• STEP 8：サイドバーの文字色を白にする
• STEP 9：サイドバー内に余白を付ける
• STEP 10：サイドバーの仮テキストを見出しにする
• STEP 11：サイドバー内にメニュー項目を追加する
• STEP 12：見出しとメニューの間に余白を付ける
• STEP 13：メニュー項目同士の間隔を空ける
• STEP 14：メニュー項目の文字サイズを少し小さくする
• STEP 15：メニュー項目に内側余白を付ける
• STEP 16：メニュー項目に角丸を付ける
• STEP 17：メニュー項目にhover時の背景色を付ける
• STEP 18：サイドバーを画面の高さまで伸ばす
• STEP 19：作品カードが縦に伸びないようにする
• 完成コード
• 使ったTailwind CSSのclass
• 表示確認
• 今日分かったこと
• 次回やること
• シリーズ記事

はじめに

この記事は、Tailwind CSSで管理画面UIを1ステップずつ作る学習記録です。
過去記事は末尾の「シリーズ記事」にまとめています。

今日作るもの

Day9では、Phase2の続きとして PC表示用のサイドバー を作ります。

今回はまだレスポンシブ対応やハンバーガーメニューは扱いません。
Day9は、まず PC管理画面でよくある左側メニュー を作る回にします。

┌────────────────────────────────────┐
│ Admin Dashboard        管理者表示   │
├─────────────────┬──────────────────┤
│ サイドバー       |    作品カード     │
│ - ダッシュボード │                  │
│ - 作品一覧       │                  │
│ - レビュー管理   │                  │
└─────────────────┴──────────────────┘

STEP 1：Day9用HTMLファイルを作る

まず、Day9用のHTMLファイルを作成します。

day09-pc-sidebar.html

Day8の完成形を元にして進めたいので、Day8ファイルをコピーします。

cp day08-admin-header.html day09-pc-sidebar.html

エクスプローラーでコピーしても大丈夫です。

現在の構成に、Day9用ファイルが追加される形です。

tailwind-learning/
├── day01-heading.html
├── day02-card-base.html
├── day03-image-card.html
├── day04-card-text.html
├── day05-card-buttons.html
├── day06-card-complete.html
├── day07-button-colors.html
├── day08-admin-header.html
├── day09-pc-sidebar.html
└── images/
    └── sample-poster.png

STEP 2：タイトルをDay9用に直す

day09-pc-sidebar.html の <title> を、Day9用に変更します。

修正前

<title>Day 8 管理画面ヘッダー</title>

修正後

<title>Day 9 PC用サイドバーを作る</title>

このSTEPでは、ブラウザタブに表示されるタイトルだけ を変更します。
画面に表示されているヘッダーやカード部分は、まだ触りません。

STEP 3：ヘッダー下にレイアウト用の箱を作る

Day9では、ヘッダーの下に サイドバー + メインコンテンツ を置くための箱を作ります。

今は、header の下に作品カードの div が直接置かれている状態です。

修正前

<header class="bg-gray-900 text-white px-6 py-4 flex justify-between items-center">
    <h1 class="text-xl">
        Admin Dashboard
    </h1>

    <p class="text-sm">
        管理者：遅咲きエンジニア
    </p>
</header>

<div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm mx-auto mt-6">
    <!-- 作品カード -->
</div>

次に、ヘッダー下の作品カード全体を main で囲みます。

修正後

<header class="bg-gray-900 text-white px-6 py-4 flex justify-between items-center">
    <h1 class="text-xl">
        Admin Dashboard
    </h1>

    <p class="text-sm">
        管理者：遅咲きエンジニア
    </p>
</header>

<main>
    <div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm mx-auto mt-6">
        <!-- 作品カード -->
    </div>
</main>

今回のポイント

main は、ページの主要な内容を囲むHTML要素です。

Day9では、この main の中に、次のSTEPでサイドバーを追加していきます。

main
├── サイドバー
└── 作品カード

このSTEPでは、まだ見た目はほぼ変わりません。
まずは ヘッダー下の内容を main で囲む だけです。

STEP 4：mainの中にサイドバー用の箱を追加する

次は、main の中に サイドバー用の箱 を追加します。

今は、main の中に作品カードだけが入っている状態です。

修正前

<main>
    <div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm mx-auto mt-6">
        <!-- 作品カード -->
    </div>
</main>

修正後

作品カードの前に、サイドバー用の aside を追加してください。

<main>
    <aside>
        サイドバー
    </aside>

    <div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm mx-auto mt-6">
        <!-- 作品カード -->
    </div>
</main>

今回のポイント

aside は、補足的な情報やメニューを置くときに使えるHTML要素です。

管理画面では、左側メニューを aside として作ると、役割が分かりやすくなります。

この時点では、まだ横並びではありません。

サイドバー
作品カード

のように、上下に表示されればOKです。

STEP 5：サイドバーと作品カードを横並びにする

今は、aside と作品カードが上下に並んでいる状態です。

次は、main に flex を追加して、サイドバーと作品カードを横並びにします。

修正前

<main>

修正後

<main class="flex">

今回追加するclass

class	役割
flex	子要素を横並びにする

表示確認

ブラウザで確認して、以下のようになればOKです。

サイドバー　作品カード

この時点では、まだサイドバーの幅や背景色は整えていません。
まずは ヘッダー下で、サイドバーと作品カードが横並びになること を確認します。

STEP 6：サイドバーの幅を決める

今は main に flex を付けたので、aside と作品カードが横並びになっている状態です。

次は、サイドバーらしくするために、aside に幅を指定します。

修正前

<aside>
    サイドバー
</aside>

修正後

<aside class="w-48">
    サイドバー
</aside>

今回追加するclass

class	役割
w-48	要素の幅を固定する

今回のポイント

w-48 を付けることで、サイドバーの横幅を固定できます。

この時点では、背景色がまだないので少し分かりにくいかもしれません。
次のSTEPで背景色を付けて、サイドバーの範囲を見えやすくします。

STEP 7：サイドバーに背景色を付ける

次は、サイドバーの範囲が分かるように、aside に背景色を付けます。

修正前

<aside class="w-48">
    サイドバー
</aside>

修正後

<aside class="w-48 bg-gray-600">
    サイドバー
</aside>

今回追加するclass

class	役割
bg-gray-600	サイドバーの背景を、ヘッダーより少し明るいグレーにする

表示確認

ブラウザで確認して、以下の状態になればOKです。

• 左側にサイドバーの領域が表示されている
• サイドバーの背景が濃いグレーになっている
• 右側に作品カードが表示されている

この時点では、サイドバー内の文字色はまだ黒のままなので、見づらくなる可能性があります。
次のSTEPで文字色を白にします。

STEP 8：サイドバーの文字色を白にする

今は、サイドバーの背景を bg-gray-600 にしたので、文字色が黒のままだと少し読みにくい状態です。

次は、aside に text-white を追加して、サイドバー内の文字を白にします。

修正前

<aside class="w-48 bg-gray-600">
    サイドバー
</aside>

修正後

<aside class="w-48 bg-gray-600 text-white">
    サイドバー
</aside>

今回追加するclass

class	役割
text-white	サイドバー内の文字色を白にする

表示確認

ブラウザで確認して、以下の状態になればOKです。

• サイドバーの背景が bg-gray-600 になっている
• サイドバー の文字が白くなっている
• 背景と文字のコントラストが上がり、読みやすくなっている

STEP 9：サイドバー内に余白を付ける

今は、サイドバー内の文字が左上に寄っている状態です。

次は、aside に p-4 を追加して、サイドバー内側に余白を付けます。

修正前

<aside class="w-48 bg-gray-600 text-white">
    サイドバー
</aside>

修正後

<aside class="w-48 bg-gray-600 text-white p-4">
    サイドバー
</aside>

今回追加するclass

class	役割
p-4	サイドバー内側に余白を付ける

表示確認

ブラウザで確認して、以下の状態になればOKです。

• サイドバー の文字が左上に張り付かなくなっている
• サイドバー内に余白ができている
• 左メニュー領域らしく見え始めている

STEP 10：サイドバーの仮テキストを見出しにする

今は、サイドバー内にただ サイドバー と表示している状態です。

次は、サイドバーの上部見出しとして見えるように、p タグで囲んで少し太字にします。

修正前

<aside class="w-48 bg-gray-600 text-white p-4">
    サイドバー
</aside>

修正後

<aside class="w-48 bg-gray-600 text-white p-4">
    <p class="font-bold">
        サイドバー
    </p>
</aside>

今回追加するclass

class	役割
font-bold	文字を太字にする

表示確認

ブラウザで確認して、以下の状態になればOKです。

• サイドバー の文字が少し強調されている
• 左側メニューの見出しらしく見える

次のSTEPで、サイドバー内にメニュー項目を追加します。

STEP 11：サイドバー内にメニュー項目を追加する

次は、サイドバー の下に、管理画面らしいメニュー項目を追加します。

修正前

<aside class="w-48 bg-gray-600 text-white p-4">
    <p class="font-bold">
        サイドバー
    </p>
</aside>

修正後

<aside class="w-48 bg-gray-600 text-white p-4">
    <p class="font-bold">
        サイドバー
    </p>

    <ul>
        <li>ダッシュボード</li>
        <li>作品一覧</li>
        <li>レビュー管理</li>
    </ul>
</aside>

今回のポイント

このSTEPでは、まだTailwind CSSのclassは追加しません。
まずは、サイドバーの中身として メニュー項目を置く だけです。

表示確認

ブラウザで確認して、以下のように表示されればOKです。

サイドバー
ダッシュボード
作品一覧
レビュー管理

この時点では、見出しとメニューの間隔が詰まって見えると思います。
次のSTEPで、メニュー部分に余白を付けます。

STEP 12：見出しとメニューの間に余白を付ける

今は、サイドバー の見出しとメニュー項目が少し近い状態です。

次は、ul に mt-4 を追加して、見出しとメニューの間に余白を作ります。

修正前

<ul>
    <li>ダッシュボード</li>
    <li>作品一覧</li>
    <li>レビュー管理</li>
</ul>

修正後

<ul class="mt-4">
    <li>ダッシュボード</li>
    <li>作品一覧</li>
    <li>レビュー管理</li>
</ul>

今回追加するclass

class	役割
mt-4	要素の上側に余白を付ける

表示確認

ブラウザで確認して、以下の状態になればOKです。

• サイドバー 見出しとメニュー項目の間に余白がある
• メニュー全体が少し読みやすくなっている

STEP 13：メニュー項目同士の間隔を空ける

今は、ダッシュボード、作品一覧、レビュー管理 が少し詰まって見える状態です。

次は、ul に space-y-2 を追加して、メニュー項目同士の縦の間隔を空けます。

修正前

<ul class="mt-4">
    <li>ダッシュボード</li>
    <li>作品一覧</li>
    <li>レビュー管理</li>
</ul>

修正後

<ul class="mt-4 space-y-2">
    <li>ダッシュボード</li>
    <li>作品一覧</li>
    <li>レビュー管理</li>
</ul>

今回追加するclass

class	役割
space-y-2	子要素同士の縦方向の間隔を空ける

今回のポイント

mt-4 は、ul 自体の上側に余白を付けるclassでした。

一方で、space-y-2 は、ul の中にある li 同士の縦間隔を空けるclassです。

サイドバー
    ↑ mt-4
ダッシュボード
    ↑ space-y-2
作品一覧
    ↑ space-y-2
レビュー管理

STEP 14：メニュー項目の文字サイズを少し小さくする

今は、メニュー項目の文字サイズがデフォルトのままです。

次は、ul に text-sm を追加して、サイドバーのメニューらしく少し控えめな文字サイズにします。

修正前

<ul class="mt-4 space-y-2">
    <li>ダッシュボード</li>
    <li>作品一覧</li>
    <li>レビュー管理</li>
</ul>

修正後

<ul class="mt-4 space-y-2 text-sm">
    <li>ダッシュボード</li>
    <li>作品一覧</li>
    <li>レビュー管理</li>
</ul>

今回追加するclass

class	役割
text-sm	文字サイズを少し小さくする

今回のポイント

サイドバーの見出し サイドバー は font-bold で少し目立たせています。
一方で、メニュー項目は補足情報なので、text-sm にして少し控えめにすると、見出しとの強弱が付きます。

表示確認

ブラウザで確認して、以下の状態になればOKです。

• サイドバー 見出しより、メニュー項目の文字が少し控えめに見える
• 左メニューらしい見た目になってきている
• ダッシュボード、作品一覧、レビュー管理 が読みやすく並んでいる

STEP 15：メニュー項目に内側余白を付ける

今は、メニュー項目の文字がそのまま並んでいる状態です。

次は、各 li に px-2 と py-1 を追加して、メニュー項目らしいクリック領域に近づけます。

修正前

<ul class="mt-4 space-y-2 text-sm">
    <li>ダッシュボード</li>
    <li>作品一覧</li>
    <li>レビュー管理</li>
</ul>

修正後

<ul class="mt-4 space-y-2 text-sm">
    <li class="px-2 py-1">ダッシュボード</li>
    <li class="px-2 py-1">作品一覧</li>
    <li class="px-2 py-1">レビュー管理</li>
</ul>

今回追加するclass

class	役割
px-2	メニュー項目の左右に余白を付ける
py-1	メニュー項目の上下に余白を付ける

今回のポイント

サイドバーのメニューは、文字だけが並んでいるよりも、各項目に少し余白がある方が押せる場所として分かりやすくなります。

まだリンクやhoverは付けません。
このSTEPでは、まず メニュー項目の内側余白 だけ確認します。

STEP 16：メニュー項目に角丸を付ける

今は、各メニュー項目に余白が付きました。

次は、各 li に rounded を追加して、メニュー項目らしい形にします。

修正前

<ul class="mt-4 space-y-2 text-sm">
    <li class="px-2 py-1">ダッシュボード</li>
    <li class="px-2 py-1">作品一覧</li>
    <li class="px-2 py-1">レビュー管理</li>
</ul>

修正後

<ul class="mt-4 space-y-2 text-sm">
    <li class="px-2 py-1 rounded">ダッシュボード</li>
    <li class="px-2 py-1 rounded">作品一覧</li>
    <li class="px-2 py-1 rounded">レビュー管理</li>
</ul>

今回追加するclass

class	役割
rounded	メニュー項目の角を少し丸くする

今回のポイント

rounded だけでは、背景色がないため変化は分かりにくいです。

次のSTEPでhover時の背景色を付けると、角丸が分かりやすくなります。

STEP 17：メニュー項目にhover時の背景色を付ける

今は、各メニュー項目に余白と角丸が付きました。

次は、各 li に hover:bg-gray-500 を追加して、マウスを乗せたときに背景色が変わるようにします。

修正前

<ul class="mt-4 space-y-2 text-sm">
    <li class="px-2 py-1 rounded">ダッシュボード</li>
    <li class="px-2 py-1 rounded">作品一覧</li>
    <li class="px-2 py-1 rounded">レビュー管理</li>
</ul>

修正後

<ul class="mt-4 space-y-2 text-sm">
    <li class="px-2 py-1 rounded hover:bg-gray-500">ダッシュボード</li>
    <li class="px-2 py-1 rounded hover:bg-gray-500">作品一覧</li>
    <li class="px-2 py-1 rounded hover:bg-gray-500">レビュー管理</li>
</ul>

今回追加するclass

class	役割
hover:bg-gray-500	マウスを乗せたときに背景色を少し明るくする

今回のポイント

サイドバー本体は bg-gray-600 なので、hover時は少し明るい bg-gray-500 にします。

これで、メニュー項目にマウスを乗せたときに、

通常時：bg-gray-600
hover時：bg-gray-500

という変化が出ます。

表示確認

ブラウザで確認して、以下の状態になればOKです。

• メニュー項目にマウスを乗せると背景色が変わる
• rounded の角丸が分かりやすくなる
• サイドバーのメニューらしい見た目になる

STEP 18：サイドバーを画面の高さまで伸ばす

次は、サイドバー自体の高さだけ 整えましょう。

今回は aside に min-h-screen を追加します。

修正前

<aside class="w-48 bg-gray-600 text-white p-4">

修正後

<aside class="w-48 bg-gray-600 text-white p-4 min-h-screen">

今回追加するclass

class	役割
min-h-screen	要素の最小高さを画面の高さにする

今回のポイント

min-h-screen を付けると、サイドバーが画面の下まで伸びるため、PC管理画面の左メニューらしく見えます。

ただし、厳密にはヘッダーの高さ分もあるため、完全なレイアウト調整は Day10 で扱います。

STEP 19：作品カードが縦に伸びないようにする

aside に min-h-screen を追加すると、サイドバーは画面の高さまで伸びました。

ただし、main が flex になっている影響で、右側の作品カードまで縦に伸びてしまいました。

そこで、main に items-start を追加します。

修正前

<main class="flex">

修正後

<main class="flex items-start">

今回追加するclass

class	役割
items-start	flex内の要素を上揃えにする

今回のポイント

main が flex のとき、子要素の高さが揃ってしまうことがあります。

今回の場合、aside に min-h-screen を付けたことで、右側の作品カードもサイドバーの高さに引っ張られて伸びてしまいました。

items-start を追加することで、flex内の要素を上揃えにし、作品カードが縦に伸びるのを防げました。

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 9 PC用サイドバーを作る</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <header class="bg-gray-900 text-white px-6 py-4 flex justify-between items-center">
        <h1 class="text-xl">
            Admin Dashboard
        </h1>

        <p class="text-sm">
            管理者：遅咲きエンジニア
        </p>
    </header>

    <main class="flex items-start">
        <aside class="w-48 bg-gray-600 text-white p-4 min-h-screen">
            <!-- サイドバー -->
            <p class="font-bold">
                サイドバー
            </p>

            <ul class="mt-4 space-y-2 text-sm">
                <li class="px-2 py-1 rounded hover:bg-gray-500">ダッシュボード</li>
                <li class="px-2 py-1 rounded hover:bg-gray-500">作品一覧</li>
                <li class="px-2 py-1 rounded hover:bg-gray-500">レビュー管理</li>
            </ul>
        </aside>

        <div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm mx-auto mt-6">
            <!-- 作品カード -->
            <img
                src="images/sample-poster.png"
                alt="サンプル画像"
                class="w-20 h-28 object-cover rounded-md flex-shrink-0"
            >

            <div class="flex-1">
                <p class="text-lg font-bold">サンプル映画タイトル</p>
                <p class="text-sm text-gray-600">
                    平均評価：<span class="text-yellow-500">4.2</span>
                </p>
                <p class="text-sm text-gray-600">レビュー数：12件</p>

                <div class="flex gap-2 mt-3 flex-wrap">
                    <button class="px-3 py-1.5 rounded-md border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-200">
                        詳細
                    </button>

                    <button class="px-3 py-1.5 rounded-md border border-blue-500 text-sm font-medium text-blue-600 hover:bg-blue-100">
                        編集
                    </button>

                    <button class="px-3 py-1.5 rounded-md border border-red-500 text-sm font-medium text-red-600 hover:bg-red-100">
                        削除
                    </button>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

使ったTailwind CSSのclass

class	内容
flex	子要素を横並びにする
w-48	要素の幅を固定する
bg-gray-600	サイドバーの背景を、ヘッダーより少し明るいグレーにする
text-white	サイドバー内の文字色を白にする
p-4	サイドバー内側に余白を付ける
font-bold	文字を太字にする
mt-4	要素の上側に余白を付ける
space-y-2	子要素同士の縦方向の間隔を空ける
text-sm	文字サイズを少し小さくする
rounded	メニュー項目の角を少し丸くする
hover:bg-gray-500	マウスを乗せたときに背景色を少し明るくする
min-h-screen	要素の最小高さを画面の高さにする
items-start	flex内の要素を上揃えにする

表示確認

以下の点をブラウザで確認しました。

確認項目	見るところ
ヘッダー下にサイドバーと作品カードが横並びで表示されている	main / flex
左側にPC用サイドバーが表示されている	aside
サイドバーの幅が固定されている	w-48
サイドバーの背景がヘッダーより少し明るいグレーになっている	bg-gray-600
サイドバー内の文字が白く表示されている	text-white
サイドバー内に余白が付いている	p-4
メニュー項目同士に縦の間隔がある	space-y-2
メニュー項目にマウスを乗せたとき、背景色が変わることを確認した	hover:bg-gray-500
サイドバーが画面下まで伸びている	min-h-screen
作品カードがサイドバーの高さに引っ張られて縦に伸びていない	items-start

今日分かったこと

Day9では、管理画面の左側にPC用サイドバーを追加しました。

main に flex を付けることで、サイドバーと作品カードを横並びに配置できました。

サイドバーの幅は w-48 で固定し、bg-gray-600 と text-white を使うことで、ヘッダーと区別しながら読みやすい左メニューにできました。

背景色は bg-gray-800 や bg-gray-700 も試しましたが、ヘッダーの bg-gray-900 と近く、全体が重く見えました。

一方で白背景ではサイドバーらしさが弱く感じたため、今回はヘッダーより少し明るい bg-gray-600 にしました。

メニュー項目には px-2、py-1、rounded を付けることで、文字だけが並んでいる状態よりも、メニューらしい見た目に近づきました。

hover時は hover:bg-gray-500 を使い、サイドバー本体より少し明るく変化するようにしました。

また、サイドバーは中身の高さ分だけだと途中で切れて見えたため、min-h-screen で画面の下まで伸ばしました。

その際、右側の作品カードまで縦に伸びてしまったため、main に items-start を追加して、flex内の要素を上揃えにしました。

サイドバーの高さを調整するときは、同じflex内にある要素への影響も確認する必要があると分かりました。

次回やること

• 【Tailwind CSS入門 Day10】PC管理画面レイアウトを作る

シリーズ記事

• 【Tailwind CSS入門 Day1】管理画面の見出しを作る
• 【Tailwind CSS入門 Day2】カードUIの土台を作る
• 【Tailwind CSS入門 Day3】画像付きカードを作る
• 【Tailwind CSS入門 Day4】作品情報の文字を整える
• 【Tailwind CSS入門 Day5】管理画面風のボタンを作る
• 【Tailwind CSS入門 Day6】作品カードUIを完成させる
• 【Tailwind CSS入門 Day7】管理画面風ボタンを色分けする
• 【Tailwind CSS入門 Day8】管理画面ヘッダーを作る
• 【Tailwind CSS入門 Day9】PC用サイドバーを作る ← 今回