レスポンシブとは？2026年版｜CSSの書き方・ブレイクポイント・最新の実装方法

Webサイトを制作するとき、ほぼ必須になっているのが「レスポンシブ対応」です。

レスポンシブとは、PC・スマートフォン・タブレットなど、画面の大きさに合わせてWebページのレイアウトや文字、画像などを見やすい状態へ変化させる仕組みを指します。

以前は「PC版とスマホ版をブレイクポイントで切り替える」という考え方が中心でした。
しかし2026年現在は、CSS GridやFlexbox、min()、clamp()、Container Queryなどを組み合わせ、できるだけ自然に伸縮させ、必要な場所だけレイアウトを切り替える設計が使いやすくなっています。

この記事では、レスポンシブWebデザインの意味から、CSSによる具体的な実装方法、ブレイクポイント、@mediaと@containerの違い、画像・table・iframeへの対応、SEOとの関係まで、2026年の実務を前提に解説します。

レスポンシブとは

レスポンシブとは、英語の「responsive（反応する・応答する）」に由来する言葉です。

Web制作で「レスポンシブ」と言う場合は、一般的にレスポンシブWebデザイン（Responsive Web Design）を指します。

たとえば同じWebページでも、画面の広さに合わせて次のように表示を変更します。

• PCではメインコンテンツとサイドバーを横並びにする
• スマートフォンでは1カラムに変更する
• 画面幅に合わせて余白を小さくする
• 文字サイズを読みやすい大きさへ調整する
• 画像を画面からはみ出さないサイズにする
• ナビゲーションをスマートフォン向けに変更する

基本的にはPC用とスマートフォン用で別々のHTMLを用意するのではなく、同じHTMLをCSSによって柔軟に表示するのがレスポンシブWebデザインです。

レスポンシブ対応とは

レスポンシブ対応とは、Webサイトをさまざまな画面サイズで適切に閲覧できるようにすることです。

ただし、単純に「スマートフォンで横スクロールが発生しなければよい」というものではありません。

実際には、次のような要素を利用できる表示領域に合わせて調整します。

• コンテンツ幅
• カラム数
• 文字サイズ
• 余白
• 画像サイズ
• ナビゲーション
• 表（table）
• 動画やiframe
• ボタンサイズ
• タップできる領域

2026年のレスポンシブデザインは何が変わった？

レスポンシブWebデザイン自体が新しい技術になったわけではありません。

大きく変化しているのは、レスポンシブCSSの実装方法です。

以前は、次のように画面幅ごとのMedia Queryを複数用意する方法もよく使われていました。

@media (max-width: 1200px) {
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
}

@media (max-width: 480px) {
}

@media (max-width: 375px) {
}

現在は、最初から大量のブレイクポイントを作るのではなく、まずCSS自体を画面幅に合わせて自然に伸縮させます。

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

文字サイズや余白にも、clamp()を利用できます。

.title {
  font-size: clamp(2rem, 1.4rem + 2vw, 4rem);
}

レスポンシブCSSの基本的な作り方

1．viewportを設定する

まずHTMLのhead内にviewportを設定します。

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

width=device-widthを指定することで、CSS上のviewport幅を端末の表示領域に合わせます。

現在のレスポンシブWeb制作では、基本となる設定です。

---

2．モバイルファーストでCSSを書く

レスポンシブCSSでは、まず狭い画面向けのスタイルを設定し、画面が広くなった場合にレイアウトを拡張するモバイルファーストの考え方があります。

