レスポンシブコーディング完全ガイド｜HTML・CSSの書き方、ブレイクポイント、崩れない実装手順

はじめに

レスポンシブコーディングは、PC・タブレット・スマホなど、異なる画面幅でもWebサイトを見やすく、使いやすく表示するためのコーディング手法です。

現在のWebサイト制作では、スマホからの閲覧を前提にした設計が欠かせません。PCではきれいに見えていても、スマホで文字が小さい、画像がはみ出す、横スクロールが出る、ボタンが押しにくいといった状態では、ユーザーにとって使いにくいサイトになってしまいます。

レスポンシブコーディングで重要なのは、単にメディアクエリを書くことではありません。HTML構造、CSS設計、余白、画像、文字サイズ、ブレイクポイント、確認手順までを含めて、画面幅が変わっても崩れにくい仕組みを作ることが大切です。

この記事では、レスポンシブコーディングの基本から、HTML・CSSの書き方、ブレイクポイントの決め方、実装手順、よくある崩れの原因と直し方まで、実務で使える形で解説します。

1. レスポンシブコーディングとは？まず押さえる基本

1-1. レスポンシブコーディングの意味

レスポンシブコーディングとは、画面幅に応じてレイアウトや文字サイズ、画像サイズ、余白などを柔軟に変化させるためのHTML・CSS実装のことです。

たとえば、PCでは3カラムで横並びに表示していたカード一覧を、タブレットでは2カラム、スマホでは1カラムに切り替えるような実装がレスポンシブコーディングです。

レスポンシブ対応では、次のような要素を画面幅に合わせて調整します。

・レイアウトのカラム数
・コンテンツ幅
・画像サイズ
・フォントサイズ
・行間
・余白
・ナビゲーションの表示形式
・ボタンやフォームのサイズ

大切なのは、どの端末でも同じ見た目にすることではなく、それぞれの画面幅で読みやすく、操作しやすい表示にすることです。

1-2. レスポンシブデザインとの違い

レスポンシブデザインは、画面幅に応じて最適な見た目を設計する考え方です。一方、レスポンシブコーディングは、そのデザインをHTML・CSSで実装する作業を指します。

つまり、レスポンシブデザインは「設計」、レスポンシブコーディングは「実装」です。

デザインカンプでPC版とスマホ版の見た目が用意されていても、コーディング時に可変性を考慮しなければ、途中の画面幅で崩れることがあります。たとえば、PC幅では問題なく表示される2カラムレイアウトが、タブレット幅では窮屈になり、スマホ幅では横スクロールが出るケースです。

そのため、レスポンシブコーディングでは、デザインカンプの見た目を再現するだけでなく、画面幅が変化する途中の状態まで考えて実装する必要があります。

1-3. なぜHTML・CSSだけで崩れない設計が必要なのか

レスポンシブ対応の基本は、HTMLとCSSで完結できる構造を作ることです。JavaScriptで無理に表示を制御すると、保守が難しくなったり、読み込みタイミングによって表示崩れが起きたりすることがあります。

HTML・CSSだけで崩れにくくするには、最初から可変に強い設計を意識することが重要です。

たとえば、以下のような指定は崩れの原因になりやすいです。

CSS
.card {
  width: 400px;
  height: 300px;
}

固定幅や固定高さを多用すると、画面幅が狭くなったときに要素が収まりきらなくなります。レスポンシブコーディングでは、以下のように最大幅や相対単位を使うと安定しやすくなります。

CSS
.card {
  width: 100%;
  max-width: 400px;
  min-height: 300px;
}

固定する部分と可変にする部分を分けて考えることが、崩れない実装の基本です。

1-4. PC・タブレット・スマホで表示を変える仕組み

PC・タブレット・スマホで表示を変えるときは、主にCSSのメディアクエリを使います。

CSS
/* 通常時のスタイル */
.container {
  padding: 40px;
}

/* 画面幅が768px以下のとき */
@media screen and (max-width: 768px) {
  .container {
    padding: 24px;
  }
}

このように、特定の画面幅を条件にしてCSSを上書きすることで、表示を切り替えます。

ただし、すべてをメディアクエリで切り替える必要はありません。width: 100%、max-width、flex-wrap、grid-template-columns、clamp()などを使えば、画面幅に応じて自然に変化するレイアウトを作ることができます。

レスポンシブコーディングでは、メディアクエリで切り替える部分と、CSSの可変指定で自然に調整する部分を使い分けることが大切です。

1-5. レスポンシブ対応でよくある失敗

レスポンシブ対応でよくある失敗は、PC版の見た目だけを基準に作り、最後にスマホ対応を無理やり追加することです。

よくある失敗例は次の通りです。

・固定幅を多用してスマホで横スクロールが出る
・画像にmax-width: 100%を指定しておらず、親要素からはみ出す
・文字サイズがPC基準のままでスマホでは大きすぎる
・余白が広すぎてスマホでコンテンツ幅が狭くなる
・高さ固定により、テキスト量が増えたときに崩れる
・ブレイクポイントを増やしすぎてCSSの管理が難しくなる
・実機確認をせず、開発者ツールだけで判断してしまう

レスポンシブコーディングでは、最初から「画面幅が変わる前提」でHTMLとCSSを設計することが重要です。

2. レスポンシブコーディング前に準備すること

2-1. デザインカンプで確認すべきポイント

レスポンシブコーディングを始める前に、デザインカンプで確認すべきポイントを整理しておきましょう。

特に重要なのは、PC版とスマホ版でレイアウトがどのように変わるかです。横並びが縦並びになるのか、画像の比率は変わるのか、ナビゲーションはハンバーガーメニューになるのかを事前に確認します。

確認すべき項目は以下です。

・PC版、タブレット版、スマホ版のカンプがあるか
・コンテンツの最大幅はいくつか
・左右の余白はいくつか
・セクション間の余白はいくつか
・フォントサイズと行間は画面幅ごとに変わるか
・画像のトリミングや比率は変わるか
・カラム数はどの幅で切り替わるか
・ヘッダーやナビゲーションはどう変化するか
・非表示になる要素はあるか

不明点を残したままコーディングすると、後からCSSの上書きが増えてしまいます。最初に確認しておくことで、実装がスムーズになります。

2-2. 対応デバイスと画面幅を決める

レスポンシブコーディングでは、どの画面幅まで対応するかを事前に決めておく必要があります。

一般的には、スマホ、タブレット、PCを想定します。ただし、実務では特定の端末だけに合わせるのではなく、幅の範囲で考えることが重要です。

たとえば、以下のように考えます。

・スマホ：〜767px
・タブレット：768px〜1023px
・PC：1024px〜
・大きなPC画面：1280px〜

