【6日でできるHTML＆CSS入門】レスポンシブ Web デザインの基本

　現代のWebサイトは、パソコン・スマートフォン・タブレットなど多様なデバイスや画面サイズで閲覧される時代になりました。そのため、どの端末から見ても使いやすく・美しいレイアウトを自動的に切り替える「レスポンシブ Web デザイン（Responsive Web Design）」がWeb制作の標準となっています。

　レスポンシブWebデザインを取り入れることで、1つのHTMLページで複数のデバイス対応が可能になり、ユーザーの利便性が大幅に向上します。ここでは、レスポンシブWebデザインの基本的な考え方や仕組み、メリットとデメリットを整理して解説します。

１．レスポンシブ Web デザインの基本

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

　従来はパソコン向けだけを想定してWebデザインをしていれば十分でした。しかし、スマートフォンやタブレットが普及した今、同じページでも「画面サイズが違うと表示が崩れる・見づらい」という問題が起こるようになりました。

レスポンシブWebデザインとは、
「どんな画面サイズやデバイスでも最適にWebページを表示する手法」です。
1つのHTMLファイルに対してデバイスごとに異なるCSSを用意し、画面の幅や高さなどに応じてデザインを切り替えます。

レスポンシブデザインの仕組み

項目	内容
HTML	1つだけ用意し、全デバイスで共通で使う。
CSS	画面サイズごとに異なるデザインを記述する。
メディアクエリ	CSSの機能で、条件（幅や向きなど）で分岐可能
例	PC：2カラム、スマホ：1カラムに自動切り替え

1.2. レスポンシブWebデザインのメリット・デメリット

メリット

1つのHTMLで全端末に対応でき、更新や管理がシンプル
SEO対策にも強い（URLが統一されるため）
どのデバイスでも一貫したユーザー体験を提供

デメリット

複雑なレイアウトではCSS設計が難しくなる場合がある
多くの端末や画面サイズで動作確認が必要
古いブラウザや一部の端末で意図通りにならない場合もある

２．レスポンシブWebデザインの基本的な考え方と実装

2.1. メディアクエリでCSSを分岐する

メディアクエリを使うことで、画面幅や高さ、向きなどの条件に応じて、異なるCSSを適用できます。

例：画面幅によるレイアウト切り替え

/* デフォルト（PC向け） */
.main-content {
  display: flex;
  gap: 2em;
}

/* 画面幅700px以下は縦並び */
@media (max-width: 700px) {
  .main-content {
    display: block;
  }
}

2.2. サンプル：シンプルなレスポンシブHTML

ファイル名： lesson38_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>レスポンシブデザインの例</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: sans-serif; margin: 0; }
    header { background: #2196f3; color: #fff; text-align: center; padding: 1em; }
    nav ul { display: flex; justify-content: center; gap: 1.2em; padding: 0; list-style: none; margin: 0; }
    .main-content { display: flex; gap: 1.5em; margin: 2em auto; max-width: 900px; }
    .main-content > div { flex: 1; padding: 1.2em; background: #e3f2fd; border-radius: 8px; }
    footer { background: #f1f1f1; color: #555; text-align: center; padding: 1em; font-size: 0.95em; }

    /* レスポンシブ：画面幅700px以下で縦並びに */
    @media (max-width: 700px) {
      nav ul { flex-direction: column; gap: 0.6em; }
      .main-content { display: block; }
      .main-content > div { margin-bottom: 1em; }
    }
  </style>
</head>
<body>
  <header>
    <h1>レスポンシブ サンプルページ</h1>
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <div class="main-content">
    <div>メインエリア</div>
    <div>サイド情報</div>
  </div>
  <footer>
    © 2025 サンプル株式会社
  </footer>
</body>
</html>

表示結果

PCや広い画面では横並び、スマホや狭い画面では縦並びに自動的に切り替わります。

PCや広い画面

スマホや狭い画面

３．レスポンシブWebデザインで使う主なCSSプロパティとタグ

タグ・プロパティ	役割・意味
`<meta name="viewport">`	デバイス幅に合わせてページ表示を最適化
`@media`	メディアクエリ。画面幅など条件でCSS切り替え。
`flex`	柔軟な横並び・縦並びレイアウト
`max-width`	最大幅の指定（横幅の自動調整に必須）
`gap`	要素間の隙間
`flex-direction`	横並び/縦並びの切り替え。

まとめ

レスポンシブWebデザインは、1つのHTMLでどのデバイスにも対応できる現代のWeb制作の基本です。
メディアクエリやflexboxなどを使い、画面サイズに応じたレイアウト・デザインを提供しましょう。
ユーザーにとって「いつでも・どこでも見やすいWebページ」を目指す上で、レスポンシブ設計は不可欠です。