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

目次

• はじめに
• 今日作るもの
• STEP 1：Day10用HTMLファイルを作る
• STEP 2：タイトルをDay10用に直す
• STEP 3：作品カードをメインエリア用の箱で囲む
• STEP 4：右側のメインエリアを広げる
• STEP 5：メインエリアに余白を付ける
• STEP 6：作品カードの上余白を外す
• STEP 7：メインエリアに見出しを追加する
• STEP 8：見出しの下に補足文を追加する
• STEP 9：補足文と作品カードの間に余白を付ける
• STEP 10：作品カードを左寄せにする
• STEP 11：補足文と作品カードの間隔を整える
• STEP 12：メインエリアの背景色を明確にする
• STEP 13：メインエリアの高さを整える
• 完成コード
• 使った または 削除したTailwind CSSのclass
• 表示確認
• 今日分かったこと
• 次回やること
• シリーズ記事

はじめに

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

今日作るもの

Day10では、Day9で作った ヘッダー + サイドバー + 作品カード を元に、PC管理画面らしいレイアウトへ整えます。

Day9では「サイドバーを作る」ことが主役でした。
Day10では、右側のメインエリアを整えて、画面全体を 管理画面レイアウト として見やすくしていきます。

┌────────────────────────────────────┐
│ Admin Dashboard        管理者表示   │
├──────────────┬─────────────────────┤
│ サイドバー    │ メインエリア          │
│              │ ┌─────────────────┐ │
│              │ │ 作品カード        │ │
│              │ └─────────────────┘ │
└──────────────┴─────────────────────┘

今回は、まだテーブルは作りません。
作品カードを使ったまま、右側のメイン表示エリア を整えます。

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

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

day10-pc-admin-layout.html

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

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

cp day09-pc-sidebar.html day10-pc-admin-layout.html

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

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
├── day10-pc-admin-layout.html
└── images/
    └── sample-poster.png

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

day10-pc-admin-layout.html の <title> を、Day10用に変更してください。

修正前

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

修正後

<title>Day 10 PC管理画面レイアウトを作る</title>

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

STEP 3：作品カードをメインエリア用の箱で囲む

Day10では、右側を メインエリア として扱えるようにします。

今は、main の中に aside と作品カードが直接並んでいます。

修正前

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

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

修正後

作品カードを、もう1つ div で囲みます。

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

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

今回のポイント

このSTEPでは、まだTailwind CSSのclassは追加しません。

まずは、右側の表示領域を作るために、作品カードを箱で囲むだけです。

main
├── aside
└── div
    └── 作品カード

次のSTEPで、この右側の div にメインエリア用のclassを追加します。

STEP 4：右側のメインエリアを広げる

今は、作品カードを div で囲んだだけなので、右側のエリア自体にはまだ幅の指定がありません。

次は、作品カードを囲んだ外側の div に flex-1 を追加します。

修正前

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

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

修正後

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

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

今回追加するclass

class	役割
flex-1	サイドバー以外の残り幅をメインエリアとして使う

今回のポイント

main は flex になっています。

その中で、

左側：aside
右側：div

右側の div に flex-1 を付けることで、サイドバー以外の残り幅をメインエリアとして使えるようになります。

このSTEPでは、まだ見た目の変化は大きくないかもしれません。
右側に メインエリアの土台を作る ための指定です。

STEP 5：メインエリアに余白を付ける

今は右側の div が flex-1 で広がるようになりました。
次は、メインエリアの内側に余白を付けて、管理画面らしく整えます。

修正前

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

修正後

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

今回追加するclass

class	役割
p-6	メインエリアの内側に余白を付ける

今回のポイント

Day9までは、作品カード自身に mt-6 を付けて、上方向の余白を作っていました。

Day10では、右側全体を メインエリア として扱うため、外側の div に p-6 を付けます。

これにより、右側エリア全体に余白ができて、管理画面のメインコンテンツらしくなります。

STEP 6：作品カードの上余白を外す

今は、メインエリア側に p-6 を付けたので、右側全体に余白ができています。

そのため、作品カード自身に付いている mt-6 は少し余白が重複します。

修正前

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

修正後

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

削除するclass

class	理由
mt-6	メインエリア側の p-6 で余白を管理するため

今回のポイント

Day9までは、作品カード単体で上余白を作るために mt-6 を使っていました。

Day10では、右側のメインエリアに p-6 を付けたので、カード側の mt-6 を外して、余白の管理場所を 作品カード自身 から メインエリア に移します。

これで、右側エリア全体の余白として整理できます。

STEP 7：メインエリアに見出しを追加する

右側のメインエリアに余白が付き、作品カードの上余白も整理できました。

次は、メインエリアの上部に 見出し を追加します。

Day10ではテーブルは作らないので、見出しだけ追加して、右側が「メインコンテンツ領域」だと分かるようにします。

修正前

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

修正後

<div class="flex-1 p-6">
    <h2 class="text-lg font-bold">
        作品管理
    </h2>

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

今回追加するclass

class	役割
text-lg	見出しの文字サイズを少し大きくする
font-bold	見出しの文字を太字にする

今回のポイント

