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

目次

• はじめに
• 今日作るもの
• STEP 1：Day11用HTMLファイルを作る
• STEP 2：タイトルをDay11用に直す
• STEP 3：作品カードを削除する
• STEP 4：テーブルを置くための白い箱を作る
• STEP 5：table要素を追加する
• STEP 6：テーブルの見出し行を作る
• STEP 7：作品データの行を追加する
• 完成コード
• 使ったHTML要素
• 使ったTailwind CSSのclass
• 表示確認
• 今日分かったこと
• 次回やること
• シリーズ記事

はじめに

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

今日作るもの

Day11では、Day10で作ったPC管理画面レイアウトのメインエリアに、作品一覧テーブルを作ります。

Day10までは、右側のメインエリアに作品カードを1件表示していました。

今回は、その作品カードを一覧テーブルに置き換えて、管理画面で作品情報を確認できる形にします。

┌────────────────────────────────────┐
│ Admin Dashboard        管理者表示   │
├──────────────┬─────────────────────┤
│ サイドバー    │ メインエリア          │
│              │ 作品管理              │
│              │ 登録済み作品の確認... │
│              │ ┌─────────────────┐ │
│              │ │ 作品一覧テーブル  │ │
│              │ └─────────────────┘ │
└──────────────┴─────────────────────┘

今回作るテーブルには、以下の項目を表示します。

項目	内容
ID	作品ID
サムネイル	作品のサムネイル画像
タイトル	登録されている作品タイトル
平均評価	作品の平均評価
レビュー数	投稿されたレビュー件数
操作	詳細・編集・削除

Day11では、まず table / thead / tbody / tr / th / td を使って、作品一覧テーブルの基本構造を作ります。

テーブルの細かい見た目調整は、次回のDay12で扱います。

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

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

day11-item-table.html

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

cp day10-pc-admin-layout.html day11-item-table.html

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

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

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
├── day11-item-table.html
└── images/
    └── sample-poster.png

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

day11-item-table.html の <title> を、Day11用に変更します。

修正前

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

修正後

<title>Day 11 作品一覧テーブルを作る</title>

このSTEPでは、ブラウザタブに表示されるタイトルだけ を変更します。

画面に表示されているヘッダー、サイドバー、メインエリア、作品カード部分はまだ触りません。

STEP 3：作品カードを削除する

Day11では、作品カードを 作品一覧テーブル に置き換えます。

まずは、Day10で表示していた作品カード部分を削除します。

削除する部分

day11-item-table.html の中から、以下の作品カード部分を削除してください。

<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 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>

今回のポイント

Day11では作品カードを作り込むのではなく、一覧テーブルに置き換えることが目的です。

まず作品カードを削除して、テーブルを追加するための場所を空けます。

STEP 4：テーブルを置くための白い箱を作る

作品カードを削除して、メインエリアには見出しと補足文だけが残りました。

次は、作品一覧テーブルを入れるための 白い箱 を作ります。

修正前

<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>

修正後

<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 mt-6">
        <!-- 作品一覧テーブル -->
    </div>
</div>

今回追加するclass

class	役割
bg-white	テーブルを置くエリアの背景を白にする
border	白い箱に枠線を付ける
rounded-lg	白い箱の角を丸くする
shadow-sm	白い箱に小さな影を付ける
mt-6	補足文と白い箱の間に余白を付ける

今回のポイント

Day11では、いきなり table を直接置くのではなく、まずテーブルを入れるための白い箱を作ります。

これにより、管理画面のメインエリア内に 作品一覧テーブル用の領域 ができたことが分かりやすくなります。

このSTEPでは、まだ table は作りません。
次のSTEPで、この白い箱の中に table 要素を追加します。

STEP 5：table要素を追加する

テーブルを置くための白い箱ができました。

次は、その中に table 要素を追加します。

修正前

<div class="bg-white border rounded-lg shadow-sm mt-6">
    <!-- 作品一覧テーブル -->
</div>

修正後

<div class="bg-white border rounded-lg shadow-sm mt-6">
    <table>
        <!-- 作品一覧テーブル -->
    </table>
</div>

今回追加するHTML要素

要素	役割
table	表形式のデータを表示するための要素

今回のポイント

Day11では、作品情報を一覧で表示するために table 要素を使います。

このSTEPでは、まだ見出し行やデータ行は作りません。

まずは、白い箱の中に 作品一覧テーブルの土台 を用意します。

白い箱
└── table

STEP 6：テーブルの見出し行を作る

table 要素を追加できたので、次はテーブルの 見出し行 を作ります。

Day11では、作品一覧として最低限分かる項目を並べます。

