6日でできる 新HTML&CSS入門｜レスポンシブWebデザインの基本

画面サイズが変わっても、見やすさは変えない。
レスポンシブWebデザインを理解して、パソコンでもスマートフォンでも使いやすいページを作ろう。

現在のWebサイトは、パソコンだけで見られるものではありません。スマートフォン、タブレット、ノートパソコン、大きな外部モニターなど、さまざまな画面サイズの端末で閲覧されます。そのため、1つの画面サイズだけを想定してページを作ると、別の端末では文字が小さすぎたり、横スクロールが出たり、メニューが使いにくくなったりすることがあります。

このような問題を防ぐために使われる考え方が、レスポンシブWebデザインです。レスポンシブWebデザインとは、画面の幅や端末の種類に合わせて、Webページのレイアウトや見た目を自動的に調整する方法です。

たとえば、パソコンではメインエリアとサイド情報を横並びにし、スマートフォンでは縦並びに切り替えることができます。また、パソコンではメニューを横一列に表示し、スマートフォンでは縦に並べてタップしやすくすることもできます。

レスポンシブWebデザインの大きな特徴は、基本的に1つのHTMLを使いながら、CSSで画面サイズごとの見た目を切り替えられることです。HTMLは共通の構造として使い、CSSのメディアクエリでレイアウトや余白、文字サイズなどを調整します。

この記事では、レスポンシブWebデザインの基本的な考え方、メリットと注意点、メディアクエリの使い方、flexを使った横並びと縦並びの切り替えを、サンプルコードを使いながら分かりやすく解説していきます。

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

レスポンシブWebデザインは、画面サイズに応じてWebページの表示を調整する設計方法です。パソコン、スマートフォン、タブレットなど、異なる端末でも見やすく使いやすいページを目指します。

以前は、パソコン向けページとスマートフォン向けページを別々に用意する方法もありました。しかし、別々のページを管理すると、内容を更新するときに複数のファイルを修正しなければならず、管理が複雑になりやすいです。

レスポンシブWebデザインでは、基本的にHTMLを1つにまとめ、CSSで表示を切り替えます。これにより、情報の管理をシンプルにしながら、画面サイズごとに適したレイアウトを作ることができます。

項目内容
HTML全端末で共通するページ構造を作る
CSS画面サイズに合わせて見た目を調整する
メディアクエリ画面幅などの条件によってCSSを切り替える
レイアウト例広い画面では2カラム、狭い画面では1カラムにする

レスポンシブWebデザインでは、単に画面に収めるだけではなく、ユーザーが読みやすく操作しやすいことが大切です。スマートフォンでは指でタップしやすいメニューにする、横スクロールを出さない、文字が小さくなりすぎないようにする、といった配慮も必要になります。

図1：画面サイズに合わせてレイアウトを切り替える

この図から分かること

レスポンシブWebデザインでは、同じHTMLを使いながら、画面サイズに応じてレイアウトを切り替えます。広い画面では横並びにして情報を効率よく表示し、狭い画面では縦並びにして読みやすくします。端末ごとに見やすい形へ調整することが大切です。

レスポンシブWebデザインが必要な理由

Webサイトを見る環境は人によって大きく異なります。会社のパソコンで見る人もいれば、通勤中にスマートフォンで見る人もいます。タブレットで横向きに見る人もいれば、スマートフォンを縦向きで操作する人もいます。

もしパソコンだけを想定して横幅の広いレイアウトを作ると、スマートフォンでは表示が小さくなり、横スクロールが必要になることがあります。逆に、スマートフォンだけを意識しすぎると、パソコンでは余白が多すぎて情報が間延びして見えることもあります。

レスポンシブWebデザインを取り入れると、1つのページをさまざまな画面に合わせて調整できます。これにより、ユーザーはどの端末からでも情報を読み取りやすくなります。

問題レスポンシブ対応でできること
スマートフォンで横スクロールが出る画面幅に合わせて縦並びにする
メニューが小さくて押しにくいメニュー項目を縦に並べてタップしやすくする
画像が画面からはみ出す横幅を画面に合わせて縮小する
PCでは余白が広すぎる最大幅を指定して読みやすい幅に整える

