技術・開発 2025年1月9日更新日: 2025年1月9日

レスポンシブデザイン実装の基本｜メディアクエリとFlexboxで作る

📅 公開日: 2025年1月15日 🔄 最終更新: 2025年1月15日

「作ったサイトがスマホで崩れる...」「PCでは綺麗なのに、タブレットで見るとレイアウトがおかしい」。レスポンシブデザインは、今やWebサイト制作の必須スキルです。この記事では、メディアクエリ、Flexbox、CSS Gridを使った実践的なレスポンシブデザインの実装方法を、初心者でもすぐに使えるコード例と共に詳しく解説します。

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

定義

レスポンシブデザインとは、1つのHTMLファイルで、デバイスの画面サイズに応じて最適な表示を実現する設計手法です。

スマホ（375px〜）: 1カラム、縦並び
タブレット（768px〜）: 2カラム、一部横並び
PC（1024px〜）: 3カラム、全て横並び

なぜ必要なのか

モバイルトラフィックが過半数：Webアクセスの60%以上がスマホ
SEOに有利：Googleがモバイルフレンドリーを重視
メンテナンス性：PC版・スマホ版を別々に作るより、1つのコードで管理

基礎：viewportメタタグ

必ず設定する

HTMLの<head>内に、以下のviewportメタタグを追加します。

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

意味：

width=device-width: デバイスの横幅に合わせる
initial-scale=1.0: 初期の拡大率を100%に設定

これを設定しないと、スマホでPCサイトがそのまま縮小表示され、文字が読めなくなります。

メディアクエリの基本

構文

/* 基本構文 */
@media (max-width: 768px) {
  /* 768px以下の画面に適用されるCSS */
  .container {
    width: 100%;
  }
}

@media (min-width: 769px) {
  /* 769px以上の画面に適用されるCSS */
  .container {
    width: 1200px;
    margin: 0 auto;
  }
}

ブレークポイントの設定

一般的なブレークポイント：

/* スマホ（デフォルト）: 〜575px */

/* タブレット */
@media (min-width: 576px) { }

/* タブレット（横向き）・小型PC */
@media (min-width: 768px) { }

/* PC */
@media (min-width: 1024px) { }

/* 大型PC */
@media (min-width: 1200px) { }

モバイルファースト設計

概念

スマホ（最小画面）のCSSをデフォルトとし、画面が大きくなるにつれてCSSを追加していく手法です。

実装例

/* モバイルファースト（デフォルト: スマホ向け） */
.container {
  width: 100%;
  padding: 1rem;
}

.article-grid {
  display: block; /* 縦並び */
}

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

  .article-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2カラム */
    gap: 1.5rem;
  }
}

/* PC以上 */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }

  .article-grid {
    grid-template-columns: repeat(3, 1fr); /* 3カラム */
  }
}

Flexboxでのレスポンシブ実装

基本パターン: カードの横並び → 縦並び

.card-container {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  gap: 1rem;
}

.card {
  flex: 1 1 300px; /* 最小幅300px、伸縮可能 */
}

/* スマホでは1列表示 */
@media (max-width: 767px) {
  .card {
    flex: 1 1 100%; /* 1列100%幅 */
  }
}

実践例: ナビゲーションメニュー

/* スマホ: ハンバーガーメニュー（縦並び） */
nav ul {
  display: flex;
  flex-direction: column; /* 縦並び */
}

/* PC: 横並びメニュー */
@media (min-width: 768px) {
  nav ul {
    flex-direction: row; /* 横並び */
    gap: 2rem;
  }
}

CSS Gridでのレスポンシブ実装

auto-fitで自動調整

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/*
auto-fit: 画面幅に応じて自動でカラム数を調整
minmax(250px, 1fr): 最小250px、最大1frで均等配分
→ スマホ: 1列、タブレット: 2列、PC: 3列 と自動調整される
*/

実践例: 記事一覧

.article-grid {
  display: grid;
  grid-template-columns: 1fr; /* スマホ: 1列 */
  gap: 2rem;
}

@media (min-width: 768px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr); /* タブレット: 2列 */
  }
}

@media (min-width: 1024px) {
  .article-grid {
    grid-template-columns: repeat(3, 1fr); /* PC: 3列 */
  }
}

実践：mechatora.comで使っているコード

ヘッダーのレスポンシブ化

/* スマホ */
.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.logo {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

nav ul {
  flex-direction: column;
  gap: 0.5rem;
}

/* PC */
@media (min-width: 768px) {
  .header-content {
    flex-direction: row;
    justify-content: space-between;
    padding: 1.5rem 2rem;
  }

  .logo {
    margin-bottom: 0;
  }

  nav ul {
    flex-direction: row;
    gap: 2rem;
  }
}

カード型レイアウト

.app-grid {
  display: grid;
  grid-template-columns: 1fr; /* スマホ: 1列 */
  gap: 1.5rem;
  padding: 1rem;
}

.app-card {
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (min-width: 640px) {
  .app-grid {
    grid-template-columns: repeat(2, 1fr); /* 小型タブレット: 2列 */
  }
}

@media (min-width: 1024px) {
  .app-grid {
    grid-template-columns: repeat(3, 1fr); /* PC: 3列 */
    padding: 2rem;
  }
}

よくある失敗と解決策

失敗1: 画像がはみ出す

原因：画像に幅指定がない

解決策：

img {
  max-width: 100%; /* 親要素の幅を超えない */
  height: auto; /* アスペクト比を維持 */
}

失敗2: 文字が小さすぎて読めない

原因：スマホ向けのフォントサイズが未設定

解決策：

body {
  font-size: 16px; /* スマホでも読みやすいサイズ */
}

h1 {
  font-size: 1.75rem; /* 28px相当 */
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem; /* PCでは大きく */
  }
}

失敗3: ボタンが小さくてタップしにくい

原因：タッチターゲットが44px未満

解決策：

button,
a {
  min-height: 44px; /* タッチターゲットの最小サイズ */
  min-width: 44px;
  padding: 0.75rem 1.5rem;
}

開発者ツールでの確認方法

Chrome DevToolsを使う

F12キーでデベロッパーツールを開く
左上の「デバイスツールバー」アイコンをクリック（またはCtrl+Shift+M）
「Responsive」または特定のデバイスを選択
幅を手動で変えながら、レイアウトの崩れをチェック

チェックポイント

375px（iPhone SE）でレイアウトが崩れていないか
768px（iPad）で2カラム表示になっているか
1024px（PC）で3カラム表示になっているか
画像・動画がはみ出していないか
ボタンがタップしやすいサイズか

まとめ

レスポンシブデザインは、モバイルファーストで設計し、メディアクエリ・Flexbox・CSS Gridを活用することで実現できます。このページのポイントをまとめます：

必須設定：viewportメタタグを必ず記述
モバイルファースト：スマホ向けをデフォルト、画面拡大で追加CSS
メディアクエリ：@media (min-width: 768px) で画面サイズ別にスタイル適用
Flexbox：flex-wrap、flex-directionで縦横切り替え
CSS Grid：repeat(auto-fit, minmax())で自動調整
失敗対策：画像max-width: 100%、フォント16px以上、ボタン44px以上

レスポンシブデザインは最初は難しく感じますが、パターンを覚えれば応用できます。ぜひ実際に手を動かして試してみてください！

📚 関連記事

この記事が役に立ったら、ぜひシェアしてください！