CSS Container Queriesとメディアクエリの違いは何ですか？

メディアクエリはビューポート（画面全体）のサイズに基づいてスタイルを変更しますが、Container Queriesは親要素（コンテナ）のサイズに基づいてスタイルを変更します。これにより、同じコンポーネントをサイドバーでもメインコンテンツ領域でも、配置場所に応じて適切に表示できるようになります。2025年現在、主要ブラウザで完全対応しています。

フォルダブルデバイスへの対応は必要ですか？

現時点ではフォルダブルデバイスのシェアは限定的ですが、2027年までにプレミアムスマートフォン市場の15%を占めると予測されています。FlexboxやCSS Grid、Container Queriesを活用した柔軟なレイアウトを採用しておくことで、将来的なフォルダブルデバイスへの対応も容易になります。

【2025年】デバイス別レスポンシブデザインのブレイクポイントまとめ｜Webサイト制作 / CMS・MAツール

Q: 各デバイスの推奨ブレイクポイントはいくつですか？

2025年現在の推奨値は、パソコンは1025px以上、タブレットは768px〜1024px、スマートフォンは767px以下です。iPhone 17シリーズなど最新機種のビューポート幅（最大440px）も考慮し、スマートフォン向けのデザインは375〜440px程度をカバーするようにしましょう。

Webサイト制作

【2025年】デバイス別レスポンシブデザインのブレイクポイントまとめ

# Webサイト

2025.12.25

Web制作の費用相場がわかる資料、無料配布中！

Web制作をご検討中の担当者様へ、目的に応じたサイトの種類や費用相場がまるごとわかる資料を、無料でダウンロードいただけます。

無料でダウンロードする

この記事ではパソコン、タブレット、スマートフォンに最適なレスポンシブデザインサイズを紹介します。

各デバイスの最適なブレイクポイントを知り、自社のWebサイト制作にお役立てください。

レスポンシブデザインやWebサイト更新についてお悩みがありましたら、ぜひLeadGridの導入をご検討ください。
LeadGridのサービス紹介ページでは、対応できる機能や導入事例、実際の活用シーンをご紹介しています。
Webサイト制作・運用の改善を検討されている方は、併せてご覧ください。

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

レスポンシブデザインとは、パソコンやスマートフォンなどユーザーが使用するデバイスに合わせて、Webサイトの画面サイズを最適化したデザインを指します。

レスポンシブデザインが主流となる前は、パソコンとスマートフォンで別々のサイトを用意していました。しかしこれではWebサイトを更新する際にコストが2倍となるため、定期的な運用が難しいという問題がありました。

そこでレスポンシブデザインが2010年に発表され2015年にはGoogleが「モバイル・ファースト・インデックス（MFI）をページの評価対象にする」と発表し、レスポンシブデザインを推奨したことで、関心が高まりました。

関連記事：レスポンシブ対応とは？ 5つの対応方法や注意点をWeb制作会社が解説

ブレイクポイントとは

ブレイクポイントとは、各デバイスの画面サイズに応じてレスポンシブデザインの表示を切り替えるポイントを指します。

特にiPadをはじめとするタブレットは、年々画面が大きくなっています。そこでブレイクポイントをアップデートする必要があります。

Webサイトを表示させるデバイスは豊富で、おもに3種類の画面幅に合わせて設定します。

パソコン
タブレット
スマートフォン

一般的には、これらのデバイスの中で主要な機種の画面幅に合わせてブレイクポイントを設定することが一般的です。

レスポンシブデザインの最適なデバイス別サイズ一覧

ここではレスポンシブデザインの最適なデバイス別サイズ一覧を紹介します。

パソコン
タブレット
スマートフォン

3つのデバイスごとに解説しますので、ブレイクポイント設定の参考にしてください。

パソコンのブレイクポイント

パソコンのブレイクポイントは、 960～1,280px程度にしておきましょう。2025年10月段階に国内で利用されているパソコンの画面サイズは、次のとおりです。

画面サイズ（表示解像度）	シェア
1,920×1,080	24.85％
1,536×864	8.1％
1,366×768	4.9％
1,280×720	3.66％
1,280×1,200	4.9％
2,560×1,440	6％

（参考：Desktop Screen Resolution Stats Japan）

この表によると、パソコンの画面幅は1,280px〜1,920pxで高いシェアを占めています。そこで1,920pxのモニターサイズよりもウィンドウを縮小させて表示のしたときを想定して、960～1,280pxをブレークポイントにするのがおすすめ、となります。

ちなみにこのサイズでMacも（一般的な表示倍率であれば）対応可能です。参考までに、Macの画面サイズを下記表にまとめます。

▼iMacの画面サイズ一覧

