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

同じHTMLでも、画面幅に合わせて見やすく変えられる。
メニューとレイアウトを切り替えて、PCでもスマートフォンでも使いやすいWebページを作ろう。

Webページは、パソコンだけでなく、スマートフォンやタブレットなど、さまざまな画面サイズの端末で閲覧されます。パソコンではきれいに見えていても、スマートフォンで開くとメニューが横にはみ出したり、文字が小さくなったり、ボタンが押しにくくなったりすることがあります。

このような問題を防ぐために必要なのが、レスポンシブWebデザインです。レスポンシブWebデザインでは、1つのHTMLを基本にしながら、CSSで画面幅に応じたスタイルを切り替えます。つまり、HTMLの構造は大きく変えずに、CSSの書き方を工夫して、PC用、タブレット用、スマートフォン用の見た目を調整していきます。

特に重要なのが、ビューポートの設定とメディアクエリです。ビューポートを設定すると、スマートフォンでも端末幅に合わせてページを表示しやすくなります。メディアクエリを使うと、画面幅が一定以下になったときだけ、メニューを縦並びにしたり、余白を小さくしたり、文字サイズを調整したりできます。

この記事では、Webサイトの基本レイアウトをレスポンシブ対応にする手順を、HTMLとCSSのサンプルを使って解説します。横並びメニューをスマートフォンでは縦並びのボタン風メニューに変える方法や、画面幅に合わせて余白を整える考え方を、順番に確認していきます。

レスポンシブ対応の目的

レスポンシブ対応の目的は、どの端末でも情報を読みやすく、操作しやすく表示することです。単に画面に収めるだけではなく、ユーザーが自然に読めるか、メニューを押しやすいか、余白が窮屈すぎないかを考えます。

パソコンは横幅が広いため、メニューを横並びにしたり、本文とサイド情報を並べたりできます。一方、スマートフォンは横幅が狭いため、横並びをそのまま使うと内容が詰まりやすくなります。そのため、スマートフォンでは縦並びにして、上から順に読める形にするのが基本です。

デバイス画面サイズの目安レイアウト調整の例
パソコン1200px以上横並びメニュー、ゆとりのある横幅、2カラム表示
タブレット600px〜1024px程度メニュー幅や余白を調整、必要に応じて1カラム化
スマートフォン600px以下縦並びメニュー、全幅表示、タップしやすいボタン

レスポンシブWebデザインでは、画面幅が変わったときに「どの部分をどう変えるか」を考えることが大切です。メニュー、本文、画像、余白、文字サイズなど、調整する対象を整理しておくと作りやすくなります。

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

この図から分かること

レスポンシブWebデザインでは、同じHTMLを使いながら、画面幅に合わせてレイアウトを切り替えます。PCでは横幅を活かして横並びにし、スマートフォンでは縦並びにして読みやすくします。端末ごとに最適な表示へ調整することが、レスポンシブ対応の基本です。

レスポンシブ化で使う主な方法

Webページをレスポンシブ対応にするときは、大きく分けて2つの準備が重要です。1つ目はビューポートの設定、2つ目はメディアクエリの利用です。

ビューポートは、スマートフォンやタブレットでページを端末幅に合わせて表示するために使います。HTMLのhead内にmeta name="viewport"を指定します。

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

この指定を入れることで、ページ幅が端末の画面幅に合わせて扱われやすくなります。スマートフォン対応のHTMLでは、基本として入れておきたい指定です。

メディアクエリは、画面幅などの条件に応じてCSSを切り替える仕組みです。たとえば、画面幅が800px以下になったときだけメニューを縦並びにする、といった指定ができます。

@media screen and (max-width: 800px) {
  #menu ul {
    flex-direction: column;
  }
}

このように、レスポンシブWebデザインでは、HTMLでページの構造を作り、CSSのメディアクエリで画面幅に応じた見た目へ調整します。

HTMLは大きく変えず、構造を整理しておく

レスポンシブ対応をするとき、HTMLを端末ごとに別々に作る必要はありません。基本的には、1つのHTMLを使い、CSSで見た目を切り替えます。

ただし、HTMLの構造が分かりにくいと、CSSで調整しづらくなります。header、nav、main、aside、article、section、footerなどを使って、ページの役割を整理しておくことが大切です。

タグ用途
headerサイト名やヘッダー情報を入れる
navナビゲーションメニューを入れる
ulメニュー項目をリストとしてまとめる
liメニューの各項目を表す
mainページの主要コンテンツを入れる
aside補足情報やサイド情報を入れる
article記事やお知らせのまとまりを入れる
section内容の区切りを作る
footerサイト下部の情報を入れる

レスポンシブ対応では、CSSで配置を切り替えるため、HTML側では「どこがメニューか」「どこが本文か」「どこが補足情報か」が分かるようにしておくと作業しやすくなります。

