【Tailwind CSS入門 Day13】レスポンシブ表示に切り替える

目次

• はじめに
• 今日作るもの
• STEP 1：Day13用HTMLファイルを作る
• STEP 2：タイトルをDay13用に直す
• STEP 3：スマホ表示でレイアウトが崩れる状態を確認する
• STEP 4：mainをスマホでは縦並び、PCでは横並びにする
• STEP 5：サイドバーの幅と高さをレスポンシブ対応する
• STEP 6：PC用テーブルをmd以上だけ表示する
• STEP 7：スマホ用カード一覧を追加する
• STEP 8：スマホ用カードをmd未満だけ表示する
• 完成コード
• 使ったTailwind CSSのclass
• 削除したTailwind CSSのclass
• 表示確認
• 今日分かったこと
• 次回やること
• シリーズ記事

はじめに

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

今日作るもの

Day13では、Day12で作った作品一覧テーブルをレスポンシブ対応します。

PCではテーブルを表示し、スマホではカード形式の一覧に切り替えます。

Tailwind CSSの md:、hidden、block を使って、画面幅によって表示を変える方法を学びます。

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

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

cp day12-table-style.html day13-responsive-layout.html

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

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

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
├── day12-table-style.html
├── day13-responsive-layout.html
└── images/
    └── sample-poster.png

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

day13-responsive-layout.html の <title> を、Day13用に変更します。

修正前

<title>Day 12 テーブルの見た目を整える</title>

修正後

<title>Day 13 レスポンシブ表示に切り替える</title>

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

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

STEP 3：スマホ表示でレイアウトが崩れる状態を確認する

Day13では、いきなり修正せず、まず現在の状態を確認します。

Day12まではPC表示を前提にしていたため、スマホ幅で見ると以下のような問題が出ました。

• サイドバーとメインエリアが横並びのままになる
• テーブルが横幅に収まりにくい
• 文字が縦に折り返されて読みにくい
• 操作ボタンが見づらい

確認方法

ブラウザの開発者ツールを開き、スマホ幅で表示を確認します。

右クリック
→ 検証
→ デバイスツールバーを切り替え
→ スマホ幅で表示確認

今回のポイント

PC用レイアウトのままだと、スマホ幅では表示がかなり見づらくなることが分かりました。

次のSTEPから、Tailwind CSSのレスポンシブ指定を使って、画面幅に応じた表示へ切り替えていきます。

STEP 4：mainをスマホでは縦並び、PCでは横並びにする

スマホ表示では、サイドバーとメインエリアが横並びのままだと表示が狭くなります。

そこで、main の並び方を変更します。

• スマホ幅では縦並び
• PC幅では横並び

になるようにします。

修正前

<main class="flex items-start">

修正後

<main class="flex flex-col md:flex-row items-start">

今回追加するclass

class	役割
flex-col	スマホ幅では要素を縦並びにする
md:flex-row	画面幅768px以上では横並びにする

今回のポイント

flex-col を付けると、サイドバーとメインエリアが縦に並びます。

ただし、PC画面ではこれまで通り横並びにしたいので、md:flex-row を追加します。

スマホ幅：flex-col で縦並び
768px以上：md:flex-row で横並び

Tailwind CSSのデフォルト設定では、md: は画面幅が 48rem 以上のときに適用されます。

通常のブラウザ設定では 48rem = 768px なので、md:flex-row は画面幅が約768px以上のときに有効になります。

STEP 5：サイドバーの幅と高さをレスポンシブ対応する

STEP4で、main をスマホ幅では縦並び、768px以上では横並びにしました。

次は、サイドバーの幅と高さを画面幅に合わせて調整します。

今のサイドバーは、常に w-48 と min-h-screen が付いています。

スマホ幅では、サイドバーが横幅いっぱいになった方が自然です。
また、スマホ幅で min-h-screen のままだと、サイドバーだけで画面の高さを大きく使ってしまいます。

そのため、以下のように変更します。

• スマホ幅では横幅いっぱい
• 768px以上ではこれまで通り幅固定
• スマホ幅では高さを中身に合わせる

修正前

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

修正後

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