機種	画面サイズ（モニタのピクセル数）
iMac 20インチ	1,680×1,050
iMac 21.5インチ	1,920×1,200
iMac 24インチ	4,480×2,520
iMac 27インチ	5,120 x 2,880
iMac Pro/iMac Retina 5K	5,120 x 2,880
iMac Retina 4K	4,096 x 2,304
iMac （24-inch, M1, 2021）	4,480 x 2,520

▼MacBookの画面サイズ一覧

機種	画面サイズ（モニタのピクセル数）
MacBook 13インチ	2,560×1,664
MacBook Retina, 12インチ	2,304x1,440
MacBook Air 11インチ	1,366x768
MacBook Air 13インチ	2,560x1,600
MacBook Air Retina, 13インチ	2,560x1,600
MacBook Pro 13インチ	2,560x1,600
MacBook Pro 14インチ	3,024x1,964
MacBook Pro 15/17インチ	2,880×1,800
MacBook Pro 16インチ	3,072x1,920
MacBook Pro Retina, 13インチ	2,560x1,600
MacBook Pro Retina, 15インチ	2,880x1,800

（参考：MacBook のモデルを識別する - Apple サポート（日本））

（参考：MacBook Air のモデルを識別する - Apple サポート（日本））

（参考：MacBook Pro のモデルを識別する - Apple サポート（日本））

タブレットのブレイクポイント

タブレットのブレイクポイントは、 768px〜1,280pxがおすすめ。

2025年10月現在、次の表の通り、タブレットでは768px〜1,280pxで高いシェアを占めています。

画面サイズ（表示解像度）	シェア
768x1,024	19.1％
810x1,080	12.6％
820x1,180	12.46％
834x1,194	7％
744x1,133	6.53％
800x1,280	5.06％

（参考：Tablet Screen Resolution Stats Japan）

またタブレットの画面分割表示（iPadのSplit Viewなど）への対応についても検討する必要があります。

タブレットを分割したときでもタブレットビューを維持したい場合は、どのサイズから画面分割表示のタブレットビュー対応を行うのか検討しましょう。

たとえば「iPad air4（10.9インチ）以上の画面サイズのタブレットを横向けで持ったときに、画面を半分にしたとき以上のサイズでタブレットビューを維持しよう」と思うと、590pxがブレイクポイントとなります。

▼iPadの画面サイズ一覧

機種	画面サイズ（表示解像度）
iPad mini，iPad mini2～5	768x1,024
iPad mini6	768x1,024
iPad，iPad 2，iPad Air，iPad Air2	768x1,024
iPad（第7～9世代）	820x1,080
iPad Pro 10.5，iPad Air（第3世代）	834x1,112
iPad Air（第4世代）	820x1,180
iPad Pro（11インチ）	834x1,194
iPad Pro（12.9インチ）	1024x1,366

（参考：iPad のモデルを識別する - Apple サポート（日本））

（参考：iPad画面サイズ、ピクセル数早見表 - Qiita）

上記よりタブレットのブレイクポイントは768px〜1,280pxに、画面分割に対応する場合は対応させたい幅に設定するとよいでしょう。

スマートフォンのブレイクポイント

スマートフォンのブレイクポイントは、基本的には「タブレットビューのブレイクポイント以下」となります。

国内で利用されているスマートフォンの画面サイズは、2025年10月時点で次の表のとおりです。

画面サイズ（表示解像度）	シェア	主な対応機種
375×812	15.08％	iPhone X/XS/11 Pro
390×844	14.90％	iPhone 12/13/14
393×852	10.63％	iPhone 15/16
414×896	8.55％	iPhone XR/11/XS Max
375×667	5.74％	iPhone 6/7/8/SE
412×915	4.75％	Android各種

（参考：Mobile Screen Resolution Stats Japan）

2025年9月に発売されたiPhone 17シリーズのビューポートサイズは以下のとおりです。今年からiPhone 17 Airという新モデルが追加され、iPhone Plusは廃止されました。

▼iPhone 17シリーズの画面サイズ一覧【2025年9月発売】

機種	画面サイズ	ビューポート（CSS）	物理解像度
iPhone 17	6.3インチ	402×874	1206×2622
iPhone 17 Air【新モデル】	6.5インチ	420×912	1260×2736
iPhone 17 Pro	6.3インチ	402×874	1206×2622
iPhone 17 Pro Max	6.9インチ	440×956	1320×2868

iPhone 17シリーズの特徴として、ベースモデルのiPhone 17とiPhone 17 Proが同じ6.3インチディスプレイを共有しています。これはiPhone 16 Proと同サイズで、ProMotionや常時表示ディスプレイがベースモデルにも搭載されました。

2024年9月に発売されたiPhone 16シリーズも引き続き販売中です。ビューポートサイズは以下のとおりです。

