Tailwind CSSで5分で作るレスポンシブデザイン完全ガイド

Last updated at 2025-05-09Posted at 2025-05-09

🔍 この記事のポイント

CSSフレームワークに悩むフロントエンド初心者がTailwind CSSと出会い、わずか5分でレスポンシブデザインを実装できるようになった実体験をご紹介します。従来のCSSと比較して作業時間が80%削減され、デザインの統一性も向上。コード例と実装手順を具体的に解説するので、すぐに実践できます。

「レスポンシブデザインって、なんでこんなに面倒くさいんだ...」

先月までの私は、新しいプロジェクトを始めるたびにこのフレーズを何度もつぶやいていました。メディアクエリの書き方を毎回調べ、スマートフォン・タブレット・PCと画面サイズごとにCSSを書き直す作業に辟易していたんです。

そんな時、同僚に勧められたのがTailwind CSSでした。最初は「また新しいフレームワークか...」と思ったものの、試してみたら驚くほど簡単に、そしてわずか5分でレスポンシブデザインが実装できたのです。

今回はそんな「Tailwind CSS」を使ったレスポンシブデザインの実装方法を、初心者の方にもわかりやすく解説します。

1. Tailwind CSSとは？なぜ今注目されているのか

Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。Bootstrap等の他のフレームワークと違い、あらかじめ用意されたコンポーネントではなく、ユーティリティクラスを組み合わせて自由にデザインできるのが特徴です。

従来のCSSとの違い:

/* 従来のCSS */
.button {
  background-color: #3490dc;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  color: white;
  font-weight: bold;
}

@media (min-width: 768px) {
  .button {
    padding: 1rem 2rem;
  }
}

<!-- Tailwind CSS -->
<button class="bg-blue-500 px-4 py-2 md:px-8 md:py-4 rounded text-white font-bold">
  ボタン
</button>

見ての通り、Tailwind CSSではHTMLの中にクラス名を直接書くことで、わざわざCSSファイルを行き来する必要がなくなりました。そして、md:というプレフィックスを使うだけで、簡単にレスポンシブ対応が可能になるんです。

2. 環境構築：たった5分で始められる

環境構築も非常に簡単です。以下のステップで進めましょう。

2.1 新規プロジェクトの場合

# 1. npmでプロジェクトを初期化
npm init -y

# 2. Tailwind CSSと必要なパッケージをインストール
npm install -D tailwindcss postcss autoprefixer

# 3. Tailwind CSS設定ファイルを生成
npx tailwindcss init -p

2.2 tailwind.config.jsの設定

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{html,js}"],  // HTMLとJSファイルを対象にする
  theme: {
    extend: {},
  },
  plugins: [],
}

2.3 スタイルシートの作成

src/input.css（任意の名前でOK）を作成し、以下の内容を記述します。

@tailwind base;
@tailwind components;
@tailwind utilities;

2.4 ビルドコマンドを設定

package.jsonに以下のスクリプトを追加します。

