【Tailwind CSS入門 Day8】管理画面ヘッダーを作る

目次

• はじめに
• 今日作るもの
• Day8で作る範囲
• STEP 1：Day8用HTMLファイルを作る
• STEP 2：タイトルをDay8用に直す
• STEP 3：見出しをヘッダー用の箱に変更する
• STEP 4：右側に管理者名を追加する
• STEP 5：ヘッダー内を横並びにする
• STEP 6：ヘッダー内を左右に分ける
• STEP 7：ヘッダー内の縦位置を中央に揃える
• STEP 8：ヘッダーの左右余白を少し広げる
• STEP 9：管理者表示を少し小さくする
• 完成コード
• 表示確認
• 使ったTailwind CSSのclass
• 今日分かったこと
• 次回やること
• シリーズ記事

はじめに

この記事は、Tailwind CSSで管理画面UIを1ステップずつ作る学習記録です。
Day8からPhase2：管理者ダッシュボードUI作成になります。
過去記事は末尾の「シリーズ記事」にまとめています。

今日作るもの

Day8では、管理画面の上部ヘッダーを作ります。

Day1で作った Admin Dashboard の見出しは、単純な見出しでした。
Day8では、Phase 2の入口として、もう少し 管理画面のヘッダーらしい形 にしていきます。

完成イメージ

Day8の目的は「見出し」から「管理画面ヘッダー」へ進化させること です。

┌────────────────────────────────────┐
│ Admin Dashboard        管理者：〇〇 │
└────────────────────────────────────┘

Day8で作る範囲

今回は、まだサイドバーやテーブルは作りません。

作るのはこの部分だけです。

上部ヘッダー
├── 左側：Admin Dashboard
└── 右側：管理者名などの表示

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

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

day08-admin-header.html

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

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

cp day07-button-colors.html day08-admin-header.html

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

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
└── images/
    └── sample-poster.png

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

day08-admin-header.html の <title> を、Day8用に変更します。

修正前

<title>Day 7 管理画面風ボタンを色分けする</title>

修正後

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

このSTEPでは、ブラウザタブに表示されるタイトルだけ を変更します。
画面に表示されている Admin Dashboard はまだ触りません。

STEP 3：見出しをヘッダー用の箱に変更する

今はおそらく、Day7からコピーしたこの形になっています。

修正前

<h1 class="text-center text-xl bg-gray-900 text-white p-4">
    Admin Dashboard
</h1>

Day8では、見出し単体ではなく ヘッダー全体の箱 として扱いたいので、h1 を囲むような header に変更します。

修正後

<header class="bg-gray-900 text-white p-4">
    <h1 class="text-xl">
        Admin Dashboard
    </h1>
</header>

ここで変わること

変更点	理由
h1 の外に header を作る	ヘッダー全体をまとめる箱にするため
bg-gray-900 を header 側へ移動	背景色はヘッダー全体に付けたいから
text-white を header 側へ移動	ヘッダー内の文字を白くするため
text-center を外す	Day8では左側にタイトル、右側に管理者名を置くため
p-4 を header 側へ移動	ヘッダー全体に余白を付けるため

この時点では、見た目は 左寄せ の Admin Dashboard になります。
右側の管理者名は、次のSTEPで追加します。

STEP 4：右側に管理者名を追加する

次は、ヘッダーの右側に表示する 管理者名 を追加します。

今はこの形です。

修正前

<header class="bg-gray-900 text-white p-4">
    <h1 class="text-xl">
        Admin Dashboard
    </h1>
</header>

これを、h1 の下に p を追加して、管理者名を表示します。

修正後

<header class="bg-gray-900 text-white p-4">
    <h1 class="text-xl">
        Admin Dashboard
    </h1>

    <p>
        管理者：遅咲きエンジニア
    </p>
</header>

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

Admin Dashboard
管理者：遅咲きエンジニア

STEP 5：ヘッダー内を横並びにする

今は、Admin Dashboard と 管理者：遅咲きエンジニア が上下に並んでいる状態です。

次は、header に flex を追加して、ヘッダー内を横並びにします。

修正前

<header class="bg-gray-900 text-white p-4">

修正後

<header class="bg-gray-900 text-white p-4 flex">

表示確認

以下のように、ヘッダー内で Admin Dashboard と 管理者：遅咲きエンジニア が表示されました。

STEP 6：ヘッダー内を左右に分ける

今は、Admin Dashboard と 管理者：遅咲きエンジニア が横並びですが、くっついて表示されています。

次は、header に justify-between を追加して、左側と右側に分けます。

