TailwindCSS レスポンシブ 入門｜何から始める？定石パターンを解説

TailwindCSS レスポンシブ の書き方が分からない、画面サイズがいろいろあって手が止まる——そんな悩みはありませんか？この記事では、何から始めればいいか、定石パターンを一緒に学びましょう。

「スマホ対応のページを作って」と言われたら、何から始めますか？

私は正直、手が止まってしまいます。

• sm? md? lg? どれを使えばいいの？
• 全部のサイズに対応しないといけないの？
• このUIはどう変えればいいんだろう…

画面サイズの選択肢が多すぎて、どこから手をつければいいか分からない。そんな経験、ありませんか？

---

私の体験談

私はUdemyの講座でTailwindCSSのレスポンシブを学びました。講師の手を見ながら写経して、講座のテーマは意図通りに仕上げられました。

でも、講座を終えた直後から感じていました——本質を押さえていないと。

そして、実際に現場でゼロからコードを書こうとしたとき、その不安は現実になりました。

• この場合はこうする
• この場合はこうする

そういうパターンが頭に入っていない。だから、いざ自分でゼロから書こうとすると、手が止まってしまう。

業務では有識者の方がレスポンシブのコードを書いてくれました。でも、なぜそう書いたのか聞く時間もなく、「分からないまま」終わってしまいました。

同じような経験をした方もいるのではないでしょうか？

この記事では、私自身が「これを最初に知りたかった」と思う内容をまとめました。一緒に学んでいきましょう。

---

まず押さえるべき考え方

TailwindCSSでレスポンシブを書くには、まず「モバイルファースト」という考え方を理解しましょう。

モバイルファーストとは

TailwindCSSはモバイルファーストで設計されています。

breakpoint（ブレークポイント）は、画面の横幅が何px（ピクセル）以上かで切り替わります。

プレフィックス	横幅	意味
（なし）	0px〜	モバイル（最小サイズ）
sm	640px〜	small
md	768px〜	medium
lg	1024px〜	large
xl	1280px〜	extra large
2xl	1536px〜	2x extra large

つまり、まずモバイル向けに書いて、大きい画面で上書きするという考え方です。

モバイルファーストの例

例を見てみましょう。カードを並べるレイアウトを考えます。

• モバイル（狭い画面）: 1列で縦に並べたい
• PC（広い画面）: 2列で横に並べたい

これをTailwindCSSで書くと：

<div class="grid grid-cols-1 md:grid-cols-2">
  ...
</div>

読み方：

1. grid-cols-1 → まずモバイル向けに「1列」と書く
2. md:grid-cols-2 → 768px以上では「2列」で上書き

何も付けないクラスがベース（モバイル）、md: 付きが上書き（PC）です。

---

画面サイズの定石

モバイルファーストを方針とする場合、次に決めることは画面サイズです。
実際に、どのように決めたら良いか？について解説を進めます。

最初に決めること

「どの画面サイズに対応するか」を最初に決めましょう。

決めるにあたって、まずインチとピクセルの関係を押さえておきましょう：

デバイス	画面サイズ	ビューポート幅	breakpoint
iPhone	6インチ前後	375〜430px	（なし）
iPad（縦）	10〜11インチ	768〜834px	md
iPad（横）	10〜11インチ	1024〜1194px	lg
ノートPC	13〜15インチ	1280〜1536px	xl〜2xl
デスクトップ	24インチ〜	1920px〜	2xl

実際の開発対象と照らし合わせて、どれが最適となりそうか検討してみましょう。

よくあるパターン

次に、よくあるパターンについて解説します。

以下は、そのまとめです。特にこだわりがなければ、「モバイル + PC（lg:）」に対応しておくのがおすすめです。なぜならスマホとPCで分けるなら、lg:（1024px）がちょうどいい境目だからです。

パターン	対応サイズ	breakpoint	用途	おすすめ
シンプル	モバイル + PC	（なし）+ lg	個人ブログ、LP	○
標準	モバイル + タブレット + PC	（なし）+ md + lg	企業サイト
細かく	sm, md, lg, xl 全部	sm, md, lg, xl, 2xl	大規模アプリ