.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (width >= 768px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

この場合、768px未満では縦並び、768px以上になると画像とテキストが横並びになります。

---

3．横幅を固定せずFluidにする

次のように横幅を完全に固定すると、小さい画面でコンテンツがはみ出す可能性があります。

.inner {
  width: 1200px;
}

そこで、min()やパーセントを利用して、画面幅に合わせて自然に縮むようにします。

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

画面が狭いときは「画面幅 − 40px」、広いときは最大1200pxになります。

このように、ブレイクポイントを使わなくても対応できる部分は、まずFluidなCSSで解決するのがポイントです。

CSS Gridでブレイクポイントを減らす

カード一覧などでは、CSS Gridを使うことでMedia Queryを書かずにレスポンシブ対応できる場合があります。

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

auto-fitとminmax()を組み合わせることで、利用できる横幅に何列入るかをCSS側で判断できます。

たとえば、横幅に余裕があれば3列で表示し、画面が狭くなれば2列、1列へと自然に変化します。

レスポンシブのフォントサイズにはclamp()を使う

文字サイズについても、PC用とスマートフォン用に2種類のサイズを用意する必要がないケースがあります。

.heading {
  font-size:
    clamp(
      2rem,
      1.4rem + 2vw,
      4rem
    );
}

この指定では、文字サイズが最小2remから最大4remの範囲で、viewport幅に合わせて滑らかに変化します。

clamp()は余白にも利用できます。

.section {
  padding-block:
    clamp(64px, 10vw, 160px);
}

.inner {
  padding-inline:
    clamp(20px, 4vw, 60px);
}

PC・タブレット・スマートフォンごとに細かく余白を切り替えるのではなく、画面の大きさに合わせて自然に変化させられます。

レスポンシブのブレイクポイントは何pxが正解？

レスポンシブ対応でよく迷うのが、ブレイクポイントを何pxに設定するかです。

たとえば、次のようなサイズが基準として使われることがあります。

• 480px
• 768px
• 1024px
• 1280px

ただし、すべてのWebサイトに共通する正解のブレイクポイントはありません。

「iPadだから768px」「スマートフォンだから480px」と端末名だけで決めるのではなく、コンテンツやレイアウトが窮屈になる地点を基準に决める方が柔軟です。

.layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (width >= 64rem) {
  .layout {
    grid-template-columns:
      minmax(0, 1fr) 300px;
  }
}

この例では、サイドバーを横に配置しても十分なスペースが確保できる地点で2カラムに切り替えます。

Media Queryのrange構文

従来は、次のような書き方が一般的でした。

@media (min-width: 768px) {
}

現在は、次のようなrange構文も利用できます。

@media (width >= 768px) {
}

特定の範囲だけ指定することもできます。

@media (768px <= width < 1200px) {
}

条件をそのまま読めるため、ブレイクポイントの意図を把握しやすい書き方です。

@mediaと@containerの違い

2026年のレスポンシブ対応で知っておきたいのが、Container Queryです。

Media Queryでは、主にブラウザのviewport幅を基準にスタイルを切り替えます。

@media (width >= 768px) {
}

一方、Container Queryでは、そのコンポーネントが配置されている親要素のサイズを基準にスタイルを変更できます。

.card-container {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 20px;
}

@container (width >= 500px) {
  .card {
    grid-template-columns:
      180px 1fr;
  }
}

たとえば同じカードを、800px幅のメインコンテンツと350px幅のサイドバーの両方で使用するとします。

Media Queryではブラウザ幅が同じであれば、基本的に両方へ同じ条件が適用されます。

Container Queryなら、カードが実際に利用できる幅を基準に、縦並び・横並びを変更できます。

ヘッダーやメイン＋サイドバーなど、viewport全体の広さによって構成を変更したい場合はMedia Queryが向いています。

カード、CTA、記事パーツ、商品情報など、配置される場所によって利用できる幅が変化する部品にはContainer Queryが向いています。

2026年のレスポンシブCSSの基本形

ここまでの内容を組み合わせると、次のような設計が考えられます。

:root {
  --content-width: 1200px;
  --side-space:
    clamp(20px, 4vw, 64px);
  --section-space:
    clamp(64px, 8vw, 140px);
}

/* コンテンツ幅 */

.l-inner {
  width:
    min(
      calc(100% - var(--side-space) * 2),
      var(--content-width)
    );
  margin-inline: auto;
}

/* セクション */

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

/* カード一覧 */

.p-card-list {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(280px, 100%), 1fr)
    );
  gap:
    clamp(20px, 3vw, 40px);
}

/* ページ全体 */

.l-page {
  display: grid;
  gap: 40px;
}

@media (width >= 1024px) {
  .l-page {
    grid-template-columns:
      minmax(0, 1fr) 320px;
  }
}

/* コンポーネント */

