レスポンシブデザイン

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

レスポンシブデザイン (Responsive Design) は、CSS メディアクエリと柔軟なレイアウトで、画面サイズ (スマートフォン、タブレット、デスクトップ) に応じて表示を自動調整する手法である。Ethan Marcotte が 2010 年に提唱した。

viewport メタタグ

viewport メタタグの例を示す。

<meta name="viewport" content="width=device-width, initial-scale=1" />

メディアクエリ

メディアクエリの例を示す。

/* モバイルファースト: 小さい画面をデフォルトに */
.container { padding: 1rem; }

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

/* デスクトップ */
@media (min-width: 1024px) {
  .container { max-width: 1200px; }
}

ブレークポイント

代表的なブレークポイントを以下にまとめる。

デバイス	幅	Tailwind
モバイル	< 640px	デフォルト
タブレット	≥ 768px	md:
デスクトップ	≥ 1024px	lg:
ワイド	≥ 1280px	xl:

Flexbox + Grid

Flexbox + Grid の例を示す。

/* Flexbox: 1列 → 3列 */
.cards { display: flex; flex-wrap: wrap; gap: 1rem; }
.card { flex: 1 1 100%; }
@media (min-width: 768px) { .card { flex: 1 1 calc(33.3% - 1rem); } }

/* Grid: auto-fit で自動調整 */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }

レスポンシブ画像

レスポンシブ画像の例を示す。

<!-- srcset で画面サイズに応じた画像を配信 -->
<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Photo"
/>

Container Queries (CSS 2023)

メディアクエリはビューポート幅に基づくが、Container Queries は親コンテナの幅に基づく。

.card-container { container-type: inline-size; }

@container (min-width: 400px) {
  .card { display: flex; }
}

モバイルファースト vs デスクトップファースト

モバイルファーストとデスクトップファーストの違いを以下にまとめる。

アプローチ	メディアクエリ	推奨
モバイルファースト	min-width	✅ (モバイルトラフィックが多い)
デスクトップファースト	max-width	管理画面など

テスト

Chrome DevTools のデバイスモードで各画面サイズをシミュレートする。実機テストも重要。

レスポンシブデザインの関連書籍も参考になる。