モバイルファーストで学ぶ！メディアクエリの実践的なブレークポイント設定術

WEB制作

「メディアクエリのブレークポイントって、どこに設定すればいいの?」「min-widthとmax-widthの違いがよくわからない…」そんな悩みを抱えていませんか?

レスポンシブデザインの実装で最初につまずくのが、ブレークポイント(画面幅の切り替えポイント)の設定です。実は、現代のWeb制作では「モバイルファースト」という考え方が主流で、それに合わせたメディアクエリの書き方があります。

この記事で分かること:

  • モバイルファーストとは何か、なぜ重要なのか
  • min-widthとmax-widthの使い分け方
  • 実務で使える具体的なブレークポイントの値と設定例

この記事を読めば、迷わずレスポンシブサイトのコーディングができるようになります!

結論:モバイルファーストで「min-width」を使おう

まず結論から: 現代のWeb制作では、スマートフォン(モバイル)を基準にしてコードを書き、min-widthで画面が広がるごとにスタイルを追加していく「モバイルファースト」が基本です。

すぐに使える基本のブレークポイント3つ:

  • タブレット: 768px
  • PC(小): 1024px
  • PC(大): 1280px

これらをmin-widthで指定することで、小さい画面から大きい画面へと段階的にデザインを調整できます。

モバイルファーストとは?なぜ重要なのか

モバイルファーストの考え方

モバイルファーストとは、スマートフォンでの表示を「標準」として、そこから画面サイズが大きくなるごとにスタイルを追加していく設計手法です。

モバイルファーストが重要な理由:

  • モバイルトラフィックの増加: 現在、Webサイトへのアクセスの50%以上がスマートフォンから
  • Googleの評価基準: GoogleはモバイルファーストインデックスをSEO評価の基準としている
  • コードの効率化: 必要最小限のCSSから始めるため、コードがシンプルになる
  • パフォーマンス向上: モバイル環境でのロード速度が向上する

デスクトップファーストとの違い

従来のデスクトップファースト(max-width使用)では、PC用のスタイルを基準にして、小さい画面用に上書きしていく形でした。しかし、この方法は:

  • モバイルで不要なCSSまで読み込んでしまう
  • 上書きが多くなり、コードが複雑化する
  • モバイルのパフォーマンスが落ちる

という問題がありました。

min-widthとmax-widthの使い分け

min-widthの意味と使い方

min-widthは「この幅以上の画面サイズに適用される」という意味です。モバイルファーストでは、これを使って画面が広くなるごとにスタイルを追加します。

  1. /* モバイル(基準) - メディアクエリなし */
  2. .container {
  3.   width: 100%;
  4.   padding: 15px;
  5. }
  6.  
  7. /* タブレット以上(768px以上)に適用 */
  8. @media (min-width: 768px) {
  9.   .container {
  10.     max-width: 720px;
  11.     margin: 0 auto;
  12.     padding: 30px;
  13.   }
  14. }
  15.  
  16. /* PC以上(1024px以上)に適用 */
  17. @media (min-width: 1024px) {
  18.   .container {
  19.     max-width: 1200px;
  20.     padding: 40px;
  21.   }
  22. }

ポイント: 小さい値から大きい値へと順番に書くことで、スタイルが段階的に上書きされていきます。

max-widthの意味と使い方

max-widthは「この幅以下の画面サイズに適用される」という意味です。デスクトップファーストで使いますが、現在はあまり推奨されません。

  1. /* PC(基準) - メディアクエリなし */
  2. .container {
  3.   max-width: 1200px;
  4.   padding: 40px;
  5. }
  6.  
  7. /* タブレット以下(1023px以下)に適用 */
  8. @media (max-width: 1023px) {
  9.   .container {
  10.     padding: 30px;
  11.   }
  12. }

注意: max-widthを使う場合は、大きい値から小さい値へと書く必要があります。

どちらを使うべき?

