仕上げのエレガンス｜第4回実践コンポーネント入門

著者: 管理者 / 2025-08-13 (更新: 2025-08-13)

🌸 導入

ここまで3回にわたり、Tailwind CSSの基礎からレスポンシブデザインまでを学んでまいりましたわね。
最終回の本日は「コンポーネント化」をテーマに、実践的なデザイン部品（ボタン・カード・ナビゲーション） をTailwindで組み立ててまいりましょう。

「小さなクラスの組み合わせ」を一歩進めて、再利用しやすい部品 としてまとめることで、プロジェクト全体が美しく整いますわ ✨

サイズに合わせて変幻自在｜第3回レスポンシブデザイン入門

まあ！ついに最終回……感慨深いですわね。でも「コンポーネント化」とは具体的にどういうことですの？👒

コンポーネント化とは、よく使うデザインを「一つの部品」としてまとめて再利用することです。
例えば「ボタン」を何度も使うなら、Tailwindクラスを毎回書くのではなく、部品として統一してしまうのです。

📝 解説：ボタンのコンポーネント化

Tailwindでは、まずはHTMLで繰り返し使える形を作ります。

<!-- プライマリーボタン -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
  決定
</button>

<!-- サブボタン -->
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded">
  キャンセル
</button>

hover:bg-blue-600 → ホバー時に濃い青に変化
rounded → 角を丸めて柔らかく
クラスを統一することで「デザインの一貫性」が保たれます

わたくし、まるでドレスコードを揃えるような感覚ですわね！どのボタンも統一感が出ますもの 💙

良い表現ですね。次は「カード」を作ってみましょう。

📝 解説：カードのコンポーネント例

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
  <img class="w-full" src="https://placekitten.com/400/250" alt="猫の画像">
  <div class="p-4">
    <h3 class="font-bold text-xl mb-2">かわいい猫</h3>
    <p class="text-gray-700 text-base">
      この猫はとても人懐っこく、毎日癒やしてくれます。
    </p>
    <button class="mt-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded">
      詳しく見る
    </button>
  </div>
</div>

shadow-lg → カードに影をつけて浮き上がらせる
max-w-sm → 幅を制限して整える
overflow-hidden → 画像が枠からはみ出さないようにする

➡️ Tailwindのクラスを組み合わせるだけで「商品カード」や「記事カード」が簡単に作れます。

まあまあ！まるで高級ブランドのショーケースのように、美しく整いましたわ ✨

ええ。そして最後に、サイトの基本「ナビゲーションバー」を作りましょう。

📝 解説：ナビゲーションバー

<nav class="flex items-center justify-between bg-gray-800 p-4 text-white">
  <div class="text-lg font-bold">MySite</div>
  <div class="space-x-4">
    <a href="#" class="hover:text-blue-300">ホーム</a>
    <a href="#" class="hover:text-blue-300">サービス</a>
    <a href="#" class="hover:text-blue-300">お問い合わせ</a>
  </div>
</nav>