試しにコードも書いてみます。

パターン1: シンプル

<div class="text-sm lg:text-base">
  モバイルは小さく、PCは普通サイズ
</div>

パターン2: 標準

<div class="text-sm md:text-base lg:text-lg">
  段階的にサイズアップ
</div>

---

UIごとの定石パターン

画面サイズの方針が決まったら、次は具体的なUIをどう変えるかです。よく使うUIごとに、定石パターンを見ていきましょう。

1. ナビゲーション

定石: モバイルでハンバーガー、PCでフル表示

<!-- ハンバーガーアイコン（モバイルのみ表示） -->
<button class="block md:hidden">☰</button>

<!-- ナビリンク（PCのみ表示） -->
<nav class="hidden md:flex gap-4">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

使用したクラスの意味：

クラス	意味
block md:hidden	モバイルで表示、PC（md以上）で非表示
hidden md:flex	モバイルで非表示、PC（md以上）でflex表示

2. サイドバー

定石: モバイルで非表示 or 下に移動、PCで横に表示

<div class="flex flex-col md:flex-row">
  <!-- メインコンテンツ -->
  <main class="w-full md:w-2/3">...</main>

  <!-- サイドバー -->
  <aside class="w-full md:w-1/3">...</aside>
</div>

モバイルとPCでの違い：

モバイル	PC（md以上）
縦並び（flex-col）	横並び（flex-row）
全幅（w-full）	2/3 + 1/3

3. グリッドレイアウト

定石: モバイルで1列、PCで複数列

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>カード1</div>
  <div>カード2</div>
  <div>カード3</div>
</div>

画面サイズごとの列数：

サイズ	列数
モバイル	1列
md（768px〜）	2列
lg（1024px〜）	3列

4. 画像

定石: モバイルで全幅、PCで固定幅 or 回り込み

<!-- 全幅 → 固定幅 -->
<img class="w-full md:w-1/2" src="..." alt="...">

<!-- 回り込み（PCのみ） -->
<img class="w-full md:w-1/3 md:float-right md:ml-4" src="..." alt="...">

5. テキストサイズ

定石: モバイルで小さく、PCで大きく

<h1 class="text-2xl md:text-4xl lg:text-5xl">
  タイトル
</h1>

<p class="text-sm md:text-base">
  本文
</p>

---

実践例：シンプルなレイアウト

以下のレイアウトを作ってみましょう。

モバイル:

• ヘッダー
• メインコンテンツ
• サイドバー（下に配置）

PC（md以上）:

• ヘッダー
• メインコンテンツ（左2/3）+ サイドバー（右1/3）

<div class="min-h-screen">
  <!-- ヘッダー -->
  <header class="bg-blue-500 text-white p-4">
    <h1 class="text-xl md:text-2xl">サイトタイトル</h1>
  </header>

  <!-- コンテンツエリア -->
  <div class="flex flex-col md:flex-row">
    <!-- メイン -->
    <main class="w-full md:w-2/3 p-4">
      <h2 class="text-lg md:text-xl mb-4">メインコンテンツ</h2>
      <p class="text-sm md:text-base">ここに本文が入ります。</p>
    </main>

    <!-- サイドバー -->
    <aside class="w-full md:w-1/3 bg-gray-100 p-4">
      <h3 class="text-base md:text-lg mb-2">サイドバー</h3>
      <ul class="text-sm">
        <li>リンク1</li>
        <li>リンク2</li>
        <li>リンク3</li>
      </ul>
    </aside>
  </div>
</div>

---

まとめ

TailwindCSS レスポンシブ の基本を解説しました。

押さえるべきポイント:

• モバイルファースト: まずモバイル向けに書いて、大きい画面で上書き
• 迷ったら lg: モバイル + PC（lg:）から始める
• 定石パターンを覚える: ナビ、サイドバー、グリッド、画像、テキスト

最初から完璧を目指さなくて大丈夫です。まずは「モバイル + PC」の2段階で書いてみて、必要に応じて細かく調整していきましょう。

---

参考リンク

• Tailwind Responsive Design ドキュメント
• Tailwind Breakpoints ドキュメント

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）