基本的には「min-width(モバイルファースト)」を使いましょう。ただし、以下のような特定の状況ではmax-widthも併用します:

  • 特定の画面幅範囲だけに適用したいスタイルがある場合
  • 既存のデスクトップファーストのサイトを段階的に改修する場合

実務で使える具体的なブレークポイント設定

基本のブレークポイント一覧

実務でよく使われるブレークポイントは以下の通りです。デバイスではなく、デザインが崩れる箇所で設定するのがポイントです。

画面サイズ ブレークポイント 対象デバイス例 用途
モバイル(基準) 〜767px iPhone SE、iPhone 12/13 メディアクエリなし(デフォルト)
タブレット 768px〜 iPad、Android タブレット 2カラムレイアウト開始
PC(小) 1024px〜 小型ノートPC、iPad Pro横 3カラムや複雑なレイアウト
PC(中) 1280px〜 標準的なデスクトップ コンテンツ幅の最大化
PC(大) 1440px〜 大型モニター、4K 余白やフォントサイズ調整

実践的なコード例

実務でそのまま使える、ナビゲーションとコンテンツレイアウトの実装例です。

  1. <!-- HTML構造 -->
  2. <header class="header">
  3.   <nav class="nav">
  4.     <ul class="nav-list">
  5.       <li><a href="#">ホーム</a></li>
  6.       <li><a href="#">サービス</a></li>
  7.       <li><a href="#">お問い合わせ</a></li>
  8.     </ul>
  9.   </nav>
  10. </header>
  11.  
  12. <main class="main-content">
  13.   <div class="card-grid">
  14.     <div class="card">カード1</div>
  15.     <div class="card">カード2</div>
  16.     <div class="card">カード3</div>
  17.   </div>
  18. </main>
  1. /* ===========================
  2.    モバイル(基準スタイル)
  3.    =========================== */
  4. .header {
  5.   padding: 15px;
  6.   background: #333;
  7. }
  8.  
  9. .nav-list {
  10.   display: flex;
  11.   flex-direction: column; /* モバイルは縦並び */
  12.   gap: 10px;
  13. }
  14.  
  15. .nav-list a {
  16.   color: #fff;
  17.   padding: 10px;
  18.   display: block;
  19. }
  20.  
  21. .card-grid {
  22.   display: grid;
  23.   grid-template-columns: 1fr; /* モバイルは1カラム */
  24.   gap: 15px;
  25.   padding: 15px;
  26. }
  27.  
  28. .card {
  29.   background: #f5f5f5;
  30.   padding: 20px;
  31.   border-radius: 8px;
  32. }
  33.  
  34. /* ===========================
  35.    タブレット(768px以上)
  36.    =========================== */
  37. @media (min-width: 768px) {
  38.   .header {
  39.     padding: 20px 30px;
  40.   }
  41.   
  42.   .nav-list {
  43.     flex-direction: row; /* タブレットから横並び */
  44.     gap: 20px;
  45.   }
  46.   
  47.   .card-grid {
  48.     grid-template-columns: repeat(2, 1fr); /* 2カラムに */
  49.     gap: 20px;
  50.     padding: 30px;
  51.   }
  52. }
  53.  
  54. /* ===========================
  55.    PC(1024px以上)
  56.    =========================== */
  57. @media (min-width: 1024px) {
  58.   .header {
  59.     padding: 25px 50px;
  60.   }
  61.   
  62.   .nav-list {
  63.     gap: 30px;
  64.   }
  65.   
  66.   .card-grid {
  67.     grid-template-columns: repeat(3, 1fr); /* 3カラムに */
  68.     gap: 30px;
  69.     padding: 40px;
  70.     max-width: 1200px;
  71.     margin: 0 auto; /* 中央寄せ */
  72.   }
  73. }
  74.  
  75. /* ===========================
  76.    大画面PC(1280px以上)
  77.    =========================== */
  78. @media (min-width: 1280px) {
  79.   .card-grid {
  80.     max-width: 1400px; /* 最大幅を広げる */
  81.     gap: 40px;
  82.   }
  83.   
  84.   .card {
  85.     padding: 30px; /* カード内の余白も広げる */
  86.   }
  87. }