図2：HTML構造は共通、CSSで見た目を切り替える

この図から分かること

レスポンシブ対応では、HTMLを端末ごとに作り分けるのではなく、1つのHTMLを基本にします。HTMLではページの構造を整理し、CSSでPC用とスマートフォン用の見た目を切り替えます。構造とデザインを分けることで、管理しやすいページになります。

HTMLサンプル：基本レイアウトを用意する

ここでは、ヘッダー、ナビゲーション、補足情報、記事、フッターを持つシンプルなWebページを作ります。CSSは外部ファイルとしてstyle_responsive.cssを読み込みます。

スマートフォン対応を考えるため、head内にはビューポートの設定も入れておきます。

ファイル名： lesson40_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブレイアウトサンプル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style_responsive.css">
</head>
<body>
  <header id="header">
    <h1>Web Design Step Up</h1>

    <nav id="menu">
      <ul>
        <li><a href="#">トップ</a></li>
        <li><a href="#">講座案内</a></li>
        <li><a href="#">制作実績</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <div id="contents">
      <aside>
        <section>
          <h2>補足情報</h2>
          <p>学習のポイントや関連リンクを掲載します。</p>
        </section>
      </aside>

      <article>
        <section>
          <h3>2026.07.22</h3>
          <p>レスポンシブWebデザインのサンプルを公開しました。</p>
        </section>
      </article>
    </div>
  </main>

  <footer id="footer">
    <small>© Web Design Step Up</small>
  </footer>
</body>
</html>

このHTMLでは、サイト上部をheader、メニューをnav、本文エリアをmainで作っています。mainの中には、補足情報を入れるasideと、お知らせ本文を入れるarticleがあります。

id="menu"やid="contents"のように名前を付けておくと、CSSで特定の領域を指定しやすくなります。レスポンシブ対応では、メニューや本文エリアの配置をCSSで変更するため、このように領域ごとの名前を整理しておくと便利です。

CSSサンプル：PC用の基本デザインを作る

次に、CSSでデザインを指定します。まずはPC向けの基本デザインを作ります。メニューは横並びにし、本文は中央に配置します。

ファイル名： style_responsive.css

body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.6;
  background-color: #f6f8fa;
}

#header {
  background-color: #2737cf;
  color: #ffffff;
  text-align: center;
  padding: 1em 0;
}

#header h1 {
  margin: 0 0 0.8em;
}

#menu ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 800px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

#menu ul li a {
  display: block;
  color: #ffffff;
  background-color: #384fff;
  border-radius: 8px;
  padding: 1em 0.8em;
  font-weight: bold;
  font-size: 1.1em;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

#menu ul li a:hover {
  background-color: #19258a;
  color: #fffd85;
}

#contents {
  max-width: 800px;
  margin: 2em auto;
  padding: 0 10px;
  display: flex;
  gap: 1.5em;
}

aside {
  width: 220px;
}

aside section {
  background-color: #e3f2fd;
  padding: 1em;
  border-radius: 8px;
}

article {
  flex: 1;
}

article section {
  background-color: #ffffff;
  padding: 1.2em;
  border-radius: 8px;
  border: 1px solid #dddddd;
}

#footer {
  background-color: #222222;
  color: #ffffff;
  text-align: center;
  padding: 1em 0;
  font-size: 0.95em;
}

この段階では、PC向けの見た目が作られます。メニューはdisplay: flexによって横並びになり、gapで項目同士の間隔が作られます。#contentsにもdisplay: flexを指定しているため、asideとarticleが横並びになります。

CSSサンプル：スマートフォン用の指定を追加する

次に、画面幅が800px以下になったときのCSSを追加します。メディアクエリを使って、スマートフォンや狭い画面ではメニューを縦並びにし、本文エリアも縦に並ぶようにします。

@media screen and (max-width: 800px) {
  #menu ul {
    flex-direction: column;
    gap: 8px;
    padding: 0 10px;
  }

  #menu ul li a {
    font-size: 1.1em;
    padding: 1em;
    background-color: #2737cf;
    border-radius: 10px;
  }

  #contents {
    display: block;
    margin: 1.5em auto;
  }

  aside {
    width: auto;
    margin-bottom: 1em;
  }
}

この指定により、画面幅が800px以下の場合だけ、メニューや本文エリアのレイアウトが切り替わります。

#menu ulにはflex-direction: columnを指定しているため、横並びだったメニューが縦並びになります。さらに、paddingを付けることで画面端にくっつかないようにしています。

#contentsにはdisplay: blockを指定しているため、横並びだったasideとarticleが縦並びになります。スマートフォンでは横幅が狭いため、1カラム表示にすることで読みやすくなります。

完成したCSS

