メディアクエリ ブレークポイント｜2026年版の推奨値と書き方テンプレート

メディアクエリとは、画面幅やOSの設定などの条件に応じてCSSを切り替える仕組みで、レイアウトが切り替わる境目の幅を「ブレークポイント」と呼びます。2026年時点では「768px / 1024px / 1280px を軸に、モバイルファースト（width >=）で書く」のが扱いやすい構成です。

この記事では、Tailwind CSS v4 と Bootstrap 5.3 の公式の既定値を比較した推奨表、コピペで使える range構文 @media (width >= 768px) のテンプレート、よく使うメディア特性の一覧 をまとめました。さらに Playwright ＋ Chromium 141 で 幅 375 / 768 / 1024 / 1280px のときにどのルールが効いたかを getComputedStyle で実測 し、viewportメタタグ忘れ・境界の重なり・記述順といった よくある失敗も実際に再現 しています。コンテナクエリとの使い分けも同じ画面で比べました。

ブレークポイントとメディアクエリの早見表

2026年の推奨ブレークポイント（Tailwind v4 / Bootstrap 5.3 比較）

主要フレームワークの既定値を並べると、768px はどちらも同じで、1024px 前後と 1280px 前後に集まっています。 公式ドキュメントで確認した値です。

• Tailwind v4 は rem 単位と range 構文 で出力します（max-md は @media (width < 48rem)）。値は @theme { --breakpoint-3xl: 120rem; } のように変更できます。
• Bootstrap は min-width を基本 とし、上限側だけ .02px 引いた値を使います（理由は後述）。

値の決め方

端末の機種名ではなく「レイアウトが窮屈になった幅」で決める のが長く使えるやり方です。

メディアクエリの書き方テンプレート

viewportメタタグ（必須）

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

これがないとスマホのブラウザは約980px幅で描画してから縮小するため、スマホ用のメディアクエリが効きません（後述の実測）。

モバイルファースト（range構文・推奨）

/* 基本＝スマホ（メディアクエリの外） */
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.nav { display: none; }
.menu-btn { display: block; }

