実践！Tailwind CSS でレイアウトに挑戦（後編）

前編では、Flexbox と Grid を使った基本的なレイアウト方法と、コンポーネント化の考え方について学びました。後編では、より実践的な UI コンポーネントとして、ハンバーガーメニューとカード型 UI の作成方法を解説します。これらのコンポーネントは、実際の Web サイトでよく使われるものですので、Tailwind CSS での構築方法を学ぶことで、実践的なスキルを身につけることができます。

4. ハンバーガーメニューを作ってみよう

ハンバーガーメニューは、特にモバイルデバイスでよく使われるナビゲーションメニューです。通常はアイコン（3 本の水平線で構成されることが多い）として表示され、クリックするとメニューが開閉します。

Tailwind CSS と少しの JavaScript を使って、シンプルなハンバーガーメニューを作成してみましょう。

1. HTML の作成

まず、HTML でハンバーガーメニューの骨格を作成します。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Practice</title>
    <link rel="stylesheet" href="./dist/output.css">
</head>
<body>
    <nav class="bg-gray-800 p-4">
        <div class="container mx-auto flex justify-between items-center">
            <a href="#" class="text-white font-bold text-xl">My Site</a>
            <button id="hamburger-btn" class="text-white focus:outline-none">
                <!-- ハンバーガーアイコン -->
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m4 6h-16" />
                </svg>
            </button>
            <div id="nav-menu" class="hidden md:flex space-x-4">
                <a href="#" class="text-white hover:text-gray-300">メニュー1</a>
                <a href="#" class="text-white hover:text-gray-300">メニュー2</a>
                <a href="#" class="text-white hover:text-gray-300">メニュー3</a>
            </div>
        </div>
    </nav>

    <script src="script.js"></script>
</body>
</html>

nav: ナビゲーションバー全体を囲む要素です。bg-gray-800 と p-4 クラスで、背景色とパディングを設定しています。
container mx-auto: コンテンツを中央揃えにするためのコンテナです。
flex justify-between items-center: ロゴとメニューを左右に分けて配置し、垂直方向には中央揃えにしています。
button#hamburger-btn: ハンバーガーメニューのボタンです。focus:outline-none で、フォーカス時の枠線を消しています。
svg: ハンバーガーアイコンの SVG です。
div#nav-menu: メニュー項目を格納する div です。hidden クラスで最初は非表示にし、md:flex で画面幅が 768px 以上の場合は Flexbox で横並びにしています。space-x-4 でメニュー項目間にスペースを設けています。

2. JavaScript の作成

次に、JavaScript（script.js）でハンバーガーメニューの開閉機能を実装します。

javascript

// script.js
const hamburgerBtn = document.getElementById('hamburger-btn');
const navMenu = document.getElementById('nav-menu');

hamburgerBtn.addEventListener('click', () => {
  navMenu.classList.toggle('hidden');
});

このコードでは、hamburger-btn をクリックしたときに、nav-menu の hidden クラスを付け外ししています。これにより、メニューの表示・非表示を切り替えることができます。

3. スタイルの調整

最後に、input.cssにCSSを追加して、ハンバーガーメニューのスタイルを調整します。

css

/* src/input.cssに追加 */
@media (max-width: 767px) {
  #nav-menu {
    display: none;
  }
  #nav-menu.block {
    display: block;
  }
}

ここではメディアクエリを使用して、画面幅が 767px 以下の場合に #nav-menu を非表示にしています。 JavaScript で hidden クラスを block クラスに変更することで、画面幅が 767px 以下の場合でもメニューを表示できます。

これで、シンプルなハンバーガーメニューが完成しました。画面幅が 768px 未満の場合はハンバーガーアイコンが表示され、クリックするとメニューが開閉します。画面幅が 768px 以上の場合は、常にメニューが表示されます。

5. カード型 UI を作ってみよう

カード型 UI は、情報を視覚的に分かりやすく整理して表示するための UI コンポーネントです。Tailwind CSS を使って、シンプルなカード型 UI を作成してみましょう。

1. HTML の作成

まず、HTML でカードの骨格を作成します。

html

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="https://via.placeholder.com/300x200" alt="カード画像">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">カードタイトル</div>
    <p class="text-gray-700 text-base">
      カードの内容が入ります。ここに説明文などを記述します。
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">タグ1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">タグ2</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">タグ3</span>
  </div>
</div>

max-w-sm: カードの最大幅を 24rem に設定しています。
rounded: カードの角を少し丸くしています。
overflow-hidden: 画像がカードの枠からはみ出さないようにしています。
shadow-lg: カードに影をつけています。
img: カードの画像です。w-full で、幅をカードいっぱいに広げています。
px-6 py-4: カードの本文部分に、左右 1.5rem、上下 1rem のパディングを設定しています。
font-bold text-xl mb-2: カードのタイトルに、太字、大きめの文字サイズ、下マージンを設定しています。
text-gray-700 text-base: カードの説明文に、灰色の文字色と標準の文字サイズを設定しています。
inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2: タグにスタイルを適用しています。

2. 複数のカードを並べる

複数のカードを並べる場合は、Flexbox や Grid を使うと便利です。

html

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="max-w-sm rounded overflow-hidden shadow-lg">
    </div>
  <div class="max-w-sm rounded overflow-hidden shadow-lg">
    </div>
  <div class="max-w-sm rounded overflow-hidden shadow-lg">
    </div>
</div>

ここでは、grid、grid-cols-1、md:grid-cols-2、lg:grid-cols-3、gap-6 を使って、画面幅に応じてカードの列数を変え、カード間に 1.5rem のスペースを設けています。

これで、シンプルなカード型 UI が完成しました。