本ページはプロモーションが含まれています

【2026年版】PCから組むメディアクエリ。実務で迷わないブレイクポイントとmax-width活用術

公開日

Web制作の「教科書」ではモバイルファーストが推奨されますが、実務では「PC版から組んだ方が効率が良い」ケースも多々あります。

特に複雑なレイアウトをPCで先に固めてから、スマホで縦に並べていく手法は、大規模サイトほど管理しやすかったりします。今回はPCファースト（max-width）で組む際の黄金ルールをまとめました。

PCファーストのメリット

PC版は要素が多く複雑なため、先に全体像（完成形）を作ることで、後からの「要素の削り込み」がスムーズになります。クライアントチェックがまずPC版から入る現場でも、この手法は非常に強力です。

2026年：PCファーストのブレイクポイント

PCから組む（max-width）場合、以下の数値を基準に「大きい方から順に」定義していくのがコツです。

デバイス クエリ（max-width） 用途
標準PC (指定なし) 1025px以上の全画面
タブレット 1024px以下 iPad Pro 11 / 12.9インチ等
スマホ 767px以下 iPhone / Android各種

PCファースト（max-width）での書き方

「PC版がデフォルト」になるため、メディアクエリの中にはスマホで変えたい部分だけを記述します。

/* 1. PC向け（基本スタイル：1025px以上） */
.mq-card {
    display: flex;
    width: 1200px;
    margin: 0 auto;
}

/* 2. タブレット向け（1024px以下） */
@media (max-width: 1024px) {
    .mq-card {
        width: 95%;
    }
}

/* 3. スマホ向け（767px以下） */
@media (max-width: 767px) {
    .mq-card {
        display: block; /* 縦並びに変更 */
        width: 100%;
        padding: 0 20px;
    }
}
  1. まずはPC表示を100%作り込む
    複雑なフォントサイズやマージンをPC基準で固めます。
  2. タブレットで幅を調整
    PCの横幅が入り切らなくなる1024px付近で、コンテナ幅を%指定に切り替えます。
  3. スマホでレイアウトを「解く」
    Flexboxを解除したり、画像を全幅にしたりして、スマホで見やすい形に再配置します。

ここが重要！

PCファーストだとスマホ側のコードが膨らみがちですが、「複雑なPC版をデフォルト」にすることで、メディアクエリ内をシンプルに保てるという逆転の発想が実務では活きます。

まとめ：自分のスタイルに合った設計を

モバイルファーストは絶対的な正解ではありません。サイトの性質や自分の手の動かしやすさに合わせて、柔軟に使い分けるのが「プロの仕事」です。

一覧へ!