"scripts": {
  "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}

2.5 ビルドを実行

npm run build

2.6 HTMLファイルにスタイルシートを読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./dist/output.css" rel="stylesheet">
  <title>Tailwind CSS レスポンシブデザイン</title>
</head>
<body>
  <!-- ここにコンテンツを記述 -->
</body>
</html>

たったこれだけで、Tailwind CSSの環境構築は完了です！実際、私は最初この手軽さに驚きました。

3. レスポンシブデザインの基本：ブレイクポイントのマスター

Tailwind CSSでは、以下のブレイクポイントがデフォルトで用意されています：

sm: 640px以上
md: 768px以上
lg: 1024px以上
xl: 1280px以上
2xl: 1536px以上

これらのプレフィックスを使うと、特定の画面サイズでのみ適用されるスタイルを簡単に設定できます。

<div class="text-sm md:text-base lg:text-lg">
  画面サイズに応じてフォントサイズが変わります
</div>

👆 このコードは以下のように解釈されます：

デフォルト（モバイル）: 小さいテキスト（text-sm）
768px以上（md）: 基本サイズのテキスト（text-base）
1024px以上（lg）: 大きいテキスト（text-lg）

私はこの直感的な書き方に感動しました。従来のCSSのように「メディアクエリ内に全てのスタイルを書く」のではなく、「各要素に対してブレイクポイントごとの振る舞いを定義する」という発想の転換が、コードの可読性と保守性を大きく向上させたのです。

4. 実践：5分で作るレスポンシブナビゲーションメニュー

それでは、実際にレスポンシブ対応のナビゲーションメニューを作ってみましょう。PCではヘッダーメニュー、モバイルではハンバーガーメニューに切り替わる、よくあるパターンです。

4.1 HTMLの作成

<nav class="bg-gray-800 p-4">
  <div class="max-w-6xl mx-auto flex justify-between items-center">
    <!-- ロゴ -->
    <div class="text-white font-bold text-xl">MyWebsite</div>
    
    <!-- PCメニュー（モバイルでは非表示） -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-300">ホーム</a>
      <a href="#" class="text-white hover:text-gray-300">特徴</a>
      <a href="#" class="text-white hover:text-gray-300">料金</a>
      <a href="#" class="text-white hover:text-gray-300">お問い合わせ</a>
    </div>
    
    <!-- ハンバーガーメニューボタン（PCでは非表示） -->
    <button class="md:hidden text-white" id="menu-button">
      <svg xmlns="http://www.w3.org/2000/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 18h16" />
      </svg>
    </button>
  </div>
  
  <!-- モバイルメニュー（初期状態では非表示） -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block text-white hover:bg-gray-700 p-2 rounded">ホーム</a>
      <a href="#" class="block text-white hover:bg-gray-700 p-2 rounded">特徴</a>
      <a href="#" class="block text-white hover:bg-gray-700 p-2 rounded">料金</a>
      <a href="#" class="block text-white hover:bg-gray-700 p-2 rounded">お問い合わせ</a>
    </div>
  </div>
</nav>

4.2 JavaScriptの追加（ハンバーガーメニューの動作用）

document.addEventListener('DOMContentLoaded', function() {
  const menuButton = document.getElementById('menu-button');
  const mobileMenu = document.getElementById('mobile-menu');
  
  menuButton.addEventListener('click', function() {
    mobileMenu.classList.toggle('hidden');
  });
});

4.3 実行結果

実際のブラウザで表示すると、以下のような動作になります：

PCサイズ（768px以上）: ヘッダーにメニュー項目が横並びで表示され、ハンバーガーボタンは表示されません。
モバイルサイズ（768px未満）: メニュー項目は非表示になり、代わりにハンバーガーボタンが表示されます。ボタンをクリックするとメニュー項目が縦並びで表示されます。

ポイント解説：

hidden md:flex: モバイルでは非表示(hidden)、md以上のサイズでは表示して横並び(flex)にする
md:hidden: md以上のサイズでは非表示にする（ハンバーガーボタンやモバイルメニュー用）
JavaScriptはメニュー開閉のトグル処理のみ

5. 実践：レスポンシブなカードレイアウト

続いて、レスポンシブ対応のカードレイアウトを作成してみましょう。モバイルでは1列、タブレットでは2列、PCでは3列になるグリッドレイアウトです。

<div class="container mx-auto px-4 py-8">
  <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-8 text-center">人気の商品</h1>
  
  <!-- カードグリッド -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    
    <!-- カード1 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <img src="https://via.placeholder.com/400x200" alt="商品画像" class="w-full h-40 object-cover">
      <div class="p-4">
        <h2 class="font-bold text-xl mb-2">商品タイトル1</h2>
        <p class="text-gray-700 mb-4">この商品の説明文がここに入ります。機能や特徴について詳しく書かれています。</p>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-full md:w-auto">
          詳細を見る
        </button>
      </div>
    </div>
    
    <!-- カード2 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <img src="https://via.placeholder.com/400x200" alt="商品画像" class="w-full h-40 object-cover">
      <div class="p-4">
        <h2 class="font-bold text-xl mb-2">商品タイトル2</h2>
        <p class="text-gray-700 mb-4">この商品の説明文がここに入ります。機能や特徴について詳しく書かれています。</p>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-full md:w-auto">
          詳細を見る
        </button>
      </div>
    </div>
    
    <!-- カード3 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <img src="https://via.placeholder.com/400x200" alt="商品画像" class="w-full h-40 object-cover">
      <div class="p-4">
        <h2 class="font-bold text-xl mb-2">商品タイトル3</h2>
        <p class="text-gray-700 mb-4">この商品の説明文がここに入ります。機能や特徴について詳しく書かれています。</p>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-full md:w-auto">
          詳細を見る
        </button>
      </div>
    </div>
    
    <!-- カード4 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <img src="https://via.placeholder.com/400x200" alt="商品画像" class="w-full h-40 object-cover">
      <div class="p-4">
        <h2 class="font-bold text-xl mb-2">商品タイトル4</h2>
        <p class="text-gray-700 mb-4">この商品の説明文がここに入ります。機能や特徴について詳しく書かれています。</p>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-full md:w-auto">
          詳細を見る
        </button>
      </div>
    </div>
    
    <!-- カード5 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <img src="https://via.placeholder.com/400x200" alt="商品画像" class="w-full h-40 object-cover">
      <div class="p-4">
        <h2 class="font-bold text-xl mb-2">商品タイトル5</h2>
        <p class="text-gray-700 mb-4">この商品の説明文がここに入ります。機能や特徴について詳しく書かれています。</p>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-full md:w-auto">
          詳細を見る
        </button>
      </div>
    </div>
    
    <!-- カード6 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <img src="https://via.placeholder.com/400x200" alt="商品画像" class="w-full h-40 object-cover">
      <div class="p-4">
        <h2 class="font-bold text-xl mb-2">商品タイトル6</h2>
        <p class="text-gray-700 mb-4">この商品の説明文がここに入ります。機能や特徴について詳しく書かれています。</p>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-full md:w-auto">
          詳細を見る
        </button>
      </div>
    </div>
    
  </div>
</div>

実行結果：

モバイル（640px未満）: 1列のグリッドレイアウト、ボタンは幅100%
タブレット（768px以上）: 2列のグリッドレイアウト、ボタンは自動幅
PC（1024px以上）: 3列のグリッドレイアウト

ポイント解説：

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3: グリッドレイアウトの列数を画面サイズによって変更
text-2xl md:text-3xl lg:text-4xl: 見出しのサイズを画面サイズによって変更
w-full md:w-auto: ボタンの幅をモバイルでは100%、タブレット以上では自動に設定

6. レスポンシブデザインのベストプラクティス

Tailwind CSSを使ったレスポンシブデザイン実装で、私が実際に学んだベストプラクティスをご紹介します。

6.1 モバイルファーストで考える

Tailwind CSSはデフォルトでモバイルファーストのアプローチを採用しています。つまり、プレフィックスなしのクラスがモバイル用のスタイルとなり、ブレイクポイントのプレフィックス（md:など）は「そのサイズ以上」の画面に適用されます。

<!-- 良い例：モバイルファースト -->
<div class="text-sm md:text-base lg:text-lg">...</div>

<!-- 避けるべき例：デスクトップファースト -->
<div class="text-lg sm:text-base xs:text-sm">...</div>

6.2 コンポーネントの再利用を意識する

似たようなUIパターンが繰り返し登場する場合は、@applyディレクティブを使ってコンポーネントクラスを作成することも可能です。

/* src/input.css */
@tailwind base;
@tailwind components;

@layer components {
  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
  }
  .btn-primary {
    @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600;
  }
}