ただし、これはあくまで目安です。サイトのデザインやコンテンツ量によって、最適なブレイクポイントは変わります。

重要なのは、特定のiPhoneやAndroidだけを基準にするのではなく、レイアウトが崩れ始める幅を見ながら調整することです。

2-3. PCファーストとモバイルファーストの選び方

レスポンシブコーディングには、PCファーストとモバイルファーストの考え方があります。

PCファーストは、PC版のCSSを先に書き、画面幅が狭くなるにつれてスマホ用のCSSを追加する方法です。

CSS
/* PC基準 */
.card-list {
  display: flex;
  gap: 24px;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .card-list {
    flex-direction: column;
  }
}

モバイルファーストは、スマホ版のCSSを先に書き、画面幅が広くなるにつれてPC用のCSSを追加する方法です。

CSS
/* スマホ基準 */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* PC用 */
@media screen and (min-width: 769px) {
  .card-list {
    flex-direction: row;
    gap: 24px;
  }
}

スマホからのアクセスが多いサイトや、シンプルなレイアウトから拡張していくサイトではモバイルファーストが向いています。一方、PCデザインが複雑で、PC版の再現性が重視される案件ではPCファーストのほうが進めやすい場合もあります。

どちらが正解というより、プロジェクトのデザインカンプ、ユーザー層、制作フローに合わせて選ぶことが大切です。

2-4. 余白・文字サイズ・画像サイズのルールを整理する

レスポンシブコーディングで崩れを防ぐには、余白、文字サイズ、画像サイズのルールを先に整理しておくことが重要です。

たとえば、セクション間の余白をPCでは80px、スマホでは48pxにするなど、共通ルールを決めておくとCSSが整理しやすくなります。

CSS
.section {
  padding: 80px 0;
}

@media screen and (max-width: 768px) {
  .section {
    padding: 48px 0;
  }
}

文字サイズも同様です。見出し、本文、注釈などのサイズをあらかじめ決めておくと、ページごとにばらつきが出にくくなります。

画像については、基本的に親要素の幅に合わせて縮小できるようにします。

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

この指定は、レスポンシブコーディングの基本として最初に入れておきたいCSSです。

2-5. コーディング前に決めておくCSS設計

レスポンシブ対応では、CSSの上書きが増えやすいため、設計を決めずに書き始めると管理が難しくなります。

事前に決めておきたいポイントは以下です。

・クラス名の命名ルール
・共通パーツの管理方法
・ブレイクポイントの管理方法
・余白や色、フォントサイズの変数化
・コンポーネント単位でCSSを書くか
・ページ単位のCSSをどこまで許容するか

たとえば、共通のインナー幅を以下のように定義しておくと、ページ全体で統一しやすくなります。

CSS
.inner {
  width: min(100% - 40px, 1080px);
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .inner {
    width: min(100% - 32px, 1080px);
  }
}

レスポンシブコーディングは、個別のCSSテクニックだけでなく、全体の設計力が品質に大きく影響します。

3. レスポンシブ対応に必要なHTMLの書き方

3-1. 崩れにくいHTML構造の基本

崩れにくいレスポンシブコーディングを行うには、HTML構造をシンプルに保つことが大切です。

基本は、セクション、インナー、コンテンツの順で構造を作ります。

HTML
<section class="section">
  <div class="section__inner">
    <h2 class="section__title">見出し</h2>
    <div class="section__body">
      <p>本文が入ります。</p>
    </div>
  </div>
</section>

このように、セクション全体の余白をsectionで管理し、横幅をsection__innerで管理し、実際の内容をsection__bodyに入れると、CSSで調整しやすくなります。

HTML構造が複雑すぎると、画面幅ごとの調整が難しくなります。まずは意味のあるまとまりで分け、必要な部分だけにラッパー要素を追加するのが基本です。

3-2. divを増やしすぎないレイアウト設計

レスポンシブ対応のためにdivを増やしすぎると、CSSの指定が複雑になり、どの要素に余白や幅が効いているのか分かりにくくなります。

悪い例は以下です。

HTML
<div class="wrapper">
  <div class="container">
    <div class="inner">
      <div class="box">
        <div class="content">
          <p>テキスト</p>
        </div>
      </div>
    </div>
  </div>
</div>

意味のないラッパーが多いと、レスポンシブ時の幅調整や余白調整が難しくなります。

必要な構造に絞ると、以下のようにシンプルになります。

HTML
<section class="feature">
  <div class="feature__inner">
    <p class="feature__text">テキスト</p>
  </div>
</section>

HTMLは、後からCSSで制御しやすいことも大切ですが、構造が読みやすいことも同じくらい重要です。

3-3. セクション・コンテナ・インナーの使い分け

レスポンシブコーディングでは、セクション、コンテナ、インナーを使い分けると管理しやすくなります。

セクションは、ページ内の大きな区切りです。上下の余白や背景色を管理することが多いです。

HTML
<section class="service">
  <div class="service__inner">
    ...
  </div>
</section>

インナーは、コンテンツの最大幅と左右余白を管理する要素です。

CSS
.service__inner {
  width: min(100% - 40px, 1080px);
  margin-inline: auto;
}

コンテナは、カード一覧や2カラムなど、特定のレイアウトを組むために使うことが多いです。

HTML
<div class="service__list">
  <article class="service-card">...</article>
  <article class="service-card">...</article>
  <article class="service-card">...</article>
</div>

役割を分けることで、セクションの余白、コンテンツ幅、内部レイアウトを別々に調整できるようになります。

3-4. 画像・ボタン・カードUIのHTML例

画像、ボタン、カードUIは、レスポンシブ対応でよく使うパーツです。HTMLの時点で、CSSを当てやすい構造にしておきましょう。

画像の例です。

HTML
<figure class="image-box">
  <img src="image.jpg" alt="サービスのイメージ">
</figure>

ボタンの例です。

HTML
<a href="#" class="button">詳しく見る</a>

カードUIの例です。

HTML
<article class="card">
  <figure class="card__image">
    <img src="card.jpg" alt="カードの説明">
  </figure>
  <div class="card__body">
    <h3 class="card__title">カードタイトル</h3>
    <p class="card__text">カードの説明文が入ります。</p>
    <a href="#" class="card__link">詳細を見る</a>
  </div>
</article>

画像部分、本文部分、タイトル、テキスト、リンクを分けておくと、スマホ表示で余白や並びを調整しやすくなります。

3-5. 後からCSSで調整しやすいクラス名の付け方

レスポンシブコーディングでは、クラス名の付け方も重要です。見た目だけに依存したクラス名にすると、レイアウト変更時に意味が合わなくなることがあります。

たとえば、以下のようなクラス名は注意が必要です。