今回追加・変更するclass

class	役割
w-full	スマホ幅ではサイドバーを横幅いっぱいにする
md:w-48	画面幅768px以上ではサイドバーの幅を固定する
md:min-h-screen	画面幅768px以上ではサイドバーの最小高さを画面の高さにする

今回削除するclass

class	理由
w-48	スマホ幅でも幅固定になってしまうため
min-h-screen	スマホ幅でも画面の高さまで伸びてしまうため

今回のポイント

w-full を付けることで、スマホ幅ではサイドバーが横幅いっぱいに表示されます。

一方で、PC幅ではこれまで通り左側の固定幅サイドバーにしたいので、md:w-48 を使います。

スマホ幅：w-full
768px以上：md:w-48

また、min-h-screen をそのまま付けると、スマホ幅でもサイドバーが画面の高さまで伸びてしまいます。

そのため、md:min-h-screen に変更して、画面幅768px以上のときだけ高さを画面いっぱいにします。

スマホ幅：中身の高さ
768px以上：md:min-h-screen

STEP 6：PC用テーブルをmd以上だけ表示する

STEP5までで、スマホ幅ではサイドバーとメインエリアが縦並びになる土台を作りました。

次は、Day12で作った PC用テーブル を、画面幅768px以上のときだけ表示するようにします。

スマホ幅では、このテーブルをそのまま表示すると横幅が足りなくなるため、後のSTEPでスマホ用カード一覧に切り替えます。

修正前

<div class="bg-white border rounded-lg shadow-sm mt-6">
    <table class="w-full text-sm">
        ...
    </table>
</div>

修正後

<div class="hidden md:block bg-white border rounded-lg shadow-sm mt-6">
    <table class="w-full text-sm">
        ...
    </table>
</div>

今回追加するclass

class	役割
hidden	スマホ幅ではPC用テーブルを非表示にする
md:block	画面幅768px以上ではPC用テーブルを表示する

今回のポイント

hidden を付けると、その要素は非表示になります。

ただし、PC画面ではテーブルを表示したいので、md:block を追加します。

スマホ幅：hidden で非表示
768px以上：md:block で表示

Tailwind CSSでは、通常のclassを先に書き、md: 付きのclassで768px以上の表示を上書きできます。

このSTEPでは、PC用テーブルをスマホ幅で隠すところまで行います。

スマホ幅で表示するカード一覧は、次のSTEPで追加します。

STEP 7：スマホ用カード一覧を追加する

STEP6では、PC用テーブルをスマホ幅で非表示にしました。

次は、スマホ幅で表示するための カード形式の作品一覧 を追加します。

この時点では、まだ表示・非表示の切り替えは完全には整えません。
まず、テーブルの下にスマホ用カード一覧を作ります。

追加する場所

PC用テーブルの外側 div の下に追加します。

修正前

<div class="hidden md:block bg-white border rounded-lg shadow-sm mt-6">
    <table class="w-full text-sm">
        <!-- PC用テーブル -->
    </table>
</div>

修正後

<div class="hidden md:block bg-white border rounded-lg shadow-sm mt-6">
    <table class="w-full text-sm">
        <!-- PC用テーブル -->
    </table>
</div>

<div class="mt-6 space-y-4">
    <div class="bg-white border rounded-lg shadow-sm p-4">
        <!-- スマホ用カード -->
        <div class="flex gap-3">
            <img
                src="images/sample-poster.png"
                alt="サンプル画像"
                class="w-16 h-16 object-cover rounded border border-gray-300"
            >

            <div class="flex-1">
                <p class="font-bold">
                    サンプル映画タイトル
                </p>

                <p class="text-sm text-gray-600 mt-1">
                    平均評価：4.2 / レビュー数：12件
                </p>
            </div>
        </div>

        <div class="flex gap-2 mt-3">
            <button class="px-2 py-1 text-xs border border-gray-300 text-gray-700 rounded hover:bg-gray-200">
                詳細
            </button>

            <button class="px-2 py-1 text-xs border border-blue-500 text-blue-600 rounded hover:bg-blue-100">
                編集
            </button>

            <button class="px-2 py-1 text-xs border border-red-500 text-red-600 rounded hover:bg-red-100">
                削除
            </button>
        </div>
    </div>