この例のポイント:

  • モバイルは1カラム・縦並びナビゲーション
  • タブレットから2カラム・横並びナビゲーションに変化
  • PCで3カラムに拡張し、余白も広げる
  • 大画面では最大幅とカード内余白をさらに調整

ブレークポイント設定のチェックリスト

メディアクエリを書く前に、このチェックリストで確認しましょう。

  • モバイルファーストで書いているか
    → 最初にスマホ用のスタイルを書き、min-widthで広げていく
  • ブレークポイントは必要最小限か
    → 多すぎるとメンテナンスが大変。3〜4つが目安
  • デバイスではなくデザインで決めているか
    → 「iPhone用」ではなく「このレイアウトが崩れる幅」で設定
  • メディアクエリの順序は正しいか
    → min-widthなら小さい順(768px → 1024px → 1280px)
  • 実機・ブラウザの開発者ツールで確認したか
    → Chrome DevToolsのレスポンシブモードで各サイズをチェック

よくあるつまずきポイントと解決法

1. メディアクエリが効かない

原因: 記述順序が間違っている、または詳細度の問題

  1. /* ❌ 悪い例:順序が逆 */
  2. @media (min-width: 1024px) { /* 先に書かれている */
  3.   .box { width: 300px; }
  4. }
  5.  
  6. @media (min-width: 768px) { /* 後から書くと上書きされる */
  7.   .box { width: 200px; }
  8. }
  9.  
  10. /* ✅ 良い例:小さい順 */
  11. @media (min-width: 768px) {
  12.   .box { width: 200px; }
  13. }
  14.  
  15. @media (min-width: 1024px) {
  16.   .box { width: 300px; }
  17. }

2. 767pxと768pxの境界で混乱する

解決策: min-widthを使う場合、キリの良い数字(768px、1024px)をそのまま使うのが一般的です。

  1. /* モバイルファーストの場合 */
  2. /* 〜767px: モバイル(メディアクエリなし) */
  3. /* 768px〜: タブレット以上 */
  4.  
  5. @media (min-width: 768px) {
  6.   /* 768px以上に適用される */
  7. }

3. PC表示なのにモバイルスタイルが適用される

原因: viewportメタタグが設定されていない

  1. <!-- HTMLのhead内に必ず追加 -->
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">

注意: このタグがないと、スマホでもPC表示として縮小されたり、メディアクエリが正しく機能しなくなります。

4. 画像がはみ出る・レイアウトが崩れる

解決策: 画像に基本スタイルを適用しておく

  1. /* 画像の基本設定(モバイルファースト) */
  2. img {
  3.   max-width: 100%; /* 親要素からはみ出さない */
  4.   height: auto; /* 縦横比を保つ */
  5.   display: block;
  6. }

実務で役立つTips

CSS変数でブレークポイントを管理

プロジェクト全体で統一したブレークポイントを使うために、CSS変数(カスタムプロパティ)やSass変数で管理するのがおすすめです。

  1. /* CSS変数で定義(使用は制限あり) */
  2. :root {
  3.   --bp-tablet: 768px;
  4.   --bp-pc: 1024px;
  5. }
  6.  
  7. /* ※注意:メディアクエリ内では直接使えない */
  8. /* 実際には値を直接書くか、Sassを使う */
  1. /* Sassの場合 */
  2. $bp-tablet: 768px;
  3. $bp-pc: 1024px;
  4.  
  5. @media (min-width: $bp-tablet) {
  6.   /* タブレット用スタイル */
  7. }

Chrome DevToolsでの確認方法

ブラウザの開発者ツールを使えば、さまざまな画面サイズを簡単にテストできます。

  1. Chromeで確認したいページを開く
  2. F12キー(またはCmd+Option+I)で開発者ツールを開く
  3. デバイスツールバーアイコン(📱マーク)をクリック
  4. 上部のドロップダウンから「Responsive」を選び、幅を手動で変更
  5. または「iPhone 12」「iPad」などのプリセットを選択

