【Tailwind CSS入門 Day15】ハンバーガーメニューを作る

Posted at 2026-05-24

はじめに
今日作るもの
STEP 1：Day15用HTMLファイルを作る
STEP 2：タイトルをDay15用に直す
STEP 3：ヘッダーにハンバーガーボタンを追加する
STEP 4：x-dataでメニューの開閉状態を用意する
STEP 5：クリックでメニューを開閉する
STEP 6：スマホ用メニューを右側から表示する
STEP 7：閉じるボタンとメニューの見た目を整える
STEP 8：PC用サイドバーとスマホ用メニューを切り替える
STEP 9：Day14の動作確認エリアを削除する
完成コード
今回追加したもの
使ったTailwind CSSのclass
表示確認
今日分かったこと
次回やること
シリーズ記事

はじめに

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

今日作るもの

Day15では、Day14で学んだAlpine.jsを使って、スマホ用のハンバーガーメニューを作ります。

スマホ表示では、ボタンを押すと右側からナビゲーションメニューが表示されるようにします。

PC表示では、これまで通りサイドバーを表示し、スマホ表示ではハンバーガーメニューに切り替えます。

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

Day15では、Day14で学んだ Alpine.js の表示切り替えを使って、スマホ用のハンバーガーメニューを作ります。

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

cp day14-alpine-basic.html day15-hamburger-menu.html

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

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

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
├── day14-alpine-basic.html
├── day15-hamburger-menu.html
└── images/
    └── sample-poster.png

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

day15-hamburger-menu.html の <title> を、Day15用に変更します。

修正前

<title>Day 14 Alpine.jsの基礎を学ぶ</title>

修正後

<title>Day 15 ハンバーガーメニューを作る</title>

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

画面に表示されているヘッダー、サイドバー、メインエリア、テーブル、スマホ用カード、Alpine.js動作確認エリアはまだ触りません。

STEP 3：ヘッダーにハンバーガーボタンを追加する

次に、スマホ表示用のハンバーガーボタンをヘッダーに追加します。

Day15では、スマホ幅でこのボタンを押したときに、右側からメニューを表示する流れにします。

修正前

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

修正後

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

    <div class="flex items-center gap-4">
        <p class="text-sm hidden md:block">
            管理者：遅咲きエンジニア
        </p>

        <!-- ハンバーガーメニュー -->
        <button
            class="md:hidden text-2xl"
        >
            ☰
        </button>
    </div>
</header>

補足：ハンバーガーメニュー記号の入力について

ハンバーガーメニューの ☰ は、そのままコピーして使っても大丈夫です。

キーボードから毎回入力しづらい場合は、IMEの辞書登録を使うと便利です。

例えば、以下のように登録しておくと入力しやすくなります。

読み：はんばーがー
単語：☰

また、HTMLエンティティで書くこともできます。

&#9776;

以下のように書くと、ブラウザでは ☰ と表示されます。

<button class="md:hidden text-2xl">
    &#9776;
</button>

今回は、HTML上で分かりやすいように ☰ を直接書いて進めます。

今回追加するclass

class	内容
`gap-4`	管理者表示とボタンの間隔を空ける
`hidden`	スマホ幅では管理者表示を非表示にする
`md:block`	画面幅768px以上では管理者表示を表示する
`md:hidden`	画面幅768px以上ではハンバーガーボタンを非表示にする
`text-2xl`	ハンバーガーボタンの文字サイズを大きくする

今回のポイント

スマホ幅では、ヘッダーの横幅が限られるため、管理者表示を非表示にして、ハンバーガーボタンを表示します。

スマホ幅：ハンバーガーボタンを表示
768px以上：管理者表示を表示

このSTEPでは、まだボタンを押しても何も起きません。

STEP 4：x-dataでメニューの開閉状態を用意する

STEP3では、ヘッダーにハンバーガーボタンを追加しました。

次は、Alpine.jsで メニューが開いているかどうか を管理する状態を用意します。

今回は、menuOpen という状態を使います。

修正前

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

修正後

<body
    x-data="{ menuOpen: false }"
    class="bg-gray-100"
>
    <header class="bg-gray-900 text-white px-6 py-4 flex justify-between items-center">

今回追加するもの

追加するもの	内容
`x-data`	Alpine.jsで使う状態を用意する
`menuOpen: false`	最初はメニューを閉じた状態にする

今回のポイント

x-data は、Alpine.jsで状態を管理したい範囲に付けます。

今回は、ヘッダーのボタンとスマホ用メニューの両方で menuOpen を使いたいので、広めの範囲である body に付けます。

menuOpen: false → メニューを閉じている状態
menuOpen: true  → メニューを開いている状態

このSTEPでは、まだボタンを押してもメニューは開きません。

STEP 5：クリックでメニューを開閉する

STEP4では、body に x-data="{ menuOpen: false }" を追加して、メニューの開閉状態を用意しました。

次は、ハンバーガーボタンをクリックしたときに、menuOpen の値を切り替えます。

修正前

<!-- ハンバーガーメニュー -->
<button
    class="md:hidden text-2xl"
>
    ☰
</button>

修正後

<!-- ハンバーガーメニュー -->
<button
    @click="menuOpen = !menuOpen"
    class="md:hidden text-2xl"
>
    ☰
</button>

今回追加するもの

追加するもの	内容
`@click`	クリックしたときの処理を書く
`menuOpen = !menuOpen`	`menuOpen` の `true` / `false` を切り替える

今回のポイント

@click="menuOpen = !menuOpen" を付けることで、ボタンをクリックするたびに menuOpen の値が切り替わります。

menuOpen が false のとき → true にする
menuOpen が true のとき → false にする

このSTEPでは、まだ表示するメニュー本体は作っていません。

次のSTEPで、menuOpen が true のときに表示するスマホ用メニューを作ります。

STEP 6：スマホ用メニューを右側から表示する

STEP5では、ハンバーガーボタンをクリックしたときに menuOpen の値を切り替えるようにしました。

次は、menuOpen が true のときに表示するスマホ用メニューを作ります。

追加する場所

header のすぐ下に追加します。

修正前

</header>

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

修正後

</header>

<!-- スマホ用メニュー -->
<div
    x-show="menuOpen"
    class="fixed top-0 right-0 z-40 w-64 h-screen bg-gray-700 text-white p-6 md:hidden"
>
    <p class="font-bold">
        メニュー
    </p>

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

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

今回追加するもの

追加するもの	内容
`x-show="menuOpen"`	`menuOpen` が `true` のときだけ表示する

今回追加するclass

class	内容
`fixed`	画面上に固定表示する
`top-0`	画面上端に配置する
`right-0`	画面右端に配置する
`z-40`	他の要素より前面に表示する
`w-64`	メニューの幅を固定する
`h-screen`	メニューの高さを画面いっぱいにする
`bg-gray-700`	メニュー背景を濃いグレーにする
`p-6`	メニュー内側に余白を付ける

今回のポイント

fixed top-0 right-0 を使うことで、スマホ用メニューを画面右側に固定できます。

z-40 を付けることで、他の要素より前面に表示されます。

menuOpen: false → スマホ用メニューを非表示
menuOpen: true  → スマホ用メニューを表示

このSTEPでは、まず右側にメニューを表示するところまで進めます。
背景の重なりや閉じるボタンは次のSTEPで整えます。

STEP 7：閉じるボタンとメニューの見た目を整える

STEP6では、menuOpen が true のときに、右側へスマホ用メニューを表示できるようにしました。

次は、メニュー内に 閉じるボタン を追加して、見た目も少し整えます。

修正前

<!-- スマホ用メニュー -->
<div
    x-show="menuOpen"
    class="fixed top-0 right-0 z-40 w-64 h-screen bg-gray-700 text-white p-6 md:hidden"
>
    <p class="font-bold">
        メニュー
    </p>

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

修正後

<!-- スマホ用メニュー -->
<div
    x-show="menuOpen"
    class="fixed top-0 right-0 z-40 w-64 h-screen bg-gray-700 text-white p-6 md:hidden shadow-lg"
>
    <div class="flex justify-between items-center">
        <p class="font-bold">
            メニュー
        </p>

        <button
            @click="menuOpen = false"
            class="text-2xl"
        >
            ×
        </button>
    </div>

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

今回追加するもの

追加するもの	内容
`@click="menuOpen = false"`	閉じるボタンを押したときにメニューを閉じる

今回追加するclass