.p-card-wrap {
  container-type: inline-size;
}

.p-card {
  display: grid;
  gap: 20px;
}

@container (width >= 500px) {
  .p-card {
    grid-template-columns:
      180px 1fr;
  }
}

重要なのは、最初からPC・タブレット・スマートフォンごとにCSSを大量に用意しないことです。

まずGrid・Flexbox・相対値・min()・max()・clamp()などで自然に変化する状態を作り、それだけでは対応できない場所へMedia QueryやContainer Queryを追加します。

レスポンシブ画像の作り方

画像は、まず親要素からはみ出さないようにします。

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

ただし、CSSで表示サイズだけを小さくしても、スマートフォンへ非常に大きな画像ファイルを配信していれば通信量は減りません。

表示環境に合わせて画像ファイル自体を切り替える場合は、srcsetやsizesを利用できます。

<img
  src="image-800.jpg"
  srcset="
    image-480.jpg 480w,
    image-800.jpg 800w,
    image-1600.jpg 1600w
  "
  sizes="
    (width < 768px) 100vw,
    800px
  "
  alt=""
>

PCとスマートフォンで画像そのものを変更したい場合は、picture要素も利用できます。

<picture>

  <source
    media="(width < 768px)"
    srcset="image-sp.jpg"
  >

  <img
    src="image-pc.jpg"
    alt=""
  >

</picture>

tableをレスポンシブ対応する方法

表は、スマートフォンでレイアウトが崩れやすい要素のひとつです。

比較表のように横方向の関係が重要な場合は、無理に1カラムへ変換するより、横スクロールできるようにする方法があります。

<div class="table-scroll">

  <table>
    ...
  </table>

</div>

.table-scroll {
  overflow-x: auto;
}

.table-scroll table {
  min-width: 700px;
}

一方、会社概要のような単純な「項目名＋内容」の表であれば、スマートフォンだけ縦積みに変更する方法も考えられます。

tableのレスポンシブ対応では、見た目だけでなく、ユーザーが情報をどのように比較・確認するかを基準に方法を選びます。

iframeをレスポンシブ対応する方法

YouTubeやGoogleマップなどのiframeでは、固定されたwidthやheightによって、スマートフォンで画面からはみ出す場合があります。

16:9の動画などでは、aspect-ratioを利用するとシンプルに対応できます。

.iframe-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

<div class="iframe-wrap">

  <iframe
    src="..."
    loading="lazy"
  ></iframe>

</div>

横幅に応じて高さも変化するため、比率を保ったままiframeを表示できます。

background-imageをレスポンシブ対応する方法

背景画像では、次のようにbackground-size: coverを利用することがあります。

.visual {
  background-image:
    url("/images/visual.jpg");

  background-size: cover;
  background-position: center;
}

coverは表示領域を埋めるため、画面比率によって画像の一部がトリミングされます。

重要な人物や文字が入っている場合は、PCとスマートフォンでトリミング位置が大きく変わらないか確認しましょう。

必要であればMedia Queryを使って背景画像自体を変更します。

@media (width < 768px) {
  .visual {
    background-image:
      url("/images/visual-sp.jpg");
  }
}

スマートフォンの高さには100dvhも検討する

ファーストビューを画面いっぱいに表示する場合、以前から100vhがよく使われています。

.hero {
  min-height: 100vh;
}

現在は、スマートフォンブラウザのアドレスバーなどによって変化する表示領域を考慮し、dvhを利用することもできます。

.hero {
  min-height: 100dvh;
}

CSSには、svh・lvh・dvhなど、異なるviewportの状態を基準にする単位があります。

レスポンシブ対応はSEOに有利？

レスポンシブ対応をしただけで、検索順位が直接上がるわけではありません。

ただし現在のGoogle検索ではモバイル版のコンテンツを基準にインデックス・ランキングする仕組みが利用されているため、スマートフォンでも主要な情報を適切に閲覧できる状態にしておくことは重要です。

SEOを考える場合は、レスポンシブ対応だけでなく次のようなポイントも確認します。