HTML
<div class="left-box">...</div>
<div class="right-box">...</div>

PCでは左・右でも、スマホでは上下に並ぶ可能性があります。その場合、left-boxやright-boxという名前は実態と合わなくなります。

代わりに、役割で名前を付けると保守しやすくなります。

HTML
<div class="media__image">...</div>
<div class="media__body">...</div>

クラス名は、配置ではなく役割で付けるのが基本です。これにより、画面幅によってレイアウトが変わっても、HTMLの意味が崩れにくくなります。

4. レスポンシブ対応に必要なCSSの書き方

4-1. メディアクエリの基本構文

メディアクエリは、画面幅などの条件に応じてCSSを切り替えるための記述です。

基本構文は以下です。

CSS
@media screen and (max-width: 768px) {
  .title {
    font-size: 24px;
  }
}

このコードは、画面幅が768px以下のときに.titleの文字サイズを24pxにする指定です。

PCファーストの場合は、通常スタイルをPC向けに書き、狭い画面幅に向けてmax-widthで上書きします。

CSS
.title {
  font-size: 40px;
}

@media screen and (max-width: 768px) {
  .title {
    font-size: 28px;
  }
}

モバイルファーストの場合は、通常スタイルをスマホ向けに書き、広い画面幅に向けてmin-widthで上書きします。

CSS
.title {
  font-size: 28px;
}

@media screen and (min-width: 769px) {
  .title {
    font-size: 40px;
  }
}

プロジェクト内でmax-widthとmin-widthを混在させすぎると管理しにくくなるため、基本方針を決めておくことが大切です。

4-2. max-widthとmin-widthの違い

max-widthは「指定した幅以下」のときに適用されます。PCファーストでスマホ用のCSSを追加するときによく使います。

CSS
@media screen and (max-width: 768px) {
  .content {
    padding: 24px;
  }
}

一方、min-widthは「指定した幅以上」のときに適用されます。モバイルファーストでPC用のCSSを追加するときによく使います。

CSS
@media screen and (min-width: 769px) {
  .content {
    padding: 40px;
  }
}

どちらを使うかによって、CSSの読み方が変わります。

PCファーストでは、基本スタイルがPCで、メディアクエリ内がスマホ向けです。モバイルファーストでは、基本スタイルがスマホで、メディアクエリ内がPC向けです。

重要なのは、プロジェクト全体で統一することです。部分的に方針が混在すると、どのCSSがいつ効いているのか分かりにくくなります。

4-3. width・max-width・min-widthの使い分け

レスポンシブコーディングでは、width、max-width、min-widthを適切に使い分けることが重要です。

widthは要素の基本幅を指定します。

CSS
.box {
  width: 100%;
}

max-widthは最大幅を制限します。画面が広くなりすぎても、コンテンツが横に伸びすぎないようにできます。

CSS
.inner {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

min-widthは最小幅を指定します。ただし、スマホ対応では横スクロールの原因になることがあるため、多用しすぎないように注意が必要です。

CSS
.table {
  min-width: 720px;
}

表組みなど、どうしても一定幅が必要な場合は、親要素に横スクロールを許可する実装にします。

CSS
.table-wrapper {
  overflow-x: auto;
}

レスポンシブ対応では、基本的にwidth: 100%とmax-widthを組み合わせ、必要な場面だけmin-widthを使うと安定しやすくなります。

4-4. px・%・rem・vwの使い分け

CSSではさまざまな単位を使えます。レスポンシブコーディングでは、それぞれの特徴を理解して使い分けることが大切です。

pxは固定値です。細かい調整には向いていますが、多用すると画面幅に対応しにくくなります。

CSS
.button {
  border-radius: 8px;
}

%は親要素に対する割合です。横幅の指定に向いています。

CSS
.image {
  width: 100%;
}

remはルートの文字サイズを基準にした単位です。フォントサイズや余白に使うと、全体のスケールを管理しやすくなります。

CSS
.text {
  font-size: 1rem;
  margin-top: 1.5rem;
}

vwは画面幅に対する割合です。画面幅に応じて文字サイズや余白を滑らかに変化させたいときに使えます。

CSS
.title {
  font-size: 5vw;
}

ただし、vwだけで文字サイズを指定すると、大きくなりすぎたり小さくなりすぎたりすることがあります。その場合はclamp()を使うと便利です。

CSS
.title {
  font-size: clamp(28px, 5vw, 48px);
}

この指定なら、最小28px、最大48pxの範囲で、画面幅に応じて文字サイズが変化します。

4-5. display:flexで横並びを切り替える方法

display: flexは、レスポンシブコーディングでよく使うレイアウト方法です。横並び、縦並び、折り返しを簡単に制御できます。

PCでは横並び、スマホでは縦並びにする例です。

CSS
.media {
  display: flex;
  align-items: center;
  gap: 40px;
}

.media__image,
.media__body {
  flex: 1;
}

@media screen and (max-width: 768px) {
  .media {
    flex-direction: column;
    gap: 24px;
  }
}

flex-direction: column;に切り替えることで、スマホでは縦並びになります。

カード一覧など、横並びの要素を折り返したい場合はflex-wrapを使います。

CSS
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  width: calc((100% - 48px) / 3);
}

@media screen and (max-width: 768px) {
  .card {
    width: 100%;
  }
}

Flexboxは1方向のレイアウトに強いため、ナビゲーションや横並びパーツに向いています。

4-6. CSS Gridで複数カラムをレスポンシブ化する方法

CSS Gridは、カード一覧やギャラリーのような複数カラムのレイアウトに向いています。

たとえば、PCで3カラム、スマホで1カラムにする場合は以下のように書けます。

