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

　Webページ制作では、パソコンやスマートフォン、タブレットといったさまざまなデバイスで正しく・美しく表示できることが重要です。そのために欠かせないのが「レスポンシブ Web デザイン」です。
　レスポンシブWebデザインを実装することで、1つのHTMLで複数デバイスに最適化したWebページを作成できます。ここでは、レスポンシブWebデザインの作成手順、ビューポート設定、メディアクエリの基礎、実際のHTML＋CSSサンプルと確認方法について詳しく解説します。

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

1.1. ビューポート（viewport）を設定する

レスポンシブWebデザインを適用する際に最初に必要なのは、ビューポートの設定です。
ビューポート設定はHTMLの<head>内で、以下のように指定します。

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

属性	説明
width=device-width	デバイスの幅に合わせてページ幅を指定
initial-scale=1.0	ページの初期拡大率（標準は1.0）
minimum-scale=1.0	ページの最小拡大率（任意・省略可）

これにより、スマートフォンやタブレットでもレイアウト崩れしにくくなります。

1.2. メディアクエリで画面幅ごとにデザインを切り替える

メディアクエリとは、CSS内で「画面サイズごとに異なるデザインを適用できる機能」です。

例（パソコン／タブレット／スマートフォンごとに背景色を切り替える）

用途	メディアクエリ例（画面幅で分岐）
パソコン用	`@media screen and (min-width: 767px)`
タブレット用	`@media screen and (max-width: 767px)`
スマートフォン用	`@media screen and (max-width: 479px)`

２．サンプルで学ぶ：簡単なレスポンシブWebページ

2.1. サンプルHTMLとCSS

ファイル名： lesson39_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>レスポンシブデザインのサンプル</title>
  <meta charset="utf-8">
  <!-- ビューポート設定 -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  <style>
    #main-box {
      color: black;
      text-align: center;
      width: 100vw;
      height: 100vh;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2em;
    }
    /* パソコン用（幅767px以上） */
    @media screen and (min-width: 767px) {
      #main-box {
        background-color: #ffffff;
      }
    }
    /* タブレット用（幅767px以下） */
    @media screen and (max-width: 767px) {
      #main-box {
        background-color: #e0e0e0;
      }
    }
    /* スマートフォン用（幅579px以下） */
    @media screen and (max-width: 579px) {
      #main-box {
        background-color: #000000;
        color: #fff;
      }
    }
  </style>
</head>
<body>
  <div id="main-box">
    <p>レスポンシブ サンプルページ</p>
  </div>
</body>
</html>

表示結果

パソコン：白背景に黒文字

タブレット：グレー背景に黒文字

スマートフォン：黒背景に白文字

2.2. 主なHTMLタグ・CSSのまとめ表

タグ／プロパティ	役割・内容
`<meta name="viewport">`	ビューポートの設定
`@media`	メディアクエリ（画面幅等でCSSを切り替え）
`width`/`height`	ボックスサイズの設定
`background-color`/`color`	背景・文字色の指定
`display: flex`/`align-items`	中央揃えレイアウト

３．デバイスごとの見た目の確認方法

3.1. Chromeデベロッパーツールを使う

　Chromeなど主要ブラウザには、デバイスごとの表示をシミュレートできる「デベロッパーツール」があります。

１．Chrome右上「︙」→「その他のツール」→「デベロッパーツール」

開発者ツール画面が開く

２．「デバイスモード」アイコン（スマホマーク）をクリック

画面幅や端末種別を変更してプレビュー可能です。

３．プルダウンから各種デバイス（iPhone/Pixelなど）選択

スマホ・タブレットなど様々な表示をテストできます。

４．よく使うレスポンシブ設定のコツ

幅や高さをパーセントやvw/vhで指定（画面サイズに追従）
フォントサイズや間隔もメディアクエリで調整
不要なスクロールが発生しないように余白を見直す

まとめ

レスポンシブWebデザインの作成は、「ビューポート設定」＋「メディアクエリ」から始まります。
画面幅ごとにデザインを切り替えることで、1つのHTMLファイルで複数端末に対応可能。
主要ブラウザのデベロッパーツールを活用して、スマホ・タブレット・PC表示のチェックも忘れずに行いましょう！

実際の現場では、この基本パターンをアレンジして複雑なレイアウトにも発展させられます。