@tailwind utilities;

<!-- 使用例 -->
<div class="card">
  <img src="..." alt="..." class="w-full h-40 object-cover">
  <div class="p-4">
    <h2 class="font-bold text-xl mb-2">タイトル</h2>
    <p class="text-gray-700 mb-4">説明文</p>
    <button class="btn-primary w-full md:w-auto">詳細を見る</button>
  </div>
</div>

6.3 カスタムブレイクポイントを設定する

プロジェクトの要件に合わせて、独自のブレイクポイントを設定することも簡単です。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '480px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
}

7. 私が実際に感じたTailwind CSSのメリットとデメリット

メリット：

学習コストの低さ：一般的なCSSプロパティをクラス名として覚えるだけでOK
高速な開発：コードエディタの補完機能を使うことで、驚くほど素早く開発できる
レスポンシブデザインの実装が容易：ブレイクポイントプレフィックスを使うだけで済む
デザインの一貫性：あらかじめ用意されたスケールに従うことで、デザインが統一される
チーム開発での効率化：命名規則に悩む必要がなく、合意形成が容易

デメリット：

HTMLが長くなる：複数のクラスを追加することで、HTMLが長く見づらくなることも
HTMLにスタイルが混在する：従来のCSS分離の考え方とは異なるアプローチ
初見では読みづらい：慣れるまでは、多数のクラス名の羅列が理解しづらい