特定範囲だけに適用したい場合

タブレットだけにスタイルを適用したい場合は、min-widthとmax-widthを組み合わせます。

  1. /* タブレットのみ(768px〜1023px)に適用 */
  2. @media (min-width: 768px) and (max-width: 1023px) {
  3.   .tablet-only {
  4.     display: block;
  5.   }
  6. }

注意: 範囲指定を多用するとメンテナンスが大変になるため、本当に必要な場合だけ使いましょう。

よくある質問

Q1. ブレークポイントはいくつ設定すればいいですか?

A. 一般的なWebサイトなら3〜4つが目安です。モバイル(基準)、タブレット(768px)、PC(1024px)、大画面(1280px)があれば十分なケースが多いです。複雑なデザインの場合は、実際にレイアウトが崩れる箇所でブレークポイントを追加します。

Q2. 375pxや414pxなど、スマホの具体的な幅でブレークポイントを設定すべきですか?

A. デバイスの具体的な幅に合わせる必要はありません。デバイスは毎年新しいサイズが登場するため、「このデザインが崩れる幅」を基準に設定するのが正解です。モバイルは基準スタイルとして、メディアクエリなしで対応します。

Q3. remやemでブレークポイントを指定した方がいいですか?

A. アクセシビリティを考慮するなら、remやem単位の方が良いとされています。ユーザーがブラウザのフォントサイズを変更した時にも、レイアウトが適切に変化するためです。

  1. /* pxの場合 */
  2. @media (min-width: 768px) { }
  3.  
  4. /* emの場合(768px ÷ 16px = 48em) */
  5. @media (min-width: 48em) { }

ただし、チームの方針やプロジェクトの要件に合わせて選択してください。pxでも問題ない場合は多いです。

Q4. iPadの縦横で表示を変えたいのですが、どうすればいいですか?

A. orientationプロパティを使うことで、画面の向き(縦・横)で分岐できます。

  1. /* 縦向き(portrait) */
  2. @media (min-width: 768px) and (orientation: portrait) {
  3.   /* iPad縦向き用 */
  4. }
  5.  
  6. /* 横向き(landscape) */
  7. @media (min-width: 768px) and (orientation: landscape) {
  8.   /* iPad横向き用 */
  9. }

Q5. レスポンシブデザインのテストはどうやればいいですか?

A. 以下の方法を組み合わせてテストします。

  • Chrome DevTools: 開発中の細かい調整に最適
  • 実機確認: 最終チェックは必ず実機で(iPhoneやiPad、Androidなど)
  • BrowserStack等のツール: 多様なデバイス・ブラウザでの確認が必要な場合

まとめ

メディアクエリのブレークポイント設定は、モバイルファースト(min-width)が現代のWeb制作の基本です。この記事のポイントをおさらいしましょう。

  • モバイルファースト: スマホを基準に、min-widthで段階的にスタイルを追加
  • 基本のブレークポイント: 768px(タブレット)、1024px(PC)、1280px(大画面)の3つで十分
  • デバイスではなくデザインで決める: レイアウトが崩れる箇所でブレークポイントを設定
  • 記述順序: min-widthは小さい値から大きい値へ
  • viewportタグ: HTMLのhead内に必ず設定する

次のステップ:

  • 実際に簡単なサイトをモバイルファーストでコーディングしてみる
  • FlexboxやGridと組み合わせて、より柔軟なレイアウトを学ぶ
  • CSSのclamp()やcontainer queriesなど、より現代的な手法も調べてみる

レスポンシブデザインは最初こそ戸惑いますが、基本のルールを押さえれば、誰でも実装できるようになります。この記事で学んだブレークポイントの設定方法を、ぜひ実際のコーディングで活用してください!

スポンサーリンク
スポンサーリンク