</div>

今回追加するclass

class	役割
space-y-4	カード同士の上下間隔を空ける
p-4	カード内側に余白を付ける
flex	画像と作品情報を横並びにする
gap-3	画像と作品情報の間隔を空ける
flex-1	作品情報エリアを残り幅いっぱいに広げる
mt-3	操作ボタンの上に余白を付ける

今回のポイント

スマホ幅では、テーブルをそのまま表示すると横幅が足りなくなります。

そこで、スマホ用には1作品ずつカード形式で表示します。

PC表示：テーブル
スマホ表示：カード一覧

今回はまず、スマホ用カード一覧の土台を作ります。

完成コードでは、一覧として分かりやすいように3件分のカードを表示します。

次のSTEPで、md:hidden を使って、スマホ幅だけカード一覧を表示するようにします。

STEP 8：スマホ用カードをmd未満だけ表示する

STEP7では、スマホ用カード一覧を追加しました。

次は、このカード一覧を スマホ幅だけ表示 するようにします。

PC表示ではテーブルを表示したいので、カード一覧は非表示にします。

修正前

<div class="mt-6 space-y-4">
    <div class="bg-white border rounded-lg shadow-sm p-4">
        <!-- スマホ用カード -->
    </div>
</div>

修正後

<div class="md:hidden mt-6 space-y-4">
    <div class="bg-white border rounded-lg shadow-sm p-4">
        <!-- スマホ用カード -->
    </div>
</div>

今回追加するclass

class	役割
md:hidden	画面幅768px以上ではスマホ用カードを非表示にする

今回のポイント

STEP6では、PC用テーブルに hidden md:block を付けました。

<div class="hidden md:block">
    <!-- PC用テーブル -->
</div>

これにより、PC用テーブルは以下の表示になります。

スマホ幅：非表示
768px以上：表示

今回、スマホ用カードには md:hidden を付けます。

<div class="md:hidden">
    <!-- スマホ用カード -->
</div>

これにより、スマホ用カードは以下の表示になります。

スマホ幅：表示
768px以上：非表示

つまり、画面幅によって表示が切り替わります。

スマホ幅：カード一覧
768px以上：テーブル