▼iPhone 16シリーズの画面サイズ一覧【2024年9月発売】

機種	画面サイズ	ビューポート（CSS）	物理解像度
iPhone 16	6.1インチ	393×852	1179×2556
iPhone 16 Plus	6.7インチ	430×932	1290×2796
iPhone 16 Pro	6.3インチ	402×874	1206×2622
iPhone 16 Pro Max	6.9インチ	440×956	1320×2868
iPhone 16e	6.1インチ	390×844	1170×2532

※iPhone 16eは2025年2月発売のエントリーモデルです。

2025年現在、iPhoneシリーズのビューポート幅は以下のように分布しています。

375px〜393px：iPhone 8/SE/X/11/12/13/14/15/16（ベースモデル）
402px：iPhone 16 Pro/17/17 Pro
420px：iPhone 17 Air
430px：iPhone 14 Plus/15 Plus/16 Plus
440px：iPhone 16 Pro Max/17 Pro Max

以上から、タブレットの画面分割に対応させたとしても、ほとんどのスマホ表示には影響しないことがわかります（「タブレットのブレイクポイント」にて例として挙げたiPadAir4の画面幅の半分である590pxをブレイクポイントとしても、ほとんどのスマホでスマホ表示を維持できる）。

スマホのブレイクポイントを設定する際には390～500px程度とするのがおすすめです。

ブレイクポイントの設定方法

検討したブレイクポイントをHTMLやCSSを用いて設定する方法について紹介します。

今回はメディアクエリを設定する方法で解説します。

メディアクエリとは

メディアクエリとは、Webサイトを表示するデバイスに合わせてデザインを変化させるために必要なタグのことです。

「この〇〇px以上はパソコンビューで」「〇〇px以下の場合で、××px以上はタブレットビューで」「××px以下の場合はスマホビュー」といった設定を行う際に利用します

メディアクエリの設定方法

メディアクエリを設定するには、HTMLやCSSを記載します。

まずはデザインに適用させるため、以下のようなコードをHTMLに記述しましょう。

今回は例として以下に設定したブレイクポイントをメディアクエリにて設定する方法を紹介します。

PCビュー：1,280px～
タブレットビュー：768px～
スマホビュー：～767px

【HTML】

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>レスポンシブデザインのブレイクポイント例</title>
</head>
<body>
<p >画面幅を変えることで、文字の色が変わるコードです。
</p>
</body>
</html>

次にHTMLを装飾するため、以下のようなコードをCSSに記述します。

そうすることで「1280px以下の表示サイズのとき文字色が黄色、768px以下の表示サイズのとき文字色が青色になる」装飾ができます。

【CSS】

body {
background-color: #ffffff;
color: #000000;
/*1280px以下で文字色が黄色に*/
@media screen and （max-width: 1280px） {
.tablet {
/* 1280px以下で適用させたいcssを記述する部分 */
  color: #F9D342;}
}
/*768px以下で文字色が青色に*/
@media screen and （max-width: 768px） {
  .sp {
  /*768 px未満で表示させたいcssを記述する部分 */
    color: #213C5F;
  }
}}

このようにメディアクエリを活用することで、ブレイクポイントを設定できます。

メディアクエリに頼らない「CSS Container Queries」

2025年現在、従来のメディアクエリに加えて「CSS Container Queries」という新しい技術が注目されています。

メディアクエリはビューポート（画面全体）のサイズに基づいてスタイルを変更しますが、 Container Queriesはコンテナ（親要素）のサイズに基づいてスタイルを変更できます。これにより、コンポーネントがどこに配置されても適切に表示される、真にモジュラーなデザインが可能になります。

Container Queriesのメリットは次の3つです。

同じコンポーネントをサイドバーでもメインコンテンツでも使用可能
グローバルなメディアクエリに依存しないため、コードの管理が容易
コンポーネントが自身の文脈に応じて自動で調整可能

Container Queriesを使用するには、まず親要素をコンテナとして定義し、子要素でクエリを記述します。

【CSS】

/* 親要素をコンテナとして定義 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* コンテナの幅が400px以上の場合のスタイル */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

/* コンテナの幅が400px未満の場合のスタイル */
@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

2025年11月現在、Chrome、Safari、Firefox、Edgeの主要ブラウザで対応しています。

レスポンシブデザインを実装する前の注意点

レスポンシブデザインを実装する前に、注意すべき点をご紹介します。

各端末やブラウザで見え方を確認する

CSSを作成し、モバイル実機できちんと表示されれば原則問題はありませんが、公開する前には念の為に他の端末でどのように表示されるか確認することを推奨します。テストで使用した端末よりも少しサイズダウンしたモバイル端末で表示した際、文字や画面がずれていたり、アプリやブラウザによってうまく表示されない場合があるためです。