レスポンシブ対応は、見た目をきれいにするためだけではありません。ユーザーが迷わず読み、操作できるようにするための基本的な設計です。

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

レスポンシブWebデザインには、制作側にも利用者側にも大きなメリットがあります。

メリット内容
1つのHTMLで管理できるPC用とスマホ用を別々に作らなくてもよい
更新しやすい内容の修正を1つのHTMLにまとめられる
URLを統一できる同じページをどの端末でも見せやすい
ユーザー体験をそろえやすい端末が違っても同じ情報にアクセスできる
デザインの一貫性を保ちやすいCSSで統一した見た目を管理できる

特に、HTMLを1つにできることは大きな利点です。別々のページを作ると、文章やリンクを変更するたびに複数箇所を修正する必要があります。レスポンシブWebデザインでは、HTMLの内容は共通にし、CSSで見た目を切り替えるため、管理がしやすくなります。

レスポンシブWebデザインの注意点

便利なレスポンシブWebデザインですが、注意点もあります。画面サイズごとに見た目を変えるため、CSSの設計が複雑になりやすい場合があります。

また、パソコン、タブレット、スマートフォンなど、複数の画面幅で表示を確認する必要があります。自分のパソコンではきれいに見えても、スマートフォンでは余白が足りなかったり、文字が小さかったりすることがあります。

注意点内容
CSSが複雑になりやすい条件ごとの指定が増える
表示確認が必要複数の画面幅で確認する必要がある
画像や表の扱いに注意横幅が広い要素はスマートフォンではみ出しやすい
古いブラウザでは注意が必要一部のCSSが想定どおりに動かない場合がある

レスポンシブ対応では、最初から完璧なデザインを目指すよりも、画面幅が狭くなったときに何を優先して表示するかを考えることが大切です。情報の優先順位を整理すると、レイアウトも決めやすくなります。

メディアクエリで画面幅ごとにCSSを切り替える

レスポンシブWebデザインの中心になるのがメディアクエリです。メディアクエリを使うと、画面幅や端末の条件に応じて、特定のCSSを適用できます。

たとえば、通常は横並びにしておき、画面幅が700px以下になったら縦並びにする場合は、次のように書きます。

.main-content {
  display: flex;
  gap: 2em;
}

@media (max-width: 700px) {
  .main-content {
    display: block;
  }
}

この指定では、通常時は.main-contentがflexによって横並びになります。しかし、画面幅が700px以下になると、@mediaの中の指定が適用され、display: block;に切り替わります。

指定意味
@media条件付きでCSSを適用する
max-width: 700px画面幅が700px以下のとき
display: flex子要素を横並びにする
display: block通常の縦並びに戻す

メディアクエリを使うと、同じHTMLでも画面幅に応じて見た目を変えられます。これがレスポンシブWebデザインの基本的な仕組みです。

図2：メディアクエリでCSSを切り替える仕組み

この図から分かること

メディアクエリを使うと、画面幅などの条件に合わせてCSSを切り替えられます。広い画面ではdisplay: flex;で横並びにし、狭い画面ではdisplay: block;やflex-direction: column;で縦並びにできます。レスポンシブWebデザインでは、この条件分岐が重要な役割を持ちます。

viewportを指定してスマートフォン表示に対応する

レスポンシブWebデザインでは、HTMLのhead内にviewportの指定を入れることがとても重要です。

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

この指定は、スマートフォンなどの端末幅に合わせてページを表示するためのものです。viewportを指定しないと、スマートフォンでもパソコン向けの広い幅としてページが表示され、全体が縮小されて見づらくなることがあります。

指定意味
name="viewport"表示領域の設定を指定する
width=device-width端末の画面幅に合わせる
initial-scale=1初期表示倍率を1にする

レスポンシブ対応をするHTMLでは、viewportの指定を入れることを基本として覚えておきましょう。

flexで横並びを作り、画面幅で縦並びに変える

レスポンシブWebデザインでは、flexを使うとレイアウトの切り替えがしやすくなります。flexは、子要素を横並びや縦並びに配置するためのCSSです。