PC用の基本デザインとスマートフォン用のメディアクエリをまとめると、次のようになります。

body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.6;
  background-color: #f6f8fa;
}

#header {
  background-color: #2737cf;
  color: #ffffff;
  text-align: center;
  padding: 1em 0;
}

#header h1 {
  margin: 0 0 0.8em;
}

#menu ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 800px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

#menu ul li a {
  display: block;
  color: #ffffff;
  background-color: #384fff;
  border-radius: 8px;
  padding: 1em 0.8em;
  font-weight: bold;
  font-size: 1.1em;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

#menu ul li a:hover {
  background-color: #19258a;
  color: #fffd85;
}

#contents {
  max-width: 800px;
  margin: 2em auto;
  padding: 0 10px;
  display: flex;
  gap: 1.5em;
}

aside {
  width: 220px;
}

aside section {
  background-color: #e3f2fd;
  padding: 1em;
  border-radius: 8px;
}

article {
  flex: 1;
}

article section {
  background-color: #ffffff;
  padding: 1.2em;
  border-radius: 8px;
  border: 1px solid #dddddd;
}

#footer {
  background-color: #222222;
  color: #ffffff;
  text-align: center;
  padding: 1em 0;
  font-size: 0.95em;
}

@media screen and (max-width: 800px) {
  #menu ul {
    flex-direction: column;
    gap: 8px;
    padding: 0 10px;
  }

  #menu ul li a {
    font-size: 1.1em;
    padding: 1em;
    background-color: #2737cf;
    border-radius: 10px;
  }

  #contents {
    display: block;
    margin: 1.5em auto;
  }

  aside {
    width: auto;
    margin-bottom: 1em;
  }
}

このCSSをstyle_responsive.cssとして保存し、lesson40_1.htmlと同じフォルダに置くと、HTMLからCSSが読み込まれます。

PC表示での見え方

PCのように画面幅が広い場合、メニューは横並びで表示されます。ヘッダーの下にメニューが横方向に並び、ボタン風のデザインになります。

また、#contentsではdisplay: flexが効いているため、asideとarticleが横並びになります。左に補足情報、右に記事エリアを配置するような、基本的な2カラムレイアウトになります。

表示部分PCでの見え方
メニュー横並び
補足情報と記事横並びの2カラム
横幅max-widthで中央に配置
メニュー項目ボタン風のリンク

PCでは横幅に余裕があるため、横並びを使うことで情報を効率よく配置できます。

図3：PCでは横並び、スマートフォンでは縦並びに切り替える

この図から分かること

PCでは横幅を活かして、メニューや本文エリアを横並びにできます。スマートフォンでは横幅が狭いため、メニューを縦並びのボタン風にし、本文も1カラムにすると読みやすくなります。メディアクエリを使うことで、画面幅に合わせた表示切り替えができます。

スマートフォン表示での見え方

画面幅が800px以下になると、メディアクエリの中に書いたCSSが適用されます。横並びだったメニューは縦並びになり、各リンクは画面幅に合わせたボタンのように表示されます。

また、asideとarticleも縦並びになります。PCでは横に並んでいた補足情報と記事が、スマートフォンでは上から順番に表示されるため、横スクロールを避けやすくなります。

表示部分スマートフォンでの見え方
メニュー縦並び
リンク大きめのボタン風
補足情報と記事1カラムで縦並び
余白画面端にくっつかないよう調整

スマートフォンでは、タップしやすさも大切です。リンクのpaddingを広めに取ることで、指で押しやすいメニューになります。

CSSプロパティの役割

今回のレスポンシブ対応で使っている主なCSSを整理しておきます。

プロパティ意味・効果
display: flex子要素を横並びや縦並びにしやすくする
flex-directionflexの並び方向を指定する
gap要素同士の間隔を指定する
border-radius角を丸くしてボタン風に見せる
@media screen and (max-width: 800px)画面幅800px以下のときだけCSSを適用する
padding要素の内側余白を作り、読みやすさや押しやすさを調整する
font-size文字サイズを指定する
font-weight文字の太さを指定する
max-widthコンテンツの最大幅を指定する
margin要素の外側余白を指定する
text-decorationリンクの下線などを調整する
transitionhover時の変化をなめらかにする

レスポンシブ対応では、display: flexとメディアクエリを組み合わせることがよくあります。広い画面ではflexで横並びにし、狭い画面ではflex-direction: columnやdisplay: blockで縦並びに変える、という流れが分かりやすいです。

メニューをレスポンシブ化するときの考え方

ナビゲーションメニューは、レスポンシブ対応で特に調整が必要になりやすい部分です。PCでは横並びが見やすくても、スマートフォンでは横幅が足りず、メニュー項目が詰まってしまうことがあります。