class	内容
`shadow-lg`	メニューに影を付けて前面に出ているように見せる
`justify-between`	メニュー見出しと閉じるボタンを左右に配置する
`text-2xl`	閉じるボタンの文字サイズを大きくする

今回のポイント

@click="menuOpen = false" を付けることで、閉じるボタンを押したときにメニューを閉じられます。

menuOpen: true
↓
閉じるボタンを押す
↓
menuOpen: false
↓
メニューが非表示になる

右側メニューは fixed と z-40 で前面に表示しているため、shadow-lg を付けると重なって表示されていることが分かりやすくなります。

STEP 8：PC用サイドバーとスマホ用メニューを切り替える

STEP7までで、スマホ用メニューを右側から表示できるようになりました。

ただし、今のままだとスマホ幅でもサイドバーが表示されたままです。

そこで、サイドバーを 768px以上のPC幅だけ表示 するように変更します。

修正前

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

修正後

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

今回変更するclass

class	内容
`hidden`	スマホ幅ではサイドバーを非表示にする
`md:block`	画面幅768px以上ではサイドバーを表示する

削除するclass

class	理由
`w-full`	スマホ幅ではサイドバーを表示しないため不要

今回のポイント

スマホ幅では、右側から出るハンバーガーメニューを使うため、通常のサイドバーは非表示にします。

スマホ幅：サイドバー非表示、ハンバーガーメニューを使用
768px以上：サイドバー表示、ハンバーガーボタン非表示

これで、スマホ表示ではメニューが重ならず、PC表示ではこれまで通り左サイドバーを使えるようになります。

STEP 9：Day14の動作確認エリアを削除する

Day15では、ハンバーガーメニューの実装が目的です。

Day14で作った Alpine.js の動作確認エリアは、表示・非表示の基本を確認するためのサンプルでした。

今回は、ハンバーガーメニュー本体に x-data、@click、x-show を使えるようになったので、Day14の確認用エリアは削除します。

削除する部分

<!-- Alpine.js動作確認エリア -->
<div
    x-data="{ open: false }"
    class="mt-6 bg-white border rounded-lg shadow-sm p-4"
>
    <p class="font-bold">
        Alpine.jsの動作確認
    </p>

    <button
        @click="open = !open"
        class="mt-3 px-3 py-1.5 text-sm border border-blue-500 text-blue-600 rounded hover:bg-blue-100"
    >
        表示を切り替える
    </button>

    <p
        x-show="open"
        class="mt-3 text-sm text-gray-700 bg-blue-50 border border-blue-200 rounded p-3"
    >
        ボタンをクリックすると、このメッセージの表示・非表示が切り替わります。
    </p>
</div>

今回のポイント

Day14では、Alpine.jsの基本を確認するために小さなサンプルを作りました。

Day15では、その考え方をハンバーガーメニューに使います。

そのため、確認用サンプルは削除し、画面を管理画面UIとして自然な状態に戻します。

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 15 ハンバーガーメニューを作る</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body
    x-data="{ menuOpen: false }"
    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>

        <div class="flex items-center gap-4">
            <p class="text-sm hidden md:block">
                管理者：遅咲きエンジニア
            </p>

            <!-- ハンバーガーメニュー -->
            <button
                @click="menuOpen = !menuOpen"
                class="md:hidden text-2xl"
            >
                ☰
            </button>
        </div>
    </header>

    <!-- スマホ用メニュー -->
    <div
        x-show="menuOpen"
        class="fixed top-0 right-0 z-40 w-64 h-screen bg-gray-700 text-white p-6 md:hidden shadow-lg"
    >
        <div class="flex justify-between items-center">
            <p class="font-bold">
                メニュー
            </p>

            <button
                @click="menuOpen = false"
                class="text-2xl"
            >
                ×
            </button>
        </div>

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

    <main class="flex flex-col md:flex-row items-start">
        <aside class="hidden md:block 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>

今回追加したもの

追加したもの	内容
`x-data="{ menuOpen: false }"`	ハンバーガーメニューの開閉状態を用意する
`menuOpen: false`	初期状態ではメニューを閉じておく
`@click="menuOpen = !menuOpen"`	ハンバーガーボタンを押すたびに開閉状態を切り替える
`x-show="menuOpen"`	`menuOpen` が `true` のときだけスマホ用メニューを表示する
`@click="menuOpen = false"`	閉じるボタンを押したときにメニューを閉じる
`☰`	ハンバーガーメニューのボタンとして表示する記号
`×`	スマホ用メニューを閉じるボタンとして表示する記号