Day13では、このように hidden、md:block、md:hidden を使って、PC表示とスマホ表示を切り替えます。

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 13 レスポンシブ表示に切り替える</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 flex-col md:flex-row items-start">
        <aside class="w-full md:w-48 bg-gray-600 text-white p-4 md: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="w-full 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="hidden md:block bg-white border rounded-lg shadow-sm mt-6">
                <table class="w-full text-sm">
                    <!-- PC用テーブル -->
                    <thead class="bg-gray-700 text-white">
                        <tr>
                            <th class="px-4 py-2 text-center">ID</th>
                            <th class="px-4 py-2 text-center">サムネイル</th>
                            <th class="px-4 py-2 text-center">タイトル</th>
                            <th class="px-4 py-2 text-center">平均評価</th>
                            <th class="px-4 py-2 text-center">レビュー数</th>
                            <th class="px-4 py-2 text-center">操作</th>
                        </tr>
                    </thead>

                    <tbody>
                        <!-- 作品データ -->
                        <tr class="border-b">
                            <td class="px-4 py-2">1</td>
                            <td class="px-4 py-2">
                                <img
                                    src="images/sample-poster.png"
                                    alt="サンプル画像"
                                    class="w-12 h-12 object-cover rounded border border-gray-300"
                                >
                            </td>
                            <td class="px-4 py-2">サンプル映画タイトル</td>
                            <td class="px-4 py-2">4.2</td>
                            <td class="px-4 py-2">12件</td>
                            <td class="px-4 py-2">
                                <div class="flex gap-2 justify-center">
                                    <button class="px-2 py-1 text-xs border border-gray-300 text-gray-700 rounded hover:bg-gray-200">
                                        詳細
                                    </button>

                                    <button class="px-2 py-1 text-xs border border-blue-500 text-blue-600 rounded hover:bg-blue-100">
                                        編集
                                    </button>

                                    <button class="px-2 py-1 text-xs border border-red-500 text-red-600 rounded hover:bg-red-100">
                                        削除
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="border-b">
                            <td class="px-4 py-2">2</td>
                            <td class="px-4 py-2">
                                <img
                                    src="images/sample-poster.png"
                                    alt="サンプル画像"
                                    class="w-12 h-12 object-cover rounded border border-gray-300"
                                >
                            </td>
                            <td class="px-4 py-2">サンプル映画タイトル2</td>
                            <td class="px-4 py-2">3.8</td>
                            <td class="px-4 py-2">8件</td>
                            <td class="px-4 py-2">
                                <div class="flex gap-2 justify-center">
                                    <button class="px-2 py-1 text-xs border border-gray-300 text-gray-700 rounded hover:bg-gray-200">
                                        詳細
                                    </button>

                                    <button class="px-2 py-1 text-xs border border-blue-500 text-blue-600 rounded hover:bg-blue-100">
                                        編集
                                    </button>

                                    <button class="px-2 py-1 text-xs border border-red-500 text-red-600 rounded hover:bg-red-100">
                                        削除
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="border-b">
                            <td class="px-4 py-2">3</td>
                            <td class="px-4 py-2">
                                <img
                                    src="images/sample-poster.png"
                                    alt="サンプル画像"
                                    class="w-12 h-12 object-cover rounded border border-gray-300"
                                >
                            </td>
                            <td class="px-4 py-2">サンプル映画タイトル3</td>
                            <td class="px-4 py-2">4.7</td>
                            <td class="px-4 py-2">20件</td>
                            <td class="px-4 py-2">
                                <div class="flex gap-2 justify-center">
                                    <button class="px-2 py-1 text-xs border border-gray-300 text-gray-700 rounded hover:bg-gray-200">
                                        詳細
                                    </button>

                                    <button class="px-2 py-1 text-xs border border-blue-500 text-blue-600 rounded hover:bg-blue-100">
                                        編集
                                    </button>

                                    <button class="px-2 py-1 text-xs border border-red-500 text-red-600 rounded hover:bg-red-100">
                                        削除
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="md:hidden mt-6 space-y-4">
                <div class="bg-white border rounded-lg shadow-sm p-4">
                    <!-- スマホ用カード -->
                    <div class="flex gap-3">
                        <img
                            src="images/sample-poster.png"
                            alt="サンプル画像"
                            class="w-16 h-16 object-cover rounded border border-gray-300"
                        >

                        <div class="flex-1">
                            <p class="font-bold">
                                サンプル映画タイトル
                            </p>

                            <p class="text-sm text-gray-600 mt-1">
                                平均評価：4.2 / レビュー数：12件
                            </p>
                        </div>
                    </div>

                    <div class="flex gap-2 mt-3">
                        <button class="px-2 py-1 text-xs border border-gray-300 text-gray-700 rounded hover:bg-gray-200">
                            詳細
                        </button>

                        <button class="px-2 py-1 text-xs border border-blue-500 text-blue-600 rounded hover:bg-blue-100">
                            編集
                        </button>

                        <button class="px-2 py-1 text-xs border border-red-500 text-red-600 rounded hover:bg-red-100">
                            削除
                        </button>
                    </div>
                </div>

                <div class="bg-white border rounded-lg shadow-sm p-4">
                    <!-- スマホ用カード -->
                    <div class="flex gap-3">
                        <img
                            src="images/sample-poster.png"
                            alt="サンプル画像"
                            class="w-16 h-16 object-cover rounded border border-gray-300"
                        >

                        <div class="flex-1">
                            <p class="font-bold">
                                サンプル映画タイトル2
                            </p>

                            <p class="text-sm text-gray-600 mt-1">
                                平均評価：3.8 / レビュー数：8件
                            </p>
                        </div>
                    </div>

                    <div class="flex gap-2 mt-3">
                        <button class="px-2 py-1 text-xs border border-gray-300 text-gray-700 rounded hover:bg-gray-200">
                            詳細
                        </button>

                        <button class="px-2 py-1 text-xs border border-blue-500 text-blue-600 rounded hover:bg-blue-100">
                            編集
                        </button>

                        <button class="px-2 py-1 text-xs border border-red-500 text-red-600 rounded hover:bg-red-100">
                            削除
                        </button>
                    </div>
                </div>

                <div class="bg-white border rounded-lg shadow-sm p-4">
                    <!-- スマホ用カード -->
                    <div class="flex gap-3">
                        <img
                            src="images/sample-poster.png"
                            alt="サンプル画像"
                            class="w-16 h-16 object-cover rounded border border-gray-300"
                        >

                        <div class="flex-1">
                            <p class="font-bold">
                                サンプル映画タイトル3
                            </p>

                            <p class="text-sm text-gray-600 mt-1">
                                平均評価：4.7 / レビュー数：20件
                            </p>
                        </div>
                    </div>

                    <div class="flex gap-2 mt-3">
                        <button class="px-2 py-1 text-xs border border-gray-300 text-gray-700 rounded hover:bg-gray-200">
                            詳細
                        </button>

                        <button class="px-2 py-1 text-xs border border-blue-500 text-blue-600 rounded hover:bg-blue-100">
                            編集
                        </button>

                        <button class="px-2 py-1 text-xs border border-red-500 text-red-600 rounded hover:bg-red-100">
                            削除
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </main>
</body>
</html>