• PCとスマートフォンで主要コンテンツを同等にする
• 画像を適切なサイズで配信する
• レイアウトシフトを抑える
• 読みやすい文字サイズと行間にする
• ボタンやリンクを操作しやすくする
• 不要なJavaScriptや大きな画像を減らす
• Core Web Vitalsを確認する

レスポンシブ対応は、検索エンジンだけを意識するのではなく、さまざまな画面サイズから訪問するユーザーが快適に情報を確認できる状態を作ることが大切です。

レスポンシブデザインは古い？

レスポンシブWebデザイン自体が古くなったわけではありません。

変化しているのは、レスポンシブを実現するCSSの考え方です。

以前は、「PC」「タブレット」「スマートフォン」という端末カテゴリーごとにブレイクポイントを設定する方法が中心でした。

現在は、利用できるスペースに応じて自然に伸縮し、必要なタイミングだけレイアウトを変更する考え方が取り入れやすくなっています。

これらを組み合わせ、必要以上にブレイクポイントへ依存しない設計を作ることがポイントです。

レスポンシブ対応でよくある失敗

1. ブレイクポイントを増やしすぎる

   375px、480px、600px、768px、1024px、1200pxなど、画面幅ごとにCSSを追加し続けると、あとから修正するときに影響範囲が分かりにくくなります。

   まずGrid・Flexbox・min()・clamp()などで自然に対応できないか検討しましょう。

2. PCデザインをそのまま縮小する

   レスポンシブ対応は単純な縮小ではありません。

   画面が狭い場合は、カラムを縦積みにする、ナビゲーションを変更する、余白を調整するなど、情報の見せ方そのものを再構成する必要があります。

3. 固定widthを多用する

   width: 800px;のような指定だけでは、小さい画面でコンテンツがはみ出す可能性があります。

   width: min(100%, 800px);のように最大値として扱うと柔軟になります。

4. スマートフォンとPCだけ確認する

   実際にはスマートフォンとPCの中間にも多数の画面サイズがあります。

   特定端末のプリセットだけでなく、ブラウザの幅を連続的に変更して、途中のサイズでもレイアウトが崩れないか確認しましょう。

5. コンポーネントまでviewportだけで管理する

   カードやCTAなど再利用する部品は、配置される場所によって利用できる横幅が変わります。

   viewportではなく部品の親要素を基準にした方が管理しやすい場合は、Container Queryも検討しましょう。

2026年のレスポンシブ対応チェックリスト

Webサイトを制作するときは、次の項目を確認しておくとレスポンシブ対応の抜け漏れを防ぎやすくなります。

• viewportが設定されている
• 意図しない横スクロールが発生していない
• 固定幅を必要以上に使用していない
• 文字が小さくなりすぎていない
• 画像が親要素からはみ出していない
• 画像ファイルが必要以上に大きくない
• Grid・Flexboxで自然に伸縮できないか検討している
• clamp()などで文字・余白を流動化している
• Media Queryの数を必要最小限にしている
• ブレイクポイントを端末名だけで決めていない
• 再利用コンポーネントではContainer Queryも検討している
• tableがスマートフォンでも確認できる
• iframeが画面からはみ出していない
• 320px前後の狭い画面でも確認している
• PCとスマートフォンで主要コンテンツが同等になっている
• Core Web Vitalsも確認している

まとめ｜2026年のレスポンシブは「切り替える」より「自然に対応させる」

レスポンシブとは、PC・スマートフォン・タブレットなど、利用できる表示領域に合わせてWebページを見やすくするための設計方法です。

レスポンシブ対応というとMedia Queryを思い浮かべやすいですが、2026年現在はMedia Queryだけで作る必要はありません。

まずは、CSS Grid・Flexbox・min()・max()・clamp()などを利用して、画面幅に合わせて自然に伸縮できる状態を作ります。

そのうえで、ページ全体のレイアウト変更には@media、再利用するコンポーネントには@containerを使うなど、役割を分けて考えると管理しやすくなります。

「PC・タブレット・スマートフォンそれぞれのCSSを作る」のではなく、コンテンツが利用できるスペースに応じて自然に対応する設計を作ることが、現在のレスポンシブWebデザインでは重要です。

レスポンシブに関するよくある質問