CSS
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media screen and (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

さらに、auto-fitとminmax()を使うと、画面幅に応じて自動的にカラム数を調整できます。

CSS
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

この指定では、各カードの最小幅を240pxに保ちながら、入る数だけ自動で横並びになります。画面幅が狭くなると自然にカラム数が減るため、メディアクエリを減らせます。

4-7. 画像をはみ出させないCSS指定

レスポンシブコーディングでは、画像のはみ出し対策が必須です。基本指定として、以下を入れておきます。

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

max-width: 100%により、画像が親要素より大きくならないようにできます。height: autoを指定することで、画像の縦横比を維持できます。

背景画像を使う場合は、background-size: cover;やbackground-position: center;を使います。

CSS
.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

ただし、背景画像は画像の一部がトリミングされることがあります。重要な文字や人物が含まれる画像では、画面幅ごとの見え方を必ず確認しましょう。

4-8. 文字サイズ・行間・余白を画面幅に合わせる方法

文字サイズ、行間、余白は、レスポンシブ対応で読みやすさに大きく影響します。

PCでは余白を広めに取り、スマホではややコンパクトにするのが基本です。

CSS
.section {
  padding: 80px 0;
}

.section__title {
  font-size: 40px;
  line-height: 1.4;
}

.section__text {
  font-size: 16px;
  line-height: 1.8;
}

@media screen and (max-width: 768px) {
  .section {
    padding: 48px 0;
  }

  .section__title {
    font-size: 28px;
  }

  .section__text {
    font-size: 15px;
    line-height: 1.7;
  }
}

また、clamp()を使えば、画面幅に応じて自然に変化する文字サイズを作れます。

CSS
.section__title {
  font-size: clamp(28px, 4vw, 40px);
}

メディアクエリで段階的に切り替える方法と、clamp()で滑らかに変化させる方法を使い分けると、CSSをシンプルに保ちやすくなります。

5. ブレイクポイントの決め方

5-1. ブレイクポイントとは何か

ブレイクポイントとは、レイアウトやスタイルを切り替える画面幅のことです。

たとえば、画面幅が768px以下になったら横並びを縦並びにする場合、768pxがブレイクポイントになります。

CSS
@media screen and (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
}

ブレイクポイントは、レスポンシブコーディングの中心的な考え方ですが、多ければよいわけではありません。必要以上に増やすと、CSSの上書きが複雑になり、保守しにくくなります。

5-2. よく使われる画面幅の目安

実務でよく使われるブレイクポイントの目安は以下です。

・375px前後：小さめのスマホ
・480px前後：スマホ横幅の調整
・768px前後：スマホとタブレットの境界
・1024px前後：タブレットとPCの境界
・1280px前後：大きめのPC画面

ただし、これらはあくまで目安です。すべての案件で同じ数値を使えばよいわけではありません。

レスポンシブコーディングでは、デバイスの種類よりも、レイアウトが崩れるタイミングを基準にブレイクポイントを決めることが重要です。

5-3. スマホ・タブレット・PC別の設定例

PCファーストで実装する場合の例です。

CSS
/* PC */
.container {
  display: flex;
  gap: 40px;
}

/* タブレット */
@media screen and (max-width: 1024px) {
  .container {
    gap: 24px;
  }
}

/* スマホ */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

モバイルファーストで実装する場合の例です。

CSS
/* スマホ */
.container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* タブレット以上 */
@media screen and (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

/* PC以上 */
@media screen and (min-width: 1024px) {
  .container {
    gap: 40px;
  }
}

どちらの書き方でも問題ありませんが、CSS全体で方針を統一しましょう。

5-4. デバイス基準ではなくレイアウト基準で決める考え方

ブレイクポイントは、特定のデバイス幅に合わせるよりも、レイアウトが崩れる幅で決めるのが理想です。

たとえば、3カラムのカード一覧が900pxで窮屈になるなら、1024pxではなく900px付近で2カラムに切り替えても問題ありません。

重要なのは、ユーザーがどの幅で見ても自然に閲覧できることです。

デバイス基準だけで考えると、想定外の画面幅で余白が不自然になったり、カードが窮屈になったりします。開発者ツールで幅を少しずつ変えながら、どこで見づらくなるかを確認しましょう。

5-5. ブレイクポイントを増やしすぎないコツ

ブレイクポイントを増やしすぎると、CSSが複雑になり、修正時の影響範囲が分かりにくくなります。

ブレイクポイントを増やしすぎないためには、以下を意識します。

・固定幅ではなく相対幅を使う
・FlexboxやGridの自動折り返しを活用する
・clamp()で文字サイズや余白を可変にする
・細かい見た目の差は許容する
・共通パーツ単位で調整する

たとえば、カード一覧はメディアクエリで細かく切り替えるより、以下のように自動調整にするとシンプルです。

CSS
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

画面幅に応じて自然にカラム数が変わるため、ブレイクポイントを減らせます。

5-6. 実務で使いやすいブレイクポイント管理方法

実務では、ブレイクポイントを変数やSassのmixinで管理すると便利です。

CSSカスタムプロパティではメディアクエリの条件自体には使いにくいため、Sassを使う場合は以下のように管理できます。

SCSS
$breakpoints: (
  "sp": 768px,
  "tab": 1024px,
);

@mixin mq($key) {
  @media screen and (max-width: map-get($breakpoints, $key)) {
    @content;
  }
}

.card-list {
  display: flex;
  gap: 24px;

  @include mq("sp") {
    flex-direction: column;
  }
}

ブレイクポイントを一か所で管理すると、案件ごとの調整がしやすくなります。また、チーム制作でも数値のばらつきを防げます。

6. レスポンシブコーディングの実装手順

6-1. 全体のHTML構造を作る

レスポンシブコーディングでは、まず全体のHTML構造を作ります。最初から細かいCSSを書き込むのではなく、ページ全体のセクション構造を整理することが重要です。

基本構造は以下のようになります。

HTML
<header class="header">...</header>

<main class="main">
  <section class="hero">...</section>
  <section class="service">...</section>
  <section class="works">...</section>
  <section class="contact">...</section>
</main>

<footer class="footer">...</footer>

この段階では、見た目よりも意味のある構造を優先します。後からCSSでレイアウトを調整しやすいように、セクション、インナー、リスト、カードなどの単位を明確にしておきましょう。

6-2. 共通CSSを先に整える

次に、リセットCSSや共通CSSを整えます。レスポンシブ対応では、初期状態で画像やボックスがはみ出さないようにすることが大切です。

CSS
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.7;
  color: #333;
}

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

a {
  color: inherit;
  text-decoration: none;
}

box-sizing: border-box;を指定しておくと、paddingやborderを含めた幅計算になり、レイアウトが管理しやすくなります。

6-3. PCまたはスマホの基準レイアウトを作る

共通CSSを整えたら、PCまたはスマホのどちらかを基準にしてレイアウトを作ります。

PCファーストならPC版の見た目を先に作り、スマホ用の調整を後から追加します。モバイルファーストならスマホ版を先に作り、PC用のレイアウトを後から追加します。

どちらの場合でも、基準レイアウトの時点で固定幅を多用しないことが重要です。

CSS
.inner {
  width: min(100% - 40px, 1080px);
  margin-inline: auto;
}

このようにしておくと、画面幅が狭くなっても自然に左右余白を保ちながら縮小できます。

6-4. メディアクエリで画面幅ごとのCSSを追加する

基準レイアウトができたら、メディアクエリで画面幅ごとの調整を追加します。

CSS
.section {
  padding: 80px 0;
}

@media screen and (max-width: 768px) {
  .section {
    padding: 48px 0;
  }
}

このとき、すべての要素をメディアクエリで書き換えるのではなく、必要な部分だけを上書きします。

たとえば、PCでもスマホでも同じスタイルで問題ない部分は共通CSSに残し、画面幅で変える必要がある部分だけメディアクエリ内に書きます。上書きを少なくするほど、CSSは保守しやすくなります。

6-5. ヘッダー・ナビゲーションをレスポンシブ化する

ヘッダーやナビゲーションは、レスポンシブコーディングで崩れやすいパーツです。PCでは横並びのグローバルナビ、スマホではハンバーガーメニューや縦並びメニューにすることが多いです。

シンプルに横並びを縦並びに変える例です。

CSS
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__nav-list {
  display: flex;
  gap: 24px;
}

@media screen and (max-width: 768px) {
  .header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .header__nav-list {
    flex-direction: column;
    gap: 12px;
  }
}

メニューを開閉する場合はJavaScriptが必要になることもありますが、レイアウト自体はCSSで管理します。

6-6. メインビジュアルをレスポンシブ化する

メインビジュアルは、画面幅によって見え方が大きく変わる部分です。画像を使う場合は、はみ出しとトリミングに注意します。

CSS
.hero {
  padding: 100px 0;
}

.hero__inner {
  width: min(100% - 40px, 1080px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 48px;
}

.hero__text,
.hero__image {
  flex: 1;
}

@media screen and (max-width: 768px) {
  .hero {
    padding: 64px 0;
  }

  .hero__inner {
    flex-direction: column;
    gap: 32px;
  }
}

メインビジュアルでは、タイトルの文字サイズも画面幅に合わせて調整しましょう。

CSS
.hero__title {
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.3;
}

6-7. カード・一覧・2カラムレイアウトをレスポンシブ化する

カード一覧や2カラムレイアウトは、レスポンシブコーディングで頻繁に登場します。

カード一覧はCSS Gridを使うと便利です。

CSS
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media screen and (max-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}

2カラムレイアウトはFlexboxで実装できます。

CSS
.two-column {
  display: flex;
  gap: 40px;
}

.two-column__main {
  flex: 1;
}

.two-column__side {
  width: 300px;
}

@media screen and (max-width: 768px) {
  .two-column {
    flex-direction: column;
  }

  .two-column__side {
    width: 100%;
  }
}

サイドバーに固定幅を指定する場合でも、スマホではwidth: 100%に切り替えることが大切です。

6-8. フッターをレスポンシブ化する

フッターはリンク数が多くなりやすいため、スマホで詰まりすぎないように注意します。

CSS
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.footer__nav {
  display: flex;
  gap: 24px;
}

@media screen and (max-width: 768px) {
  .footer__inner {
    flex-direction: column;
    gap: 24px;
  }

  .footer__nav {
    flex-direction: column;
    gap: 12px;
  }
}

スマホでは、リンク同士の間隔を十分に取り、タップしやすくすることが重要です。見た目を小さくまとめすぎると、ユーザーが操作しにくくなります。

6-9. 実機・開発者ツールで表示確認する

実装が完了したら、Chrome開発者ツールと実機で表示確認を行います。

確認時は、代表的な画面幅だけでなく、幅を少しずつ変えながら崩れる箇所がないか確認しましょう。

見るべきポイントは以下です。

・横スクロールが出ていないか
・画像がはみ出していないか
・文字が読みにくくないか
・ボタンが押しやすいサイズか
・ナビゲーションが使いやすいか
・余白が広すぎたり狭すぎたりしないか
・カードやカラムの並びが自然か
・フォームが入力しやすいか

レスポンシブコーディングは、コードを書いて終わりではありません。確認と調整まで含めて実装作業です。

7. よく使うレスポンシブコーディング実装例

7-1. 横並びをスマホで縦並びにするコード

PCでは横並び、スマホでは縦並びにする基本コードです。

HTML
<div class="media">
  <div class="media__image">
    <img src="image.jpg" alt="">
  </div>
  <div class="media__body">
    <h2>タイトル</h2>
    <p>テキストが入ります。</p>
  </div>
</div>

CSS
.media {
  display: flex;
  align-items: center;
  gap: 40px;
}

.media__image,
.media__body {
  flex: 1;
}

@media screen and (max-width: 768px) {
  .media {
    flex-direction: column;
    gap: 24px;
  }
}

flex-directionを切り替えるだけで、シンプルにレスポンシブ対応できます。

7-2. 画像を画面幅に合わせて縮小するコード

画像を親要素の幅に合わせて縮小するには、以下の指定を使います。

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

個別の画像に指定する場合は以下です。

CSS
.image-box img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

画像を横幅いっぱいに表示したい場合はwidth: 100%を指定し、縦横比を維持したい場合はheight: autoを指定します。

7-3. 2カラムを1カラムに切り替えるコード

PCで2カラム、スマホで1カラムにするコードです。

CSS
.layout {
  display: flex;
  gap: 40px;
}

.layout__main {
  flex: 1;
}

.layout__side {
  width: 300px;
}

@media screen and (max-width: 768px) {
  .layout {
    flex-direction: column;
  }

  .layout__side {
    width: 100%;
  }
}

サイドバーに固定幅を指定している場合、スマホでwidth: 100%に戻すことを忘れないようにしましょう。

7-4. カードレイアウトのレスポンシブ対応コード

カードレイアウトは、CSS Gridを使うと簡潔に実装できます。

HTML
<div class="card-list">
  <article class="card">カード1</article>
  <article class="card">カード2</article>
  <article class="card">カード3</article>
</div>

CSS
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.card {
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

auto-fitとminmax()を使えば、画面幅に合わせて自動的にカラム数が変わります。ブレイクポイントを細かく書かなくても、自然にレスポンシブ化できます。

7-5. グローバルナビをスマホ表示に切り替えるコード

グローバルナビをスマホで縦並びにする基本例です。

HTML
<header class="header">
  <div class="header__inner">
    <h1 class="header__logo">LOGO</h1>
    <nav class="header__nav">
      <ul class="header__nav-list">
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">実績</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__nav-list {
  display: flex;
  gap: 24px;
  list-style: none;
}

@media screen and (max-width: 768px) {
  .header__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .header__nav-list {
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }
}

開閉式のハンバーガーメニューにする場合は、ボタンのクリック処理にJavaScriptを使います。ただし、横並びから縦並びへの切り替え自体はCSSで対応できます。

7-6. フォントサイズを画面幅で調整するコード

フォントサイズを画面幅に合わせて調整する方法です。

メディアクエリで切り替える例です。

CSS
.title {
  font-size: 40px;
}

@media screen and (max-width: 768px) {
  .title {
    font-size: 28px;
  }
}

clamp()を使って滑らかに変化させる例です。

CSS
.title {
  font-size: clamp(28px, 4vw, 40px);
}

clamp()は、最小値、可変値、最大値を指定できます。レスポンシブコーディングで文字サイズを自然に調整したいときに便利です。

7-7. 余白を画面幅ごとに変えるコード

余白は画面幅に合わせて調整する必要があります。PCでは広め、スマホでは狭めにするのが基本です。

CSS
.section {
  padding: 80px 0;
}

@media screen and (max-width: 768px) {
  .section {
    padding: 48px 0;
  }
}

左右の余白は、インナー幅で管理すると便利です。

CSS
.inner {
  width: min(100% - 40px, 1080px);
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .inner {
    width: min(100% - 32px, 1080px);
  }
}

画面幅が狭いスマホでは、左右余白を取りすぎると本文の表示幅が狭くなるため注意しましょう。

8. レスポンシブで崩れる原因と直し方

8-1. 横スクロールが出る原因と対処法

スマホ表示で横スクロールが出る原因の多くは、親要素より大きい固定幅の要素があることです。

よくある原因は以下です。

・width: 1000pxのような固定幅
・画像にmax-width: 100%が指定されていない
・min-widthが大きすぎる
・余白やgapを含めた幅が100%を超えている
・長いURLや英単語が折り返されていない
・position指定した要素が画面外にはみ出している

対処法としては、まず横にはみ出している要素を特定します。Chrome開発者ツールで要素を確認し、固定幅や大きすぎる余白がないか見直しましょう。

基本的な対処コードです。

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

* {
  box-sizing: border-box;
}

.long-text {
  overflow-wrap: anywhere;
}

一時的に以下のCSSを入れて、はみ出し要素を探す方法もあります。

CSS
* {
  outline: 1px solid red;
}

本番用ではなく、確認用として使いましょう。

8-2. 画像がはみ出す原因と対処法

画像がはみ出す主な原因は、画像の元サイズが親要素より大きく、縮小指定がされていないことです。

対処法は、全体に以下のCSSを指定することです。

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

また、カード内の画像を一定比率で表示したい場合は、aspect-ratioとobject-fitを使います。

CSS
.card__image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

この指定により、画像の表示領域を一定比率に保ちながら、余分な部分をトリミングできます。

8-3. 文字が折り返されない原因と対処法

長い英単語、URL、連続した数字などは、通常のテキストと違って折り返されにくい場合があります。その結果、スマホで横スクロールが発生することがあります。

対処法は以下です。

CSS
.text {
  overflow-wrap: break-word;
}

より強く折り返したい場合は、以下を使います。

CSS
.text {
  overflow-wrap: anywhere;
}

見出しやボタン内のテキストでも、想定より長い文言が入ると崩れることがあります。固定幅やwhite-space: nowrap;を指定している場合は注意しましょう。

8-4. 横並びレイアウトが崩れる原因と対処法

横並びレイアウトが崩れる原因は、要素の合計幅が親要素を超えていることが多いです。

たとえば、以下のような指定は注意が必要です。

CSS
.item {
  width: 33.333%;
  margin-right: 24px;
}

幅に加えて余白があるため、合計幅が100%を超える可能性があります。

FlexboxやGridのgapを使うと、余白管理がしやすくなります。

CSS
.list {
  display: flex;
  gap: 24px;
}

.item {
  flex: 1;
}

@media screen and (max-width: 768px) {
  .list {
    flex-direction: column;
  }
}

複数カラムでは、CSS Gridの使用もおすすめです。

CSS
.list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

8-5. 高さ固定で崩れる原因と対処法

高さ固定は、レスポンシブコーディングで崩れやすい原因のひとつです。

CSS
.card {
  height: 300px;
}

このように高さを固定すると、テキストが増えたときやスマホで改行が増えたときに、内容がはみ出すことがあります。

基本的には、高さを固定するのではなく、min-heightを使います。

CSS
.card {
  min-height: 300px;
}

画像など、比率を保ちたい場合はaspect-ratioを使うと便利です。

CSS
.thumbnail {
  aspect-ratio: 16 / 9;
}

高さを固定する必要がある場合でも、画面幅やコンテンツ量が変わったときに問題がないか確認しましょう。

8-6. position指定で崩れる原因と対処法

position: absolute;を使うと、要素を自由に配置できますが、レスポンシブでは崩れの原因になりやすいです。

特に、PC幅に合わせてtopやleftを固定値で指定している場合、スマホで画面外にはみ出すことがあります。

CSS
.badge {
  position: absolute;
  top: 40px;
  right: -80px;
}

このような指定は、画面幅が変わったときに崩れやすくなります。

対処法として、スマホでは位置指定を解除することがあります。

CSS
@media screen and (max-width: 768px) {
  .badge {
    position: static;
  }
}

装飾目的の配置であれば、疑似要素や背景画像で代替できないか検討しましょう。重要なコンテンツを絶対配置に頼りすぎると、レスポンシブ対応が難しくなります。

8-7. 余白が大きすぎる・狭すぎる場合の調整方法

PCでは適切に見える余白でも、スマホでは広すぎることがあります。逆に、スマホで詰めすぎると、読みづらく操作しにくい画面になります。

余白は、画面幅ごとにルールを決めて調整しましょう。

CSS
.section {
  padding-block: 80px;
}

@media screen and (max-width: 768px) {
  .section {
    padding-block: 48px;
  }
}

要素間の余白も同様です。

CSS
.content {
  display: grid;
  gap: 32px;
}

@media screen and (max-width: 768px) {
  .content {
    gap: 20px;
  }
}

余白は感覚で調整するとページごとにばらつきが出やすいため、共通ルールを作っておくと保守しやすくなります。

9. レスポンシブコーディングの確認・テスト方法

9-1. Chrome開発者ツールで確認する方法

Chrome開発者ツールを使うと、さまざまな画面幅で表示を確認できます。

確認手順は以下です。

1. Chromeでページを開く

2. 右クリックして「検証」を選択する

3. デバイスツールバーを表示する

4. 画面幅を変更しながら表示を確認する

デバイスプリセットだけでなく、幅を手動でドラッグして確認することが大切です。レスポンシブの崩れは、特定の端末幅ではなく、中間の画面幅で起きることが多いためです。

9-2. 実機確認で見るべきポイント

開発者ツールだけでは、実際の操作感までは完全に確認できません。スマホやタブレットの実機でも確認しましょう。

実機確認で見るべきポイントは以下です。

・文字が読みやすいか
・ボタンやリンクが押しやすいか
・メニューが操作しやすいか
・フォーム入力がしやすいか
・画像の見切れが不自然でないか
・スクロール時に引っかかりがないか
・固定ヘッダーがコンテンツを隠していないか

特にスマホでは、見た目だけでなく「指で操作しやすいか」が重要です。

9-3. iPhone・Android・タブレットで確認すべき画面幅

実務では、すべての端末を用意するのは難しいため、代表的な画面幅で確認します。

目安としては、以下のような幅を確認するとよいでしょう。

・320px：小さめのスマホ
・375px：一般的なスマホ
・390px〜430px：大きめのスマホ
・768px：タブレット縦向き
・1024px：タブレット横向き、小さめPC
・1280px以上：PC

ただし、最も重要なのは、これらの固定幅だけでなく、幅を連続的に変えながら確認することです。中間幅で崩れていないかを見ることで、より安定したレスポンシブコーディングになります。

9-4. 横向き表示の確認

スマホやタブレットは、縦向きだけでなく横向きでも閲覧される可能性があります。

横向き表示では、画面幅は広くなりますが、高さが低くなるため、メインビジュアルや固定ヘッダーが画面を圧迫することがあります。

確認すべきポイントは以下です。

・ファーストビューが詰まりすぎていないか
・固定ヘッダーが高すぎないか
・メニューが画面内に収まるか
・モーダルやポップアップが見切れていないか
・フォーム入力時に表示が崩れないか

高さ固定を多用している場合、横向き表示で崩れやすいため注意しましょう。

9-5. ブラウザ差分の確認

ブラウザによって、CSSの解釈やフォーム部品の見た目に差が出ることがあります。Chromeだけでなく、Safari、Firefox、Edgeなどでも確認すると安心です。

特に確認したいのは以下です。

・iPhoneのSafariで表示が崩れていないか
・AndroidのChromeで余白や文字サイズが適切か
・フォーム部品の見た目に大きな差がないか
・position: sticky;などの挙動が問題ないか
・画像や動画の表示が崩れていないか

CSSの新しい機能を使う場合は、対応ブラウザも確認しておきましょう。

9-6. 公開前チェックリスト

レスポンシブコーディングの公開前には、以下を確認しましょう。

・スマホで横スクロールが出ていない
・画像が親要素からはみ出していない
・文字サイズが読みやすい
・行間が詰まりすぎていない
・ボタンやリンクが押しやすい
・ナビゲーションが正常に使える
・2カラムやカード一覧が自然に切り替わる
・フォームが入力しやすい
・タブレット幅でも崩れていない
・横向き表示でも問題ない
・主要ブラウザで表示確認済み
・デザインカンプと大きな差がない
・不要なメディアクエリや重複CSSがない

公開前にまとめて確認するだけでなく、実装途中でもこまめに確認することが重要です。

10. レスポンシブコーディングを効率化するコツ

10-1. 共通パーツを先に設計する

レスポンシブコーディングを効率化するには、ボタン、カード、見出し、インナー、セクションなどの共通パーツを先に設計しておくことが大切です。

共通パーツが整っていれば、ページごとに同じようなCSSを書く必要がなくなります。

CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

共通化できる部分を増やすことで、レスポンシブ対応の修正も少なくなります。

10-2. CSSの上書きを最小限にする

レスポンシブ対応では、メディアクエリ内の上書きを最小限にすることが重要です。

悪い例は、スマホ用に多くのプロパティを再指定することです。

CSS
@media screen and (max-width: 768px) {
  .card {
    display: flex;
    color: #333;
    background: #fff;
    border-radius: 12px;
    flex-direction: column;
  }
}

スマホで変えたいのがflex-directionだけなら、それだけを書きます。

CSS
@media screen and (max-width: 768px) {
  .card {
    flex-direction: column;
  }
}

上書きが少ないCSSは、読みやすく、修正もしやすくなります。

10-3. 変数・カスタムプロパティで管理する

色、余白、フォントサイズなどはCSSカスタムプロパティで管理すると便利です。

CSS
:root {
  --color-text: #333;
  --color-main: #0066cc;
  --space-section-pc: 80px;
  --space-section-sp: 48px;
  --inner-width: 1080px;
}

使用例です。

CSS
.section {
  padding-block: var(--space-section-pc);
}

.inner {
  max-width: var(--inner-width);
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .section {
    padding-block: var(--space-section-sp);
  }
}

変数化しておくと、サイト全体の余白や色を変更するときに一括で管理できます。

10-4. Sassを使ったブレイクポイント管理

Sassを使うと、ブレイクポイントをmixinで管理できます。

SCSS
$breakpoint-sp: 768px;
$breakpoint-tab: 1024px;

@mixin sp {
  @media screen and (max-width: $breakpoint-sp) {
    @content;
  }
}

@mixin tab {
  @media screen and (max-width: $breakpoint-tab) {
    @content;
  }
}

使用例です。

SCSS
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;

  @include tab {
    grid-template-columns: repeat(2, 1fr);
  }

  @include sp {
    grid-template-columns: 1fr;
  }
}

ブレイクポイントの数値を一か所で管理できるため、実務では非常に便利です。

10-5. コンポーネント単位でレスポンシブ対応する

ページ全体でレスポンシブ対応を考えるのではなく、コンポーネント単位で考えると管理しやすくなります。

たとえば、カード、メディアブロック、ナビゲーション、フッターなど、それぞれのパーツごとにレスポンシブ対応を完結させます。

CSS
.media {
  display: flex;
  gap: 40px;
}

@media screen and (max-width: 768px) {
  .media {
    flex-direction: column;
    gap: 24px;
  }
}

このようにパーツ単位で完結していれば、別ページで同じコンポーネントを使っても崩れにくくなります。

10-6. 保守しやすいCSSを書くポイント

保守しやすいレスポンシブCSSを書くには、以下を意識しましょう。

・クラス名は役割で付ける
・固定幅と固定高さを多用しない
・共通スタイルと個別スタイルを分ける
・メディアクエリの方針を統一する
・上書きは最小限にする
・余白や色は変数で管理する
・不要なネストを避ける
・コンポーネント単位でCSSを書く

レスポンシブコーディングは、公開後の修正や運用も考えて書くことが大切です。今だけ動くCSSではなく、後から見ても理解しやすいCSSを目指しましょう。

11. レスポンシブコーディングで初心者が注意すべきこと

11-1. 最初から完璧なブレイクポイントを決めすぎない

初心者がやりがちなのは、最初にブレイクポイントを細かく決めすぎることです。

もちろん目安は必要ですが、実際にはコーディングしながらレイアウトが崩れる幅を見て調整することが多いです。

最初は、768pxや1024pxなどの基本的なブレイクポイントだけを決めておき、必要に応じて追加する考え方で十分です。

11-2. 固定幅を多用しない

固定幅は、レスポンシブ対応で崩れの原因になりやすいです。

CSS
.box {
  width: 1000px;
}

このような指定は、スマホ画面では確実にはみ出します。

代わりに、以下のように書きます。

CSS
.box {
  width: 100%;
  max-width: 1000px;
}

画面幅に応じて縮小できるようにすることが、レスポンシブコーディングの基本です。

11-3. 高さを固定しすぎない

高さ固定も、レスポンシブでは注意が必要です。スマホではテキストの折り返しが増えるため、PCでは収まっていた文章がはみ出すことがあります。

CSS
.card {
  height: 240px;
}

必要であれば、heightではなくmin-heightを使いましょう。

CSS
.card {
  min-height: 240px;
}

コンテンツ量が変わっても自然に高さが伸びる設計にすることが大切です。

11-4. メディアクエリだけに頼らない

レスポンシブ対応というと、メディアクエリをたくさん書くイメージがあるかもしれません。しかし、すべてをメディアクエリで制御するとCSSが複雑になります。

以下のようなCSSを使えば、メディアクエリを減らせます。

CSS
.inner {
  width: min(100% - 40px, 1080px);
}

.title {
  font-size: clamp(28px, 4vw, 40px);
}

.card-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

可変にできる部分はCSSの機能で自然に調整し、必要な部分だけメディアクエリで切り替えるのが理想です。

11-5. デザインカンプ通りにしすぎて可変性を失わない

デザインカンプを正確に再現することは大切ですが、ピクセル単位で固定しすぎると、レスポンシブ対応が難しくなります。

Webサイトは紙のデザインと違い、画面幅や文字量、ブラウザ環境によって見え方が変わります。そのため、カンプ通りの固定値をそのまま使うのではなく、可変にできる部分は柔軟に設計することが重要です。

特に余白、画像、テキストエリア、カードの高さは、画面幅に合わせて変化できるようにしましょう。

11-6. 表示確認を後回しにしない

レスポンシブコーディングでは、最後にまとめて確認するのではなく、実装しながらこまめに確認することが大切です。

早い段階で崩れに気づけば、修正も簡単です。しかし、ページ全体を作り終えた後に崩れを直そうとすると、多くのCSSを上書きする必要が出てきます。

1セクション作るごとに、PC、タブレット、スマホ幅で確認する習慣をつけましょう。

12. レスポンシブコーディングに関するよくある質問

12-1. レスポンシブコーディングはHTMLとCSSだけでできますか？

基本的なレスポンシブコーディングは、HTMLとCSSだけでできます。レイアウトの切り替え、画像サイズの調整、文字サイズや余白の変更はCSSで対応可能です。

ただし、スマホ用のハンバーガーメニュー、スライダー、アコーディオンなど、ユーザー操作によって表示を切り替える機能にはJavaScriptが必要になることがあります。

まずはHTMLとCSSで崩れないレイアウトを作り、必要な機能だけJavaScriptを追加するのが基本です。

12-2. ブレイクポイントはいくつ設定すればよいですか？

ブレイクポイントの数に決まりはありませんが、初心者は2〜3個程度から始めると管理しやすいです。

たとえば、以下のような設定です。

・768px：スマホ用
・1024px：タブレット用
・1280px：大きなPC用

ただし、実際にはデバイス幅ではなく、レイアウトが崩れる幅を基準に調整します。ブレイクポイントを増やしすぎるとCSSが複雑になるため、必要最小限にすることが大切です。

12-3. PCファーストとモバイルファーストはどちらがよいですか？

どちらが必ず正しいということはありません。

スマホユーザーが多いサイトや、シンプルなレイアウトからPC向けに拡張する場合は、モバイルファーストが向いています。一方、PC版のデザインが複雑で、PC表示の再現を重視する案件では、PCファーストのほうが進めやすい場合があります。

重要なのは、プロジェクト内で方針を統一することです。max-widthとmin-widthを混在させすぎると、CSSの管理が難しくなります。

12-4. スマホで横スクロールが出る原因は何ですか？

スマホで横スクロールが出る主な原因は、画面幅より大きい要素があることです。

よくある原因は以下です。

・固定幅の要素がある
・画像が親要素からはみ出している
・長い文字列が折り返されていない
・min-widthが大きすぎる
・余白やgapを含めた幅が100%を超えている
・絶対配置の要素が画面外にはみ出している

まずは開発者ツールで、どの要素がはみ出しているか確認しましょう。そのうえで、max-width: 100%、overflow-wrap、width: 100%などを使って調整します。

12-5. レスポンシブ対応にJavaScriptは必要ですか？

レイアウトのレスポンシブ対応だけであれば、基本的にJavaScriptは不要です。HTMLとCSSで対応できます。

ただし、以下のような機能にはJavaScriptを使うことがあります。

・ハンバーガーメニューの開閉
・アコーディオンの開閉
・スライダー
・モーダル
・タブ切り替え

JavaScriptは表示の制御に使い、基本のレイアウトやサイズ調整はCSSで行うと、保守しやすい実装になります。

12-6. 初心者はどの順番で学べばよいですか？

初心者は、以下の順番で学ぶと理解しやすいです。

1. HTMLの基本構造

2. CSSの基本

3. width、max-width、padding、marginの使い方

4. Flexbox

5. CSS Grid

6. メディアクエリ

7. 画像のレスポンシブ対応

8. ブレイクポイントの考え方

9. 実機確認と修正方法

最初から複雑なレイアウトに挑戦するより、横並びを縦並びにする、画像をはみ出させない、カードを1カラムに切り替えるといった基本パターンを繰り返し練習するのがおすすめです。

まとめ

レスポンシブコーディングは、PC・タブレット・スマホなど、さまざまな画面幅でWebサイトを見やすく表示するために欠かせない実装です。

重要なのは、単にメディアクエリを書くことではありません。崩れにくいHTML構造を作り、固定幅や固定高さを避け、画像や文字、余白を画面幅に合わせて調整できるCSS設計を行うことが大切です。

レスポンシブ対応では、以下のポイントを意識しましょう。

・HTML構造はシンプルにする
・固定幅ではなくwidth: 100%やmax-widthを活用する
・画像にはmax-width: 100%とheight: autoを指定する
・FlexboxやGridで柔軟なレイアウトを作る
・ブレイクポイントはレイアウト基準で決める
・メディアクエリの上書きは最小限にする
・実機と開発者ツールでこまめに確認する

レスポンシブコーディングを身につけると、どのデバイスでも崩れにくく、使いやすいWebサイトを作れるようになります。まずは基本のHTML・CSSを丁寧に書き、画面幅を変えながら確認する習慣をつけることから始めましょう。