レスポンシブデザインとは

同じ HTML を、画面の幅に応じて見た目やレイアウトを変えて表示する設計の考え方。

概要

同じ 1 つの HTML を使いながら、画面の幅（スマホ・タブレット・パソコンなど）に応じて文字の大きさやレイアウトを変えて表示する設計の考え方です。CSS の「メディアクエリ」という機能で、「幅が何 px 以下ならこの見た目にする」という条件を指定して切り替えます。この幅の境目のことを「ブレイクポイント」と呼びます。

別名

表記ゆれ：レスポンシブデザイン、ブレイクポイント、モバイル対応、responsive design

「ブレイクポイント」はレスポンシブデザインを構成する要素（切り替えの境目）を指す言葉で、レスポンシブデザイン全体を指す言葉ではない点に注意してください。

AI への伝え方

「レスポンシブデザインにして」「スマホ対応して」で通じます。何 px を境目にするか（例：768px 未満はスマホ）はプロジェクトによって異なるため、既存のブレイクポイントがあれば「768px を境目にして」のように具体的な数値を伝えると仕様がぶれません。列の数がいくつからいくつに変わるかも合わせて伝えると安全です。

似たパーツとの違い

特定の部品ではなく、ページ全体・サイト全体に関わる設計の考え方です。「2 カラムレイアウト」の「狭い画面では 1 カラムに切り替える」といった個別の対応も、このレスポンシブデザインという考え方の具体例の一つです。

デモ

コード

HTML

<div class="responsive-demo">
  <p class="responsive-demo__note">
    ブラウザの幅を変えて確認してください。幅が広いと 3 列、狭くなると 1 列に自動で切り替わります。
  </p>
  <div class="responsive-demo__grid">
    <div class="responsive-demo__item">1</div>
    <div class="responsive-demo__item">2</div>
    <div class="responsive-demo__item">3</div>
  </div>
</div>

CSS

.responsive-demo {
  box-sizing: border-box;
  width: 100%;
  font-family: sans-serif;
}

.responsive-demo__note {
  margin: 0 0 16px;
  font-size: 13px;
  color: #666;
  line-height: 1.7;
}

.responsive-demo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.responsive-demo__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  border-radius: 8px;
  background: #0017c1;
  color: #fff;
  font-size: 20px;
}

/* 同じ HTML のまま、幅が狭くなると 1 カラムに切り替わる */
@media (max-width: 600px) {
  .responsive-demo__grid {
    grid-template-columns: 1fr;
  }
}