Day10では、右側を 管理画面のメインエリア として見せたいので、作品管理 という見出しを追加します。

まだ作品一覧テーブルは作りません。
ここでは、メインエリアのタイトルを置くだけです。

STEP 8：見出しの下に補足文を追加する

右側のメインエリアに 作品管理 の見出しを追加しました。

次は、見出しの下に 補足文 を追加して、メインエリアの内容が分かるようにします。

修正前

<div class="flex-1 p-6">
    <h2 class="text-lg font-bold">
        作品管理
    </h2>

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

修正後

<div class="flex-1 p-6">
    <h2 class="text-lg font-bold">
        作品管理
    </h2>

    <p class="text-sm text-gray-600 mt-1">
        登録済み作品の確認・編集・削除を行います。
    </p>

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

今回追加するclass

class	役割
text-sm	補足文の文字サイズを少し小さくする
text-gray-600	補足文の文字色をグレーにして控えめにする
mt-1	見出しと補足文の間に少し余白を付ける

今回のポイント

作品管理 はメインエリアの見出しなので、text-lg と font-bold で少し目立たせています。

一方で、補足文は説明なので、text-sm と text-gray-600 を使って控えめに表示します。

また、mt-1 を付けることで、見出しと補足文の間に少し余白を作りました。

見出しと補足文は同じ内容のまとまりなので、広く空けすぎず、近すぎない程度の余白にしました。

STEP 9：補足文と作品カードの間に余白を付ける

今は、作品管理 の見出し、補足文、作品カードが並んでいる状態です。

次は、作品カードに mt-4 を追加して、補足文と作品カードの間に余白を作ります。

修正前

<div class="flex-1 p-6">
    <h2 class="text-lg font-bold">
        作品管理
    </h2>

    <p class="text-sm text-gray-600 mt-1">
        登録済み作品の確認・編集・削除を行います。
    </p>

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

修正後

<div class="flex-1 p-6">
    <h2 class="text-lg font-bold">
        作品管理
    </h2>

    <p class="text-sm text-gray-600 mt-1">
        登録済み作品の確認・編集・削除を行います。
    </p>

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

今回追加するclass

class	役割
mt-4	補足文と作品カードの間に余白を付ける

今回のポイント

STEP6で mt-6 を外したのは、メインエリア全体の余白を p-6 で管理するためでした。

STEP8で見出しの下に補足文を追加したので、今回は補足文と作品カードの間隔として、作品カードに mt-4 を付けます。

メインエリア外側の余白：p-6
見出しと補足文の間隔：mt-1
補足文と作品カードの間隔：mt-4

これで、余白の役割が分かりやすくなります。

STEP 10：作品カードを左寄せにする

今は作品カードに mx-auto が付いているため、メインエリア内で中央寄せになっています。

Day10では、PC管理画面レイアウトとして、右側のメインエリア内にコンテンツを左から配置する形に整えます。

修正前

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

修正後

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

削除するclass

class	理由
mx-auto	メインエリア内で中央寄せではなく、左寄せにするため

今回のポイント

Day6では、作品カード単体を画面中央に見せるために mx-auto を使いました。

Day10では、右側にメインエリアができたので、カードを中央寄せにするよりも、見出しの下に左寄せで配置した方が管理画面らしく見えます。

STEP 11：補足文と作品カードの間隔を整える

今は、作品管理 の見出し、補足文、作品カードが並んでいます。

次は、作品カードの上余白を少しだけ広げて、補足文との間隔を整えます。

修正前

<p class="text-sm text-gray-600 mt-1">
    登録済み作品の確認・編集・削除を行います。
</p>

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

修正後

<p class="text-sm text-gray-600 mt-1">
    登録済み作品の確認・編集・削除を行います。
</p>

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

変更するclass

修正前	修正後	役割
mt-4	mt-6	補足文と作品カードの間隔を少し広げる

今回のポイント

STEP9では、補足文と作品カードの間隔として mt-4 を付けました。

その後、作品カードを左寄せにした状態で確認すると、補足文とカードの間が少し近く感じました。

そこで、作品カードの上余白を mt-4 から mt-6 に変更し、補足文と作品カードの間隔を少し広げました。

mt-4 でも間違いではありませんが、今回の表示では mt-6 の方が、見出し・補足文・カードのまとまりが自然に見えました。

STEP 12：メインエリアの背景色を明確にする

今は body に bg-gray-100 が付いているため、画面全体は薄いグレーです。

ただ、Day10では右側を メインエリア として扱いたいので、外側の div にも bg-gray-100 を付けて、メインエリアであることを明確にします。

修正前

<div class="flex-1 p-6">

修正後

<div class="flex-1 p-6 bg-gray-100">

今回追加するclass

class	役割
bg-gray-100	メインエリアの背景を薄いグレーにする

今回のポイント

すでに body に bg-gray-100 があるため、見た目の変化は大きくないかもしれません。

ただ、Day10では右側の div を メインエリアとして独立して扱う ため、bg-gray-100 を明示しておくと、コード上でも役割が分かりやすくなります。

body：画面全体の背景
main内の右側div：管理画面のメインエリア

STEP 13：メインエリアの高さを整える