そのため、画面幅が狭くなったら縦並びに切り替え、1つひとつのリンクを大きめのボタンのように表示すると使いやすくなります。

画面幅メニューの考え方
広い画面横並びにして、一覧性を高める
狭い画面縦並びにして、タップしやすくする
さらに狭い画面文字サイズや余白を調整する

メニューを作るときは、見た目だけでなく、操作しやすさも大切です。スマートフォンでは、リンクの高さや余白をしっかり確保すると、誤タップを減らしやすくなります。

レイアウト崩れを防ぐポイント

レスポンシブ対応では、画面幅が変わったときにレイアウトが崩れないように注意します。特に、固定幅の要素や大きな画像、横並びのまま残っている要素は、スマートフォンで横スクロールの原因になることがあります。

よくある問題原因対策
横スクロールが出る固定幅の要素が画面より広いmax-widthやwidth: 100%を使う
メニューが詰まる横並びのまま狭い画面に表示しているメディアクエリで縦並びにする
文字が読みにくい文字サイズや行間が小さいfont-sizeやline-heightを調整する
ボタンが押しにくいpaddingが少ないスマホ用にpaddingを広げる
余白が広すぎるPC用の余白がそのまま残っているメディアクエリ内でmarginやpaddingを調整する

画像を使う場合は、次のような指定もよく使います。

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

この指定により、画像が親要素の横幅を超えてはみ出しにくくなります。レスポンシブ対応では、画面幅に合わせて要素が自然に縮むようにしておくことが大切です。

メディアクエリを複数段階で使う

今回のサンプルでは、800px以下でスマートフォン向けの表示に切り替えています。実際のWeb制作では、必要に応じて複数のブレイクポイントを使うこともあります。

たとえば、タブレット向けとスマートフォン向けで別の調整を入れたい場合は、次のように分けて書けます。

@media screen and (max-width: 1024px) {
  #contents {
    max-width: 90%;
  }
}

@media screen and (max-width: 600px) {
  #menu ul {
    flex-direction: column;
  }
}

ただし、メディアクエリを増やしすぎるとCSSが複雑になります。最初は、1つのブレイクポイントで横並びから縦並びへ切り替えるところから始めると理解しやすいです。

表示確認の方法

レスポンシブ対応をしたら、必ず画面幅を変えて確認します。パソコンのブラウザでも、ウィンドウ幅を狭くすると、スマートフォンに近い表示を確認できます。

さらに、Chromeのデベロッパーツールを使うと、スマートフォンやタブレットの画面幅をシミュレートできます。

確認することチェックポイント
PC表示メニューが横並びで見やすいか
タブレット表示余白や幅が不自然ではないか
スマートフォン表示メニューが縦並びになっているか
横スクロール画面外にはみ出していないか
タップしやすさリンクやボタンの余白が十分か
文字の読みやすさ小さすぎず、行間が詰まりすぎていないか

レスポンシブ対応は、CSSを書いて終わりではありません。画面幅を変えながら、実際に見やすいか、操作しやすいかを確認して調整することが大切です。

Webレイアウトをレスポンシブ化する流れ

Webレイアウトをレスポンシブ対応にするときは、次の流れで進めると分かりやすくなります。

手順内容
1HTMLでheader、nav、main、aside、article、footerなどの構造を作る
2head内にmeta name="viewport"を設定する
3PC向けの基本CSSを書く
4display: flexで横並びのメニューや2カラムを作る
5@mediaで画面幅800px以下などの条件を作る
6スマートフォン向けに縦並び、余白、文字サイズを調整する
7ブラウザやデベロッパーツールで表示を確認する

この流れを押さえると、レスポンシブ対応の全体像が見えやすくなります。最初から複雑なページを作るのではなく、メニューを横並びから縦並びに変える、本文を2カラムから1カラムに変える、といった小さな切り替えから練習すると理解しやすくなります。

レスポンシブWebデザイン作成で大切な考え方

レスポンシブWebデザインでは、画面幅に合わせて見た目を変えることが大切ですが、もっと重要なのは、どの端末でも情報が伝わりやすい状態にすることです。

PCでは横幅を活かして、メニューや本文を広く見せることができます。スマートフォンでは、縦に流れるレイアウトにして、指で操作しやすいメニューや読みやすい余白を確保します。画面の広さが違えば、適した見せ方も変わります。

HTMLでは構造を分かりやすく整理し、CSSではflexやメディアクエリを使って画面幅に応じた表示へ切り替えます。レスポンシブ対応の基本は、1つのHTMLに対してCSSでスタイルを調整することです。

メニューを縦並びにする、本文を1カラムにする、余白を見直す、ボタンを押しやすくする。このような小さな調整を積み重ねることで、PCでもスマートフォンでも快適に見られるWebページを作れるようになります。