レスポンシブデザインとTailwind CSS入門【スマホ対応サイトの作り方】

⑧Web開発

2026.04.01

記事内に広告が含まれています。

スマートフォンでも見やすいレスポンシブデザインの作り方と、人気のCSSフレームワーク「Tailwind CSS」の入門を解説します。

レスポンシブデザインとは？
メディアクエリによるレスポンシブ対応
Tailwind CSSとは？
Tailwindの主要クラス早見表
まとめ

レスポンシブデザインとは？

画面サイズに応じてレイアウトが自動調整されるデザインです。スマホ・タブレット・PCすべてで見やすい表示を実現します。

メディアクエリによるレスポンシブ対応

/* デフォルト：スマホ向け */
.container {
  width: 100%;
  padding: 16px;
}

/* タブレット以上（768px〜） */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* PC以上（1024px〜） */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
  }
}

Tailwind CSSとは？

Tailwind CSSはユーティリティクラスを組み合わせてスタイルを適用するCSSフレームワークです。クラス名を書くだけでデザインが完成し、独自CSSをほぼ書かずに済みます。

<!-- CDN経由でTailwind CSSを読み込む -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Tailwindのクラスでスタイリング -->
<div class="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow">
  <h1 class="text-2xl font-bold text-gray-800 mb-4">タイトル</h1>
  <p class="text-gray-600 leading-relaxed">テキスト内容</p>
  <button class="mt-4 px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    送信する
  </button>
</div>

Tailwindの主要クラス早見表

分類	クラス例	意味
余白	p-4 / m-4 / px-6 / my-2	padding / margin（4=1rem）
テキスト	text-xl / font-bold / text-gray-700	サイズ・太さ・色
背景	bg-white / bg-blue-500	背景色
レイアウト	flex / grid / hidden / block	表示形式
ホバー	hover:bg-blue-600	マウスオーバー時のスタイル
レスポンシブ	md:flex / lg:grid-cols-3	ブレークポイント指定