使ったTailwind CSSのclass

class	内容
flex-col	スマホ幅では要素を縦並びにする
md:flex-row	画面幅768px以上では横並びにする
w-full	スマホ幅でサイドバーやメインエリアを横幅いっぱいにする
md:w-48	画面幅768px以上ではサイドバーの幅を固定する
md:min-h-screen	画面幅768px以上ではサイドバーの最小高さを画面の高さにする
hidden	スマホ幅ではPC用テーブルを非表示にする
md:block	画面幅768px以上ではPC用テーブルを表示する
space-y-4	カード同士の上下間隔を空ける
p-4	カード内側に余白を付ける
flex	画像と作品情報を横並びにする
gap-3	画像と作品情報の間隔を空ける
flex-1	作品情報エリアを残り幅いっぱいに広げる
mt-3	操作ボタンの上に余白を付ける
md:hidden	画面幅768px以上ではスマホ用カードを非表示にする

削除したTailwind CSSのclass

class	理由
w-48	スマホ幅でもサイドバーが固定幅になってしまうため
min-h-screen	スマホ幅でもサイドバーが画面の高さまで伸びてしまうため

表示確認

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

• PC幅では、サイドバーとメインエリアが横並びで表示されている
• PC幅では、作品一覧がテーブル形式で表示されている
• スマホ幅では、サイドバーとメインエリアが縦並びで表示されている
• スマホ幅では、作品一覧がカード形式で表示されている
• スマホ幅では、PC用テーブルが非表示になっている
• 画面幅768px以上では、スマホ用カードが非表示になっている

PC表示

スマホ表示

今日分かったこと

Day13では、画面幅に合わせて表示を切り替えるレスポンシブ対応を行いました。

flex-col と md:flex-row を使うことで、スマホ幅では縦並び、768px以上では横並びにできました。

サイドバーは w-full と md:w-48 を使い、スマホ幅では横幅いっぱい、PC幅では固定幅にしました。

また、hidden md:block を使うことでPC用テーブルを768px以上だけ表示し、md:hidden を使うことでスマホ用カードをスマホ幅だけ表示できました。

スマホではテーブルをそのまま表示すると読みにくくなるため、カード形式に切り替えることで見やすくなりました。

レスポンシブ対応では、単に幅を縮めるのではなく、画面幅に合わせて表示方法そのものを変えることが大事だと分かりました。

次回やること

【Tailwind CSS入門 Day14】Alpine.jsの基礎を学ぶ

シリーズ記事

• 【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】作品一覧テーブルを作る
• 【Tailwind CSS入門 Day12】テーブルの見た目を整える
• 【Tailwind CSS入門 Day13】レスポンシブ表示に切り替える ← 今回