今は、サイドバーに min-h-screen が付いているため、左側は画面下まで伸びています。

ただし、右側のメインエリアは中身の高さ分だけなので、コード上は左右で高さの考え方が少し分かれています。

Day10では、右側のメインエリアにも min-h-screen を追加して、サイドバーとメインエリアの高さを揃える形にします。

修正前

<div class="flex-1 p-6 bg-gray-100">

修正後

<div class="flex-1 p-6 bg-gray-100 min-h-screen">

今回追加するclass

class	役割
min-h-screen	メインエリアの最小高さを画面の高さにする

今回のポイント

Day9では、サイドバーだけに min-h-screen を付けました。

Day10では、右側も管理画面のメインエリアとして扱うため、メインエリアにも min-h-screen を付けます。

これで、左側のサイドバーと右側のメインエリアが、どちらも画面の高さまで伸びる構成になります。

左側：aside min-h-screen
右側：main内のdiv min-h-screen

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 10 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="flex-1 p-6 bg-gray-100 min-h-screen">
            <h2 class="text-lg font-bold">
                作品管理
            </h2>

            <p class="text-sm text-gray-600 mt-1">
                登録済み作品の確認・編集・削除を行います。
            </p>

            <div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm 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>
        </div>
    </main>
</body>
</html>

使った または 削除したTailwind CSSのclass

追加したclass

class	内容
flex-1	サイドバー以外の残り幅をメインエリアとして使う
p-6	メインエリアの内側に余白を付ける
text-lg	見出しの文字サイズを少し大きくする
font-bold	見出しの文字を太字にする
text-sm	補足文の文字サイズを少し小さくする
text-gray-600	補足文の文字色をグレーにして控えめにする
mt-1	見出しと補足文の間に少し余白を付ける
mt-6	補足文と作品カードの間に余白を付ける
bg-gray-100	メインエリアの背景を薄いグレーにする
min-h-screen	メインエリアの最小高さを画面の高さにする

削除したclass

class	内容
mt-6	作品カード単体の上余白を一度外し、メインエリア側の余白管理に変更した
mx-auto	作品カードを中央寄せではなく、メインエリア内で左寄せにするため削除した

Day9では作品カード単体の上余白として mt-6 を使っていました。

Day10では一度 mt-6 を外して、メインエリア側の p-6 で外側の余白を管理しました。

その後、補足文と作品カードの間隔を整える目的で、作品カードに mt-6 を付け直しました。

表示確認

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

Day10では右側メインエリアを整えてきたので、以下を確認します。

確認項目	見るところ
左側にサイドバーがある	aside
右側にメインエリアがある	flex-1
メインエリアに余白がある	p-6
メインエリアに 作品管理 の見出しがある	h2
見出しの下に補足文がある	text-sm text-gray-600
作品カードがメインエリア内で左寄せになっている	mx-auto を削除済み
補足文と作品カードの間に余白がある	mt-6
右側メインエリアも画面下まで伸びている	min-h-screen

特に確認してほしい点

min-h-screen を右側にも追加したので、表示が不自然になっていないか確認してください。

特に見るところはここです。

• 左サイドバーと右メインエリアの高さが揃って見えるか
• 作品カードが縦に伸びていないか
  -余白が広すぎないか

今日分かったこと

Day10では、Day9で作ったサイドバー付き画面を元に、PC管理画面らしいレイアウトへ整えました。

まず、作品カードを外側の div で囲むことで、右側をメインエリアとして扱えるようにしました。

flex-1 を付けることで、サイドバー以外の残り幅をメインエリアとして使えることが分かりました。

また、メインエリアに p-6 を付けることで、右側全体に余白を作れました。

Day9までは作品カード自身に mt-6 を付けていましたが、Day10ではメインエリア側で余白を管理する形に変更しました。

そのため、作品カードの上余白を一度外し、メインエリア内の配置として整理しました。

メインエリアには 作品管理 の見出しを追加し、text-lg と font-bold で少し目立たせました。

補足文には text-sm と text-gray-600 を使うことで、見出しより控えめな説明文として表示できました。

さらに、見出しと補足文の間には mt-1 を付け、近すぎず離れすぎない余白に調整しました。

作品カードは、以前は mx-auto で中央寄せにしていましたが、管理画面のメインエリアでは左寄せの方が自然に見えました。

そのため、mx-auto を外して、見出しの下に左寄せで配置しました。

補足文と作品カードの間には mt-6 を付けることで、説明文とカードの間に適度な余白を作れました。

また、メインエリアに bg-gray-100 を付けることで、右側の領域をコード上でもメインエリアとして分かりやすくできました。

最後に、メインエリアにも min-h-screen を付けることで、左側のサイドバーと右側のメインエリアの高さを揃えました。

Day10では、作品カードそのものを作り込むのではなく、サイドバーとメインエリアを分けて、管理画面全体のレイアウトとして整えることができました。

次回やること

• 【Tailwind CSS入門 Day11】作品一覧テーブルを作る

シリーズ記事

• 【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用サイドバーを作る
• 【Tailwind CSS入門 Day10】PC管理画面レイアウトを作る ← 今回