ID / サムネイル / タイトル / 平均評価 / レビュー数 / 操作

修正前

<div class="bg-white border rounded-lg shadow-sm mt-6">
    <table>
        <!-- 作品一覧テーブル -->
    </table>
</div>

修正後

<div class="bg-white border rounded-lg shadow-sm mt-6">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>サムネイル</th>
                <th>タイトル</th>
                <th>平均評価</th>
                <th>レビュー数</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>
</div>

今回追加するHTML要素

要素	役割
thead	テーブルの見出し部分を表す
tr	テーブルの1行を表す
th	見出し用のセルを表す

今回のポイント

table は、行とセルを組み合わせて作ります。

今回は見出し行なので、thead の中に tr を作り、その中に th を並べます。

table
└── thead
    └── tr
        ├── th：ID
        ├── th：サムネイル
        ├── th：タイトル
        ├── th：平均評価
        ├── th：レビュー数
        └── th：操作

このSTEPでは、まだTailwind CSSのclassは追加しません。
まずは、テーブルの見出し構造を作ることを優先します。

STEP 7：作品データの行を追加する

テーブルの見出し行を作れたので、次はサンプルの作品データを追加します。

今回は、映画レビューアプリの管理者画面に寄せて、サムネイル付きの作品データを3行追加します。

修正前

<div class="bg-white border rounded-lg shadow-sm mt-6">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>サムネイル</th>
                <th>タイトル</th>
                <th>平均評価</th>
                <th>レビュー数</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>
</div>

修正後

<div class="bg-white border rounded-lg shadow-sm mt-6">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>サムネイル</th>
                <th>タイトル</th>
                <th>平均評価</th>
                <th>レビュー数</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>
                    <img
                        src="images/sample-poster.png"
                        alt="サンプル画像"
                        class="w-16 h-24 object-cover rounded-md"
                    >
                </td>
                <td>サンプル映画タイトル</td>
                <td>4.2</td>
                <td>12件</td>
                <td>
                    詳細 編集 削除
                </td>
            </tr>

            <tr>
                <td>2</td>
                <td>
                    <img
                        src="images/sample-poster.png"
                        alt="サンプル画像"
                        class="w-16 h-24 object-cover rounded-md"
                    >
                </td>
                <td>サンプル映画タイトル2</td>
                <td>3.8</td>
                <td>8件</td>
                <td>
                    詳細 編集 削除
                </td>
            </tr>

            <tr>
                <td>3</td>
                <td>
                    <img
                        src="images/sample-poster.png"
                        alt="サンプル画像"
                        class="w-16 h-24 object-cover rounded-md"
                    >
                </td>
                <td>サンプル映画タイトル3</td>
                <td>4.7</td>
                <td>20件</td>
                <td>
                    詳細 編集 削除
                </td>
            </tr>
        </tbody>
    </table>
</div>

今回追加するHTML要素

要素	役割
tbody	テーブルのデータ部分を表す
td	通常のデータセルを表す
img	サムネイル画像を表示する

今回追加するTailwind CSSのclass

class	役割
w-16	サムネイル画像の幅を固定する
h-24	サムネイル画像の高さを固定する
object-cover	指定したサイズに合わせて画像をトリミングして表示する
rounded-md	サムネイル画像の角を少し丸くする

今回のポイント

thead はテーブルの見出し部分、tbody は実際のデータ部分を表します。

今回は、tbody の中に tr を3行作り、その中に td を並べて作品データを表示します。

また、サムネイル画像には w-16、h-24、object-cover、rounded-md を付けています。

Day11ではテーブル全体の細かい見た目調整は行いませんが、画像にサイズ指定を付けないと元画像の大きさで表示され、テーブルの行が大きく崩れてしまいます。

そのため、今回はサムネイルとして表示するための最低限の指定として、画像サイズとトリミングだけ設定します。

テーブル全体の余白、罫線、見出し行の背景色、操作ボタンの見た目調整は、次回のDay12で扱います。

table
├── thead
│   └── 見出し行
└── tbody
    ├── 作品データ行 1
    ├── 作品データ行 2
    └── 作品データ行 3

1行だけでも構造は確認できますが、複数行にすると一覧テーブルらしさが分かりやすくなります。

また、次回Day12でテーブルの見た目を調整するときも、複数行ある方が、余白・罫線・行間の変化を確認しやすくなります。

このSTEPでは、テーブル全体の余白や罫線の調整はまだ行いません。

