レスポンシブデザイン入門 - スマホ対応サイトの作り方

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

レスポンシブデザインとは、1つのHTMLで様々な画面サイズに対応するWebデザイン手法です。PC、タブレット、スマートフォンなど、どのデバイスでも最適な表示を実現します。

ビューポートの設定

HTMLのhead内にビューポートメタタグを追加します。これがないとモバイルで正しく表示されません。

<!-- 基本的なビューポート設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 各属性の意味 -->
width=device-width   → 幅をデバイスの幅に合わせる
initial-scale=1.0    → 初期ズーム倍率を100%に
maximum-scale=1.0    → 最大ズーム倍率（ユーザビリティのため非推奨）
user-scalable=no     → ズーム禁止（アクセシビリティのため非推奨）

メディアクエリの使い方

画面幅に応じてCSSを切り替えます。モバイルファーストで書くのが現在の主流です。

ブレークポイントの設計

/* モバイルファースト：小さい画面から順に定義 */

/* デフォルト: モバイル（〜767px） */
.container {
  width: 100%;
  padding: 0 16px;
}

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

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

/* 大画面PC（1280px〜） */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}

よく使うメディアクエリパターン

/* 最小幅（モバイルファースト） */
@media (min-width: 768px) { ... }

/* 最大幅（デスクトップファースト） */
@media (max-width: 767px) { ... }

/* 範囲指定 */
@media (min-width: 768px) and (max-width: 1023px) { ... }

/* 向き */
@media (orientation: landscape) { ... }
@media (orientation: portrait) { ... }

/* 高解像度ディスプレイ（Retina） */
@media (min-resolution: 2dppx) { ... }

/* ホバー対応デバイス（タッチ非対応） */
@media (hover: hover) {
  .button:hover {
    background: #0066cc;
  }
}

相対単位の活用

固定のpxではなく、相対的な単位を使うことで柔軟なレイアウトが作れます。

/* rem - ルート要素のfont-sizeを基準（推奨） */
html { font-size: 16px; }  /* 1rem = 16px */
.heading { font-size: 1.5rem; }  /* = 24px */
.text { font-size: 1rem; }      /* = 16px */
.small { font-size: 0.875rem; } /* = 14px */

/* em - 親要素のfont-sizeを基準 */
.card { padding: 1.5em; }  /* 親のフォントサイズ × 1.5 */

/* % - 親要素を基準 */
.sidebar { width: 30%; }
.main { width: 70%; }

/* vw/vh - ビューポート幅/高さを基準 */
.hero {
  height: 100vh;     /* 画面の高さいっぱい */
  width: 100vw;      /* 画面の幅いっぱい */
}

/* clamp() - 最小値と最大値を設定（レスポンシブに最適） */
.title {
  /* 最小16px、理想は4vw、最大32px */
  font-size: clamp(16px, 4vw, 32px);
}

.container {
  /* 最小300px、理想は90%、最大1200px */
  width: clamp(300px, 90%, 1200px);
}

レスポンシブレイアウト実装

Flexboxによるレスポンシブ

/* HTML: <div class="card-grid"><div class="card">...</div></div> */

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  /* モバイル: 1列 */
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .card {
    /* タブレット: 2列 */
    flex: 1 1 calc(50% - 8px);
  }
}

@media (min-width: 1024px) {
  .card {
    /* PC: 3列 */
    flex: 1 1 calc(33.333% - 11px);
  }
}

CSS Gridによるレスポンシブ

/* メディアクエリなしで自動的に列数が変わる */
.auto-grid {
  display: grid;
  /* 最小250px、利用可能な幅で自動調整 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* auto-fit vs auto-fill */
/* auto-fit: 要素が少ない場合、引き伸ばして埋める */
/* auto-fill: 要素が少ない場合、空のスペースを維持 */

レスポンシブナビゲーション

/* HTML構造 */
<nav class="nav">
  <button class="menu-toggle">☰</button>
  <ul class="nav-list">...</ul>
</nav>

/* CSS */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-toggle {
  display: block;  /* モバイルで表示 */
  background: none;
  border: none;
  font-size: 24px;
}

.nav-list {
  /* モバイル: 隠す */
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  background: #fff;
}

.nav-list.open {
  display: block;
}

@media (min-width: 768px) {
  .menu-toggle {
    display: none;  /* PCで非表示 */
  }

  .nav-list {
    display: flex;  /* PCで常に表示 */
    position: static;
    gap: 24px;
  }
}

実践的なデザインパターン

レスポンシブ画像

/* 基本: 親要素に収める */
img {
  max-width: 100%;
  height: auto;
}

/* object-fit: アスペクト比を維持しながら収める */
.thumbnail {
  width: 100%;
  height: 200px;
  object-fit: cover;  /* 切り抜きで埋める */
}

/* HTML: srcset で解像度別の画像を提供 */
<img
  src="image.jpg"
  srcset="image-320.jpg 320w,
          image-640.jpg 640w,
          image-1280.jpg 1280w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="説明">

レスポンシブテーブル

/* 方法1: 横スクロール */
.table-wrapper {
  overflow-x: auto;
}

/* 方法2: カード形式に変換 */
@media (max-width: 767px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }

  thead {
    display: none;  /* ヘッダーを隠す */
  }

  tr {
    margin-bottom: 16px;
    border: 1px solid #ddd;
  }

  td {
    display: flex;
    justify-content: space-between;
    padding: 8px;
  }

  td::before {
    content: attr(data-label);  /* data属性からラベル表示 */
    font-weight: bold;
  }
}

モバイルファーストの完全例

/* HTML構造 */
<div class="layout">
  <header>ヘッダー</header>
  <aside>サイドバー</aside>
  <main>メインコンテンツ</main>
  <footer>フッター</footer>
</div>

/* モバイル（デフォルト）: 縦並び */
.layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "aside"
    "footer";
  gap: 16px;
}

header { grid-area: header; }
aside  { grid-area: aside; }
main   { grid-area: main; }
footer { grid-area: footer; }

/* PC: サイドバーを左に配置 */
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 250px 1fr;
    grid-template-areas:
      "header header"
      "aside  main"
      "footer footer";
  }
}

まとめ

レスポンシブデザインは現代のWebサイトでは必須です。モバイルファーストで設計し、メディアクエリで大画面に対応させるアプローチが主流です。FlexboxやCSS Gridを活用すれば、複雑なレイアウトも簡潔に実装できます。当サイトもレスポンシブ対応しているので、PC・スマホ両方で確認してみてください。