8. 失敗談：従来のCSSへの固執が生んだ悲劇

Tailwind CSSを導入する前、私は「HTMLとCSSは分離すべき」という考えに固執していました。そのため、チームのフロントエンド開発者から「Tailwind CSSを使ってみよう」と提案された時、強く反対したのです。

「HTMLにスタイルを直接書くなんて、インラインスタイルの二の舞じゃないか」
「メンテナンス性が低下する」
「CSSの基本に反している」

そんな先入観から、従来のCSSでプロジェクトを進めたのですが...結果は惨憺たるものでした。

クラス名の命名規則でチーム内で衝突
CSSの肥大化によるパフォーマンス低下
レスポンシブ対応のためのメディアクエリが複雑化
CSS修正による予期せぬスタイルの崩れ

結局、プロジェクト途中でTailwind CSSへの移行を決断。移行作業に1週間を費やすことになりました。もっと早くTailwind CSSを採用していれば、この苦労は避けられたはずです。

この経験から、「新しい技術は先入観を持たずに試してみることが大切」と学びました。実際に試してみると、Tailwind CSSの利点を肌で感じることができ、今では熱心な支持者になっています。

9. まとめ：Tailwind CSSでレスポンシブデザインを制する

Tailwind CSSは、特にレスポンシブデザインの実装において、従来のCSSと比較して圧倒的な生産性向上をもたらします。

重要ポイント再確認：

モバイルファーストのアプローチでデザインする
ブレイクポイントプレフィックス（sm:, md:, lg:, etc.）を活用する
グリッドレイアウトには grid-cols- クラスを使用する
要素の表示/非表示には hidden と flex/block を組み合わせる
コンポーネントの再利用性を意識する

皆さんもぜひTailwind CSSを試してみてください。わずか5分でレスポンシブデザインが実装できる快適さを、きっと実感できるはずです。

TL;DR

Tailwind CSSはユーティリティファーストのCSSフレームワークで、レスポンシブデザインの実装が驚くほど簡単
環境構築は5分で完了、npm install -D tailwindcss postcss autoprefixerと設定ファイル数個で準備OK
レスポンシブ対応はsm:, md:, lg:などのブレイクポイントプレフィックスを使うだけ
モバイルファーストが基本、プレフィックスなしがモバイル用、プレフィックス付きが「そのサイズ以上」に適用
グリッドレイアウトはgrid-cols-1 md:grid-cols-2 lg:grid-cols-3のように簡単に実装可能
HTMLが長くなる・スタイルが混在するというデメリットはあるが、開発速度と保守性の向上というメリットが大きい

今すぐTailwind CSSを試して、フロントエンド開発の生産性を爆上げしよう！質問やお悩みがあれば、コメント欄でお待ちしています。

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