パソコンのように広い画面では、メインエリアとサイド情報を横並びにすると、画面を広く使えます。一方、スマートフォンのように狭い画面では、横並びのままだと窮屈になるため、縦並びに切り替えると読みやすくなります。

.main-content {
  display: flex;
  gap: 1.5em;
}

@media (max-width: 700px) {
  .main-content {
    display: block;
  }
}

このように、通常時は横並び、狭い画面では縦並び、という切り替えがレスポンシブデザインの基本になります。

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

ここでは、ヘッダー、ナビゲーション、メインエリア、サイド情報、フッターを持つシンプルなレスポンシブページを作ります。広い画面ではメインエリアとサイド情報を横並びにし、画面幅が700px以下になると縦並びに切り替えます。

ファイル名： lesson38_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブWebデザインの基本</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {
    font-family: sans-serif;
    margin: 0;
    background-color: #f7f9fc;
    line-height: 1.6;
  }

  header {
    background-color: #2196f3;
    color: #ffffff;
    text-align: center;
    padding: 1em;
  }

  header h1 {
    margin: 0 0 0.8em;
  }

  nav ul {
    display: flex;
    justify-content: center;
    gap: 1.2em;
    padding: 0;
    list-style: none;
    margin: 0;
  }

  nav a {
    color: #ffffff;
    text-decoration: none;
  }

  .main-content {
    display: flex;
    gap: 1.5em;
    margin: 2em auto;
    max-width: 900px;
    padding: 0 1em;
  }

  .content-box {
    flex: 2;
    padding: 1.2em;
    background-color: #e3f2fd;
    border-radius: 8px;
  }

  .side-box {
    flex: 1;
    padding: 1.2em;
    background-color: #fff8e1;
    border-radius: 8px;
  }

  footer {
    background-color: #f1f1f1;
    color: #555555;
    text-align: center;
    padding: 1em;
    font-size: 0.95em;
  }

  @media (max-width: 700px) {
    nav ul {
      flex-direction: column;
      gap: 0.6em;
    }

    .main-content {
      display: block;
    }

    .content-box,
    .side-box {
      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>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <div class="main-content">
    <div class="content-box">
      <h2>メインエリア</h2>
      <p>ここにはページの中心となる内容を配置します。広い画面ではサイド情報と横並びになります。</p>
    </div>

    <div class="side-box">
      <h2>サイド情報</h2>
      <p>関連リンクや補足情報を表示します。狭い画面ではメインエリアの下に表示されます。</p>
    </div>
  </div>

  <footer>
    © 2026 レスポンシブ学習サイト
  </footer>
</body>
</html>

ブラウザの表示例

パソコンやタブレットのように横幅が広い画面では、メインエリアとサイド情報が横並びで表示されます。ナビゲーションメニューも横一列に並びます。

一方、画面幅が700px以下になると、メディアクエリの指定が適用されます。nav ulにはflex-direction: column;が指定され、メニューが縦に並びます。.main-contentはdisplay: block;に変わるため、メインエリアとサイド情報も縦に並びます。

これにより、スマートフォンのような狭い画面でも、横スクロールせずに読みやすいレイアウトになります。

サンプルコードのポイント

このサンプルで重要なのは、通常時のレイアウトと、狭い画面用のレイアウトを分けて書いていることです。

指定役割
meta name="viewport"端末幅に合わせてページを表示する
display: flex広い画面で横並びにする
gap横並び要素の間隔を作る
max-widthコンテンツの最大幅を決める
padding画面端に内容がくっつかないようにする
@media (max-width: 700px)700px以下の画面にだけCSSを適用する
flex-direction: columnメニューを縦並びにする
display: blockメインエリアを縦並びにする

特にmax-widthは、広い画面で本文が横に広がりすぎるのを防ぐために便利です。画面いっぱいに文章が広がると読みづらくなるため、最大幅を決めて中央寄せにすると、落ち着いたレイアウトになります。

PC表示とスマートフォン表示の違い

レスポンシブWebデザインでは、画面が広いときと狭いときで、情報の並び方を変えます。

表示環境レイアウトの考え方
PCや広い画面横幅を活かして、メインとサイドを横並びにする
タブレット横幅に応じて余白や幅を調整する
スマートフォン1カラムにして、上から順に読みやすくする

広い画面では、横並びにすることで情報を効率よく見せられます。狭い画面では、横並びのままだと文字が小さくなったり、要素が窮屈になったりするため、縦並びにすると読みやすくなります。

図3：PCでは横並び、スマホでは縦並びにする

この図から分かること

レスポンシブWebデザインでは、広い画面では横並びを活かし、狭い画面では縦並びに切り替えます。PCでは2カラムにすると情報を見渡しやすくなり、スマートフォンでは1カラムにすると読みやすくなります。端末に合わせて配置を変えることで、使いやすさが向上します。

レスポンシブWebデザインで使う主なタグとCSS

レスポンシブWebデザインでよく使うHTMLタグやCSSを整理しておきます。

タグ・CSS役割・意味
meta name="viewport"デバイス幅に合わせてページ表示を調整する
@media条件に応じてCSSを切り替える
display: flex子要素を横並びや縦並びにしやすくする
flex-directionflexの並び方向を指定する
max-width要素の最大幅を指定する
width要素の横幅を指定する
gap要素同士の間隔を指定する
padding内側の余白を指定する
margin外側の余白を指定する
list-styleリストの記号を表示するかどうかを指定する
text-align文字やリンクの配置を指定する
border-radius角を丸くする

レスポンシブWebデザインでは、画面幅が変わったときに何を変更するかを考えます。横並びを縦並びにする、余白を小さくする、メニューを縦にする、画像の幅を調整するなど、見やすさを保つための指定を追加していきます。

レスポンシブ対応で意識したい設計の流れ

レスポンシブWebデザインを作るときは、まずページの情報を整理し、その後に画面サイズごとの表示を考えると進めやすくなります。

手順内容
情報を整理する何を一番見せたいかを決める
HTML構造を作るheader、nav、main、footerなどを配置する
基本のCSSを書く広い画面、または狭い画面を基準にデザインする
メディアクエリを追加する画面幅に応じてレイアウトを切り替える
複数画面で確認するPC、タブレット、スマートフォン幅で表示を見る

レスポンシブ対応では、画面が狭くなったときに情報の優先順位が重要になります。すべてを横に詰め込むのではなく、上から順に読める形へ並べ替えると、スマートフォンでも使いやすくなります。

よくある失敗と対策

レスポンシブWebデザインでは、いくつかの失敗が起こりやすいです。代表的なものを確認しておきましょう。

よくある失敗原因対策
スマートフォンで横スクロールが出る固定幅の要素が画面より広いmax-widthやwidth: 100%;を使う
メニューが押しにくい横並びのまま狭い画面に詰まっているメディアクエリで縦並びにする
画像がはみ出す画像幅が固定されているimgにmax-width: 100%;を指定する
余白が広すぎるPC用の余白がスマホにも残っている狭い画面用にpaddingやmarginを調整する
CSSが分かりにくくなる条件分岐が増えすぎているブロックごとにCSSを整理する

特に画像のはみ出しはよく起こります。画像をレスポンシブに扱う場合は、次の指定が役立ちます。

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

これにより、画像が親要素の幅を超えてはみ出すのを防ぎやすくなります。

レスポンシブWebデザインを学ぶときの考え方

レスポンシブWebデザインでは、1つの正解だけを覚えるのではなく、画面サイズに合わせてどう見せるかを考えることが大切です。

広い画面では横並びにすることで、情報を効率よく配置できます。狭い画面では縦並びにして、上から順に読みやすくします。メニューは、パソコンでは横並び、スマートフォンでは縦並びにすると操作しやすくなります。

HTMLはできるだけ共通にし、CSSで見た目を切り替えることを意識すると、管理しやすいページになります。最初は、display: flex;で横並びを作り、@media (max-width: 700px)で縦並びに変えるところから練習すると分かりやすいです。

レスポンシブWebデザインは、現代のWeb制作で欠かせない基本です。パソコンでもスマートフォンでも読みやすく、操作しやすいページを作るために、viewport、メディアクエリ、flex、max-widthなどを組み合わせて、画面に合わせたレイアウトを作れるようにしていきましょう。