修正前

<header class="bg-gray-900 text-white p-4 flex">

修正後

<header class="bg-gray-900 text-white p-4 flex justify-between">

表示確認

左側に Admin Dashboard、右側に 管理者：遅咲きエンジニア が表示されました。

STEP 7：ヘッダー内の縦位置を中央に揃える

今は左右に分かれました。
次は、header に items-center を追加して、ヘッダー内の要素を 縦方向の中央 に揃えます。

修正前

<header class="bg-gray-900 text-white p-4 flex justify-between">

修正後

<header class="bg-gray-900 text-white p-4 flex justify-between items-center">

今回追加するclass

class	役割
items-center	flex内の要素を縦方向の中央に揃える

表示確認

items-center を追加して、ヘッダー内の文字の縦位置を確認しました。

Admin Dashboard と 管理者：遅咲きエンジニア が、ヘッダー内で自然な高さに揃いました。

STEP 8：ヘッダーの左右余白を少し広げる

今は p-4 で、上下左右すべて同じ余白になっています。

次は、管理画面ヘッダーらしくするために、左右の余白を少し広げます。

修正前

<header class="bg-gray-900 text-white p-4 flex justify-between items-center">

修正後

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

変更するclass

修正前	修正後	役割
p-4	px-6 py-4	左右と上下の余白を分けて指定する

今回のポイント

p-4 は、上下左右すべてに同じ余白を付けます。

上下左右：同じ余白

px-6 py-4 にすると、左右と上下を分けて指定できます。

px-6：左右の余白
py-4：上下の余白

今回は、ヘッダーの左右に少し余裕を出したいので、px-6 に変更します。
上下は今と同じくらいでよいので、py-4 にします。

STEP 9：管理者表示を少し小さくする

次は、右側の管理者表示を少し控えめにします。

今は p にclassが付いていない状態です。

修正前

<p>
    管理者：遅咲きエンジニア
</p>

修正後

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

今回追加するclass

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

今回のポイント

Admin Dashboard は画面タイトルなので、少し大きめの text-xl のままにします。

一方で、管理者：遅咲きエンジニア は補足情報なので、text-sm にして少し控えめにします。

これで、ヘッダー内の情報に強弱が付きます。

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 8 管理画面ヘッダー</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>

    <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>
</body>
</html>

表示確認

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

確認項目	見るところ
ヘッダー背景が濃いグレーになっている	bg-gray-900
文字色が白になっている	text-white
左側に Admin Dashboard がある	h1
右側に 管理者：遅咲きエンジニア がある	justify-between
左右の文字位置が縦方向に揃っている	items-center
左右の余白が少し広がっている	px-6
上下の余白が保たれている	py-4
管理者表示が少し小さくなっている	text-sm

使ったTailwind CSSのclass

class	内容
bg-gray-900	ヘッダーの背景を濃いグレーにする
text-white	ヘッダー内の文字色を白にする
px-6	ヘッダーの左右に余白を付ける
py-4	ヘッダーの上下に余白を付ける
flex	ヘッダー内の要素を横並びにする
justify-between	左側と右側に要素を分けて配置する
items-center	横並びにした要素の縦位置を中央に揃える
text-xl	見出しの文字サイズを大きくする
text-sm	管理者表示の文字サイズを少し小さくする

今日分かったこと

Day8では、h1 だけで作っていた見出しを、header 要素を使った管理画面ヘッダーに変更しました。

flex を使うことで、Admin Dashboard と 管理者：遅咲きエンジニア を横並びにできました。

さらに justify-between を追加すると、左側に画面タイトル、右側に管理者表示を配置でき、管理画面の上部ヘッダーらしい見た目になりました。

items-center を使うことで、左右の文字の縦位置を自然に揃えられることも分かりました。

また、p-4 を px-6 py-4 に分けることで、上下左右すべて同じ余白ではなく、左右の余白だけを少し広げる調整ができました。

Admin Dashboard は text-xl で目立たせ、管理者：遅咲きエンジニア は text-sm にすることで、ヘッダー内の情報に強弱を付けられました。

Day8では、管理画面ヘッダーを作りながら、Day7までに使ってきたclassの復習にもなりました。

bg-gray-900、text-white、flex、rounded-lg、shadow-sm、text-sm など、以前使ったclassを別の場所でも使い回せることが分かりました。

Tailwind CSSは、classを組み合わせ直すことで少しずつ画面全体を作っていけると感じました。

次回やること

• 【Tailwind CSS入門 Day9】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】管理画面ヘッダーを作る ← 今回