/* タブレット以上 */
@media (width >= 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
/* 小さめPC以上 */
@media (width >= 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .nav { display: flex; }
  .menu-btn { display: none; }
}
/* PC以上 */
@media (width >= 1280px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}
/* タブレットの範囲だけ */
.tablet-only { display: none; }
@media (768px <= width < 1024px) {
  .tablet-only { display: block; }
}

モバイルファーストは「小さい画面の指定を基本にし、広い画面で上書きする」書き方 です。スマホ用のCSSが最も少なくなり、上書きの向きが一方向なので読みやすくなります。

従来の書き方との対応表

range構文（Media Queries Level 4）は Chrome 104・Firefox 63・Safari 16.4 以降で使え、2023年から主要ブラウザで共通 です。

PCファースト（既存サイトの改修時）

.grid { grid-template-columns: repeat(4, 1fr); }
@media (width < 1280px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (width < 1024px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (width < 768px)  { .grid { grid-template-columns: 1fr; } }

PCファーストでは、大きい値から小さい値の順に書きます。 既存のPC向けCSSに後からスマホ対応を足す場合に向いています。

CSSファイルごと・JavaScriptで切り替える

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(width >= 1024px)">

const mq = matchMedia('(width >= 1024px)');
const apply = () => document.body.dataset.layout = mq.matches ? 'pc' : 'sp';
mq.addEventListener('change', apply);
apply();

実測では、幅を 1024px → 1023px に変えると change イベントで data-layout が pc → sp に切り替わりました（PCファーストの例も 1280/1024/768/767px で 4→3→2→1列を確認）。

375 / 768 / 1024 / 1280px で実測した結果

環境：Playwright 1.56 ＋ Chromium 141.0.7390.37（ヘッドレス）。 上のモバイルファーストのテンプレートを読み込み、getComputedStyle で値を読みました（列数は grid-template-columns の値の数）。

width >= 768px は 768px ちょうどで効き、767px では効かない ことが確認できます。範囲指定 768px <= width < 1024px も 1023px まで効き、1024px で外れました。

よく使うメディア特性の一覧（実測つき）

メディア特性とは、画面幅以外にも「ダークモードか」「マウスがあるか」などを判定できる条件 です。Playwright で環境を切り替えて matchMedia() の結果を記録しました（○＝一致）。

※ 375×667、isMobile・hasTouch・deviceScaleFactor: 2。prefers-contrast: more と forced-colors: active は、それぞれをエミュレートしたときに ○ になりました。

メディア特性のテンプレート

/* ダークモード */
:root { --bg: #fff; --text: #111; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ホバーできる端末だけホバー効果（タップ後に色が残るのを防ぐ） */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #1a73e8; }
}

/* 指で操作する端末はタップ領域を広く */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
}

/* 印刷 */
@media print {
  .nav, .menu-btn { display: none; }
  a[href]::after { content: " (" attr(href) ")"; }
}

「スマホかどうか」を幅だけで判定せず、ホバーは hover、タップ領域は pointer で判定 すると、タブレット＋マウスなど組み合わせが増えても意図どおりに動きます。

コンテナクエリ（@container）との使い分け

メディアクエリは「画面全体の幅」、コンテナクエリは「親要素の幅」で切り替えます。 同じカード部品を、幅300pxのサイドバーと広いメイン領域に置いたときの違いを実測しました。

.layout { display: grid; grid-template-columns: 300px 1fr; }
.wrap { container-type: inline-size; container-name: card; }

/* コンテナクエリ版：置かれた場所の幅で切り替え */
.card { display: grid; grid-template-columns: 1fr; }
@container card (width >= 480px) {
  .card { grid-template-columns: 160px 1fr; }
}

/* メディアクエリ版：画面幅で切り替え */
.mcard { display: grid; grid-template-columns: 1fr; }
@media (width >= 768px) {
  .mcard { grid-template-columns: 160px 1fr; }
}

/* コンテナ幅に比例する文字サイズ */
.u { font-size: clamp(14px, 4cqi, 24px); }

画面幅 1280px での実測（grid-template-columns）：

メディアクエリ版は画面が広いというだけで、狭いサイドバーでも2列になり、本文が140pxまで細くなりました。 コンテナクエリ版は置き場所に合わせて1列のままです。

骨組みはメディアクエリ、部品はコンテナクエリ と分けると、ブレークポイントの数を増やさずに済みます。container-type: inline-size を付けた要素自身には、そのコンテナクエリは効かない（子孫に効く）点に注意します。

よくある失敗と直し方（実際に再現）

1. viewportメタタグを忘れる

スマホ相当（375×667、isMobile: true）で、メタタグの有無だけを変えて比べました。

メタタグがないと、スマホでもCSS上の幅が980pxとして扱われ、タブレット用のルールが効きました。 <head> に1行入れれば直ります。

2. max-width と min-width の境界が重なる

@media (max-width: 768px) { .d { color: red; } }
@media (min-width: 768px) { .d { color: blue; } }

768px ちょうどで両方が一致し、後に書いたルールが勝ちました。 上限側は max-width: 767px（または 767.98px）にするか、range構文で (width < 768px) と (width >= 768px) に分けると重なりません。

3. 767px と 768px の間（767.98px 問題）

Bootstrap の公式ドキュメントでは、上限に .02px 引いた値を使う理由を、小数の幅のビューポート（高DPI端末などで起こりうる）で min- と max- の間にすき間ができるのを避けるため、という趣旨で説明しています。max-width: 767px と min-width: 768px の組み合わせでは、767.5px のような幅でどちらにも当てはまらない可能性があります。

今回、幅 767.5px / 767.98px の iframe で再現を試みましたが、Chromium 141 では中のビューポート幅が 768px に丸められ、すき間は再現しませんでした（innerWidth はいずれも 768）。

range構文なら「未満」と「以上」で書けるので、すき間も重なりも原理的に起きません。

4. 記述順・詳細度でメディアクエリが負ける

@media (width >= 768px) { .title { font-size: 32px; } }
.title { font-size: 20px; }                /* 後に書いた */

@media (width >= 768px) { .title2 { font-size: 32px; } }
.box .title2 { font-size: 20px; }          /* 詳細度が高い */

.title3 { font-size: 20px; }
@media (width >= 768px) { .title3 { font-size: 32px; } }  /* 正しい順 */

メディアクエリは詳細度を上げません。 同じ詳細度なら後に書いた方が勝つため、基本のCSSの後にメディアクエリを書き、セレクタの詳細度をそろえます。

チェックリスト

よくある質問

Q. ブレークポイントはいくつ用意すればよいですか？ A. 多くのサイトは 768px と 1024px の2つ、広い画面の調整に 1280px を足した3つで足ります。部品ごとの細かい調整はコンテナクエリに任せると、ページ全体のブレークポイントを増やさずに済みます。

Q. px と em / rem はどちらで書くべきですか？ A. Tailwind v4 は rem（48rem＝768px）で出力しています。メディアクエリ内の rem / em はルート要素の設定ではなくブラウザの初期文字サイズ（通常16px）が基準になるため、ユーザーが文字サイズを大きくしたときにも比例して切り替わります。どちらでも動くので、プロジェクト内で統一することが大切です。

Q. range構文は使っても大丈夫ですか？ A. Chrome 104、Firefox 63、Safari 16.4 以降で対応しており、2023年から主要ブラウザで共通して使えます。Tailwind v4 も既定の出力に使っています。

Q. スマホ判定に画面幅を使うのと、pointer: coarse を使うのはどちらがよいですか？ A. レイアウトは画面幅、操作方法に関わる見た目（ホバー効果、タップ領域）は hover / pointer と、目的で分けるのがおすすめです。

まとめ

• 迷ったら 768 / 1024 / 1280px の3段階。768px は Tailwind v4 と Bootstrap 5.3 の共通値
• モバイルファーストで @media (width >= 768px) と書く。範囲は (768px <= width < 1024px)
• viewportメタタグがないと、スマホでも幅980pxとして扱われる（実測）
• max-width: 768px と min-width: 768px は 768px で重なる。range構文の < と >= で分ける
• メディアクエリは詳細度を上げない。基本のCSSの後に書く
• 骨組みはメディアクエリ、部品はコンテナクエリ。ホバーや入力方法はメディア特性で判定

株式会社RJCでは、どの画面でも使いやすいUIを作るための工夫を、プロジェクトの中で仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。