TechBlog
web-development

レスポンシブデザイン入門｜メディアクエリとモバイルファーストの実装方法を解説

by あくえり
#HTML #CSS #レスポンシブ #Web開発 #初心者
レスポンシブデザイン入門
目次

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

レスポンシブデザインとは、スマートフォン・タブレット・PCなど、異なる画面サイズのデバイスに対して、1つのHTMLで最適なレイアウトを提供する設計手法です。

Googleは2019年からモバイルファーストインデックスを採用しており、スマホ対応はSEOの観点からも必須となっています。現在、日本のWeb閲覧の約60〜70%がスマートフォンからであることを考えると、レスポンシブデザインはWebサイト制作の基本スキルです。

viewportメタタグの意味

HTMLの <head> 内に以下のメタタグを記述することが、レスポンシブデザインの第一歩です。

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

このタグがない場合、スマホブラウザはページをPC幅（通常980px）で表示しようとして、全体を縮小表示してしまいます。

各属性の意味：

  • width=device-width：ビューポートの幅をデバイスの実際の画面幅に合わせる
  • initial-scale=1.0：初期のズーム倍率を1倍（等倍）に設定する

メディアクエリの基本構文

メディアクエリは、特定の条件（画面幅など）を満たしたときだけ適用するCSSを記述する機能です。

/* 基本構文 */
@media (条件) {
  /* この条件を満たしたときだけ適用するCSS */
}

/* 画面幅が768px以上のとき */
@media (min-width: 768px) {
  .container {
    max-width: 1024px;
    margin: 0 auto;
  }
}

/* 画面幅が767px以下のとき */
@media (max-width: 767px) {
  .menu {
    display: none;
  }
}

/* 768px以上1279px以下のとき（タブレット向け） */
@media (min-width: 768px) and (max-width: 1279px) {
  .sidebar {
    width: 30%;
  }
}

ブレークポイントの設計

ブレークポイントとは、レイアウトが切り替わる画面幅の境界値です。一般的に使われるブレークポイントは以下の通りです。

デバイス画面幅用途
スマートフォン（小）〜375pxiPhone SE など
スマートフォン（標準）〜767px大多数のスマホ
タブレット768px〜1023pxiPad など
PC（標準）1024px〜1279pxノートPC
PC（ワイド）1280px〜デスクトップ

実際のCSSでは次のように変数として定義しておくと管理しやすいです。

/* CSS カスタムプロパティでブレークポイントを管理 */
:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

モバイルファーストの考え方

レスポンシブデザインには2つのアプローチがあります。

デスクトップファースト（古い手法）： PC向けのデザインをベースにして、max-width でスマホ向けに上書きする方法。

モバイルファースト（推奨）： スマホ向けのデザインをベースにして、min-width でタブレット・PC向けに拡張していく方法。

モバイルファーストが推奨される理由は、スマホ向けのシンプルなCSSを基本として、画面が広くなるにつれて機能を「追加」していく考え方が、パフォーマンスと保守性の面で優れているからです。

/* モバイルファーストの例 */

/* スマホ向け（デフォルト）*/
.card-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* タブレット以上（768px〜）*/
@media (min-width: 768px) {
  .card-grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .card-grid .card {
    width: calc(50% - 8px);
  }
}

/* PC以上（1024px〜）*/
@media (min-width: 1024px) {
  .card-grid .card {
    width: calc(33.333% - 11px);
  }
}

FlexboxとGridを使ったレスポンシブパターン

ナビゲーション（スマホ：縦並び、PC：横並び）

<nav class="nav">
  <a href="/">ホーム</a>
  <a href="/about">About</a>
  <a href="/blog">ブログ</a>
  <a href="/contact">お問い合わせ</a>
</nav>
.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
  }
}

カードレイアウト（CSS Grid）

<div class="card-grid">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
</div>
.card-grid {
  display: grid;
  grid-template-columns: 1fr; /* スマホ：1列 */
  gap: 16px;
  padding: 16px;
}

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

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

レスポンシブフォーム

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 768px) {
  .form-row {
    flex-direction: row;
    align-items: center;
  }

  .form-row label {
    width: 120px;
    flex-shrink: 0;
  }

  .form-row input {
    flex: 1;
  }
}

画像のレスポンシブ対応

max-width を使った基本対応

img {
  max-width: 100%;
  height: auto;
}

この2行だけで、画像がコンテナ幅を超えてはみ出すことを防げます。

picture要素とsrcset

解像度やデバイスに応じて最適な画像を配信するには srcset と picture 要素を使います。

<!-- srcset：同じ画像の異なるサイズを指定 -->
<img
  src="image-800w.jpg"
  srcset="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
  alt="サンプル画像"
>

<!-- picture要素：画面幅に応じて異なる画像ファイルを使い分ける -->
<picture>
  <source media="(max-width: 640px)" srcset="image-mobile.webp">
  <source media="(max-width: 1024px)" srcset="image-tablet.webp">
  <img src="image-desktop.webp" alt="サンプル画像">
</picture>

picture 要素は、スマホ向けにトリミングした縦長の画像、PCには横長の画像を使うといった「アートディレクション」にも活用できます。

よく使うレスポンシブユーティリティCSS

/* コンテナ（中央寄せ＋最大幅設定） */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .container {
    padding: 0 32px;
  }
}

/* スマホでは非表示、PCで表示 */
.pc-only {
  display: none;
}

@media (min-width: 1024px) {
  .pc-only {
    display: block;
  }
}

/* スマホでは表示、PCで非表示 */
.sp-only {
  display: block;
}

@media (min-width: 1024px) {
  .sp-only {
    display: none;
  }
}

動作確認の方法

Chrome DevToolsを使えば、PCブラウザで様々なデバイスのレスポンシブ表示を確認できます。

  1. F12キー（またはCmd+Option+I）でDevToolsを開く
  2. 左上の「デバイスモードのトグル」ボタン（スマホとタブレットのアイコン）をクリック
  3. 上部のドロップダウンからデバイスを選択（iPhone 14、iPad Air など）
  4. 自由に画面幅を変えながらレイアウトを確認できる

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

HTML/CSSの基礎からレスポンシブデザイン・Flexbox・Gridまで、豊富な図解でわかりやすく解説した定番入門書。初心者が最初に手に取るべき1冊です。

¥2,618 Amazonで見る

※ アフィリエイトリンクを含みます

Udemy — 【初心者向け】HTML・CSS・JavaScriptでWebサイトを作成する入門講座

HTML/CSSの基礎からJavaScriptを使った動的なWebサイト制作まで、動画で丁寧に学べる入門講座。レスポンシブ対応も実践的に解説されています。

¥1,500〜 Udemyで見る

※ アフィリエイトリンクを含みます

まとめ

レスポンシブデザインの核心は「モバイルファースト」と「メディアクエリ」の2点です。まずスマホ向けのシンプルなレイアウトを作り、画面幅が広くなるにつれて @media (min-width: ...) でレイアウトを拡張していく流れを身につけましょう。FlexboxとGrid、そして max-width: 100% の画像対応を組み合わせることで、大半のレスポンシブレイアウトに対応できます。Chrome DevToolsで実際に様々なデバイスサイズで確認しながら開発する習慣もセットで身につけてください。

共有: