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

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

🌸 導入

ここまでで、わたくしたちは Tailwind CSSの基本 と レイアウト（Flexbox・Grid） を学んでまいりましたわ。
ウェブサイトを華やかに整える準備は整いました。

ですが、現代のウェブには必須の要素がございますの……それは レスポンシブデザイン ✨
スマホでも、タブレットでも、PCでも、美しく見えるように調整する技術ですわ。

今回は、Tailwind CSSが誇る「レスポンシブの魔法」を一緒に体験いたしましょう 📱💻

しなやかに配置を操る｜第2回 FlexboxとGrid入門

先生、スマホとPCで同じデザインを使うと、時に窮屈になってしまいますわね……。その調整をTailwindでできるのでしょうか？

もちろんです。Tailwindはレスポンシブ対応がとても直感的なんです。
キーワードは ブレークポイント と 接頭辞 ですよ。

📝 解説：Tailwindのレスポンシブの仕組み

Tailwindでは「画面サイズに応じてクラスを切り替える」ことができます。

例えば：

<p class="text-base md:text-lg lg:text-2xl">
  レスポンシブで文字サイズが変わります
</p>

text-base → デフォルト（スマホ向け）
md:text-lg → 画面幅768px以上で大きく
lg:text-2xl → 1024px以上でさらに大きく

➡️ スマホでは小さめ、PCでは大きめ、と自動で切り替わります。

まあ！接頭辞を付けるだけで、スマホとPCで別々のスタイルを設定できるなんて便利ですわね 📱➡️💻

その通りです。Tailwindでは以下のようなブレークポイントが用意されています。

📝 解説：Tailwindのブレークポイント一覧

sm: → 640px以上（小さめのタブレット〜）
md: → 768px以上（一般的なタブレット〜）
lg: → 1024px以上（ノートPC〜）
xl: → 1280px以上（大きめのデスクトップ）
2xl: → 1536px以上（さらに大画面）

👉 基本的には モバイルファースト（スマホの設定を基準にし、画面が広くなると上書きする）で考えると良いです。

モバイルを基準に考える……つまり、スマホで快適に見えるように作ってから、段階的に広い画面向けに整えるということですのね。

おっしゃる通りです。では実際にレイアウトをレスポンシブ対応させてみましょう。

📝 解説：レスポンシブなGridレイアウト

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4">アイテム 1</div>
  <div class="bg-blue-300 p-4">アイテム 2</div>
  <div class="bg-blue-400 p-4">アイテム 3</div>
  <div class="bg-blue-500 p-4">アイテム 4</div>
  <div class="bg-blue-600 p-4">アイテム 5</div>
  <div class="bg-blue-700 p-4">アイテム 6</div>
</div>

grid-cols-1 → スマホでは1列表示
sm:grid-cols-2 → タブレットで2列表示
lg:grid-cols-3 → PCで3列表示

➡️ 同じHTMLでも画面幅によって見え方が変わります。

まあまあ！商品一覧や写真ギャラリーを作るときに、これだけでスマホもPCも対応できるのですわね 💎

そうです。しかもクラスを足すだけなので、CSSファイルをほとんど触らずに済みます。

📝 解説：レスポンシブ応用例（ナビゲーションバー）

<nav class="flex flex-col sm:flex-row sm:justify-between bg-gray-100 p-4">
  <a href="#" class="p-2">ホーム</a>
  <a href="#" class="p-2">サービス</a>
  <a href="#" class="p-2">お問い合わせ</a>
</nav>

スマホでは縦並び（flex-col）
タブレット以上では横並び（sm:flex-row）

➡️ 画面幅に応じてナビゲーションの形を変えられます。

Tailwindのレスポンシブ、まるで洋服をシーンに合わせて着替えるようですわ 👗✨

素敵なたとえですね。その感覚を持てば、どんなデバイスでも快適なデザインを作れますよ。