ただし、サムネイル画像だけは、元画像の大きさで表示されるとテーブルが大きく崩れるため、最低限のサイズ指定とトリミングを行います。

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 11 作品一覧テーブルを作る</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 mt-6">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>サムネイル</th>
                            <th>タイトル</th>
                            <th>平均評価</th>
                            <th>レビュー数</th>
                            <th>操作</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>
                                <img
                                    src="images/sample-poster.png"
                                    alt="サンプル画像"
                                    class="w-16 h-24 object-cover rounded-md"
                                >
                            </td>
                            <td>サンプル映画タイトル</td>
                            <td>4.2</td>
                            <td>12件</td>
                            <td>
                                詳細 編集 削除
                            </td>
                        </tr>

                        <tr>
                            <td>2</td>
                            <td>
                                <img
                                    src="images/sample-poster.png"
                                    alt="サンプル画像"
                                    class="w-16 h-24 object-cover rounded-md"
                                >
                            </td>
                            <td>サンプル映画タイトル2</td>
                            <td>3.8</td>
                            <td>8件</td>
                            <td>
                                詳細 編集 削除
                            </td>
                        </tr>

                        <tr>
                            <td>3</td>
                            <td>
                                <img
                                    src="images/sample-poster.png"
                                    alt="サンプル画像"
                                    class="w-16 h-24 object-cover rounded-md"
                                >
                            </td>
                            <td>サンプル映画タイトル3</td>
                            <td>4.7</td>
                            <td>20件</td>
                            <td>
                                詳細 編集 削除
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</body>
</html>

使ったHTML要素

要素	内容
table	表形式のデータ全体を表す
thead	テーブルの見出し部分を表す
tbody	テーブルのデータ部分を表す
tr	テーブルの1行を表す
th	見出し用のセルを表す
td	通常のデータセルを表す
img	サムネイル画像を表示する

今回は、Tailwind CSSのclassだけでなく、テーブルを作るためのHTML要素も確認しました。

使ったTailwind CSSのclass

class	役割
bg-white	テーブルを置くエリアの背景を白にする
border	テーブルを置くエリアに枠線を付ける
rounded-lg	テーブルを置くエリアの角を丸くする
shadow-sm	テーブルを置くエリアに小さな影を付ける
mt-6	補足文とテーブルエリアの間に余白を付ける
w-16	サムネイル画像の幅を固定する
h-24	サムネイル画像の高さを固定する
object-cover	指定したサイズに合わせて画像をトリミングして表示する
rounded-md	サムネイル画像の角を少し丸くする

表示確認

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

確認すること

• 右側メインエリアに白い箱が表示されている
• 白い箱の中にテーブルが表示されている
• 見出し行が表示されている
• ID / サムネイル / タイトル / 平均評価 / レビュー数 / 操作 が並んでいる
• 作品データが3行表示されている
• サムネイル画像が表示されている

この時点で気にしなくてよいこと

• テーブルの余白が詰まっている
• 罫線が見づらい
• 見出し行に背景色がない
• 操作ボタンが文字だけになっている

このあたりは、次回の Day12：テーブルの見た目調整 で扱う範囲です。

今日分かったこと

Day11では、Day10で作ったPC管理画面レイアウトのメインエリアに、作品一覧テーブルを追加しました。

まず、Day10で表示していた作品カードを削除し、代わりにテーブルを置くための白い箱を作りました。

bg-white、border、rounded-lg、shadow-sm、mt-6 を使うことで、メインエリア内にテーブル用の表示領域を作れました。

テーブルは、table、thead、tbody、tr、th、td を組み合わせて作ることが分かりました。

thead には見出し行を置き、tbody には実際の作品データを入れることで、テーブルの役割を分けられました。

今回は、ID、サムネイル、タイトル、平均評価、レビュー数、操作の列を作りました。

サムネイル画像には img 要素を使い、w-16、h-24、object-cover、rounded-md を付けました。

最初は画像サイズを指定していなかったため、元画像の大きさで表示され、テーブルの行が大きく崩れてしまいました。

そのため、Day11ではテーブル全体の細かい見た目調整までは行わないものの、サムネイルとして表示するための最低限の画像サイズ指定は必要だと分かりました。

また、1行だけでは一覧テーブルらしさが分かりにくいため、サンプルデータを3行にしました。

複数行にすることで、作品一覧テーブルとしての形が分かりやすくなり、次回のDay12で余白や罫線、見出し行の背景色などを調整しやすくなりました。

Day11では、テーブルの見た目を完成させるのではなく、作品一覧テーブルのHTML構造を作ることができました。

次回やること

【Tailwind CSS入門 Day12】テーブルの見た目を整える

シリーズ記事

• 【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管理画面レイアウトを作る
• 【Tailwind CSS入門 Day11】作品一覧テーブルを作る ← 今回