使ったTailwind CSSのclass

class	内容
`hidden`	要素を非表示にする
`md:block`	画面幅768px以上で要素を表示する
`md:hidden`	画面幅768px以上で要素を非表示にする
`text-2xl`	ハンバーガーボタンや閉じるボタンの文字を大きくする
`fixed`	スマホ用メニューを画面上に固定する
`top-0`	スマホ用メニューを画面上端に配置する
`right-0`	スマホ用メニューを画面右端に配置する
`z-40`	スマホ用メニューを前面に表示する
`w-64`	スマホ用メニューの幅を固定する
`h-screen`	スマホ用メニューの高さを画面いっぱいにする
`bg-gray-700`	スマホ用メニューの背景を濃いグレーにする
`text-white`	メニュー内の文字を白色にする
`p-6`	スマホ用メニューの内側に余白を付ける
`shadow-lg`	スマホ用メニューに影を付ける
`justify-between`	メニュー見出しと閉じるボタンを左右に配置する
`items-center`	要素を縦方向の中央に揃える
`gap-4`	管理者表示とハンバーガーボタンの間隔を空ける
`space-y-3`	メニュー項目同士の上下間隔を空ける
`hover:bg-gray-600`	メニュー項目にマウスを乗せたとき背景色を変える

表示確認

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

スマホ幅では、ヘッダー右側にハンバーガーボタンが表示されている
スマホ幅では、通常のサイドバーが非表示になっている
ハンバーガーボタンをクリックすると、右側からスマホ用メニューが表示される
スマホ用メニュー内の「×」ボタンをクリックすると、メニューが閉じる
スマホ用メニューが前面に表示され、他の要素より上に重なっている
PC幅では、ハンバーガーボタンが非表示になっている
PC幅では、これまで通り左サイドバーが表示されている

スマホ表示：メニューを閉じた状態

スマホ表示：メニューを開いた状態

PC表示

今日分かったこと

Day15では、Alpine.jsを使ってスマホ用のハンバーガーメニューを作りました。

x-data で menuOpen という状態を用意し、@click で true / false を切り替えることで、メニューの開閉を管理できました。

x-show="menuOpen" を使うことで、menuOpen が true のときだけスマホ用メニューを表示できました。

スマホ用メニューは、fixed、top-0、right-0、z-40 を使うことで、画面右側に前面表示できました。

また、スマホ幅ではサイドバーを非表示にし、PC幅ではサイドバーを表示することで、画面幅に合わせたメニュー表示に切り替えられました。

Day15では、レスポンシブ対応とAlpine.jsを組み合わせることで、実際のスマホサイトに近いメニューUIを作れることが分かりました。

次回やること

【Tailwind CSS入門 Day16】詳細モーダルを作る

シリーズ記事

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【Tailwind CSS入門 Day15】ハンバーガーメニューを作る

目次

はじめに

今日作るもの

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

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

修正前

修正後

STEP 3：ヘッダーにハンバーガーボタンを追加する

修正前

修正後

補足：ハンバーガーメニュー記号の入力について

今回追加するclass

今回のポイント

STEP 4：x-dataでメニューの開閉状態を用意する

修正前

修正後

今回追加するもの

今回のポイント

STEP 5：クリックでメニューを開閉する

修正前

修正後

今回追加するもの

今回のポイント

STEP 6：スマホ用メニューを右側から表示する

追加する場所

修正前

修正後

今回追加するもの

今回追加するclass

今回のポイント

STEP 7：閉じるボタンとメニューの見た目を整える

修正前

修正後

今回追加するもの

今回追加するclass

今回のポイント

STEP 8：PC用サイドバーとスマホ用メニューを切り替える

修正前

修正後

今回変更するclass

削除するclass

今回のポイント

STEP 9：Day14の動作確認エリアを削除する

削除する部分

今回のポイント

完成コード

今回追加したもの

使ったTailwind CSSのclass

表示確認

スマホ表示：メニューを閉じた状態

スマホ表示：メニューを開いた状態

PC表示

今日分かったこと

次回やること

シリーズ記事