CSSのメディアクエリとは？@media・max-width・min-widthの書き方を初心者向けに解説

2026年9月1日2026年10月8日

CSSメディアクエリの書き方と使い分け。@media、max-width、min-widthを初心者向けに解説

PCでは3列で見やすいカード一覧も、スマートフォンでは1枚ずつ縦に並べると読みやすくなります。ただ、CSSを書き始めたばかりだと、「@mediaはどこに書くのか」「max-widthとmin-widthはどちらが以下なのか」で迷いがちです。

メディアクエリは、画面幅などの条件に一致するときだけ指定したCSSを適用する仕組みです。同じHTMLを使ったまま、狭い画面では1列、広い画面では3列という切り替えができます。

HTMLとCSSの基本を学び始めた方に向けて、条件の読み方からCSSを書く位置まで説明します。PCのテキストエディターとブラウザーを用意すれば、2つのファイルでカードの列数を切り替える練習ができます。700px・701pxでの違いを確かめ、切り替わらない場合も症状に合う確認先を選べるようになりましょう。

この記事で分かること

メディアクエリで画面幅に応じてCSSを切り替える仕組み
@mediaの基本構文とCSSファイル内に書く位置
max-width（以下）とmin-width（以上）の違い
ブレイクポイントの決め方と、効かないときの確認方法

CSSのメディアクエリとは

メディアクエリ（Media Query）は、ブラウザーの表示領域であるビューポートの幅、向き、入力方法などの条件を調べ、条件に一致するときだけCSSの一部を適用する仕組みです。レスポンシブデザインでは、主にwidthメディア特性を使って画面幅に応じたレイアウトへ切り替えます。

たとえば、広い画面ではカードを3列、狭い画面では1列にできます。HTMLをスマートフォン用とPC用に分けるのではなく、同じHTMLに対して適用するCSSを切り替える点が基本です。詳しい仕様はMDNの「メディアクエリーの使用」で確認できます。

同じHTMLで、701px未満では基本の1列、701px以上では3列に切り替える例

レスポンシブデザインとの関係

レスポンシブデザインは、画面の広さや利用環境に合わせて読みやすい表示へ調整する考え方です。メディアクエリはその手段の一つで、レイアウト、文字サイズ、余白、表示・非表示などを条件付きで変えられます。

メディアクエリの外側に書いたCSSは、条件に関係なく基本として適用されます。内側のCSSは条件に合うときだけ適用対象になります。同じ要素に別のCSSも指定されている場合は、通常のCSSと同じ優先順位で最終結果が決まります。

ブレイクポイントとは

レイアウトを切り替える幅をブレイクポイントと呼びます。700pxや768pxはよく見る例ですが、固定の正解ではありません。ブラウザー幅を狭くし、カード内の文字が窮屈になる、ボタンが折り返すなど、見た目に無理が出る直前を候補にします。

@mediaの基本的な書き方

@mediaの後ろに条件を書き、外側の波括弧の中へ通常のCSSルールを入れます。

ここでは、カード一覧を囲む親要素のclass名として.card-listを使います。下のコードは、その親要素に別途display: grid;を指定してあることが前提です。メディアクエリだけを書いても、通常のブロック要素の列数は変わりません。

@media (max-width: 700px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}

このコードは、ビューポート幅が700px以下のとき、.card-listの列を1列へ変更します。構文は次の4部分に分けると読めます。

@media：条件付きのCSSを始めるアットルール
(max-width: 700px)：適用条件。700px以下
外側の{ }：条件一致時に有効になる範囲
.card-list { ... }：対象と変更内容を表す通常のCSSルール

CSSはどこに書くのか

@mediaは、style.cssなどの外部CSSファイル、またはHTMLのhead内にあるstyle要素へ書けます。HTMLのbody内へ@mediaだけを直接書くものではありません。CSSの記号やファイルの役割に不安がある方は、「CSSの基本的な書き方」も先に確認してください。

上書きする書き方では、基本CSSを先、メディアクエリを後に置くと関係を追いやすくなります。

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 700px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}

screen andの省略

@media screen and (max-width: 700px)という書き方も正しい構文です。screenは画面を対象にするメディアタイプです。

Webページの幅だけを条件にする基本例では、@media (max-width: 700px)のようにメディアタイプを省略できます。省略した場合はallが既定となるため、印刷用CSSと明確に分けたい場合はscreenやprintを使い分けます。

条件に一致しない場合

条件に合わない場合や、ブラウザーがその条件を理解できない場合は、@media内のCSSは適用されません。外側の基本CSSはそのまま残ります。

そのため、メディアクエリの外側だけでも内容を読める状態にしておくと、条件不一致や未対応環境でも最低限の表示を保てます。

max-widthの書き方

max-widthは指定した幅以下で条件に一致します。次の例は、PC向けの3列を基本にし、700px以下だけ1列へ上書きする書き方です。

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 700px) {
  .card-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

幅が900pxなら条件に一致せず基本の3列、幅が700pxなら条件に一致して1列、幅が390pxでも1列です。

max-widthが向く場面

すでにPC向けのCSSがあり、狭い画面だけを調整したい場合に分かりやすい方法です。既存サイトへスマートフォン向けの上書きを加えるときにも使われます。

ただし、600px以下、500px以下、400px以下と条件を増やしすぎると、どのルールが最終的に効くか追いにくくなります。必要な切り替えだけに絞りましょう。

700pxはどちらに含まれるのか

max-widthのmaxは「未満」ではなく「以下」です。@media (max-width: 700px)は、境界値そのものを含むため、ちょうど700pxでも適用されます。

同様に@media (min-width: 700px)も700pxを含みます。両方へ同じ700pxを書くと、その幅では両方の条件に一致し、同じ強さの指定なら後に書いたルールが優先されます。W3Cの「Media Queries Level 4」でも、max-は<=、min-は>=と同等であることが示されています。

min-widthの書き方

min-widthは指定した幅以上で条件に一致します。スマートフォン向けの1列を基本にし、701px以上で3列へ広げる例を見てみましょう。

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

@media (min-width: 701px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

この例では、701px未満なら基本の1列、701px以上なら3列です。390px・700pxは1列に含まれます。小さい画面の1列を基本にし、画面が広くなったときだけ列数や余白を追加・調整する考え方を、モバイルファーストと呼びます。

min-widthが向く場面

新しくレスポンシブページを作り、小さい画面の読みやすさから設計する場合に整理しやすい方法です。基本CSSへスマートフォン向けの指定を書き、min-widthで広い画面の差分だけを追加します。

「モバイルファーストなら必ず高速になる」という意味ではありません。CSSの量、画像、JavaScriptなども表示速度へ影響するため、ここではスタイルを管理する順序として理解してください。

メディア特性とCSSプロパティのmin-widthの違い

同じmin-widthでも、丸括弧の中では画面幅の条件、CSSルールの中では要素の最小幅を表します。@media (min-width: 701px)のmin-widthはビューポート幅を調べるメディア特性で、.box { min-width: 300px; }のmin-widthは要素が300pxより狭くならないようにするCSSプロパティです。

見分けるときは、min-widthが書かれている場所に注目してください。要素の幅を決めるプロパティは「CSSで幅と高さを指定する方法」で詳しく解説しています。

max-widthとmin-widthの違いを比較

2つの違いを、条件の向きと基本にする画面で整理します。ここまでのmax-widthとmin-widthのコードは別々の例なので、両方をまとめてコピーする必要はありません。

比較項目	max-width	min-width
条件の意味	指定幅以下	指定幅以上
境界値	含む（<=）	含む（>=）
基本にする画面の例	広い画面	狭い画面
向く進め方	既存PC向けCSSを狭い幅で上書き	モバイルファーストで広い幅へ追加
本文の例の境界	700px	701px

次の図は、違いを比べるために両方の境界を700pxにそろえたものです。どちらも700pxを含み、適用される方向が反対になります。

max-widthは700px以下、min-widthは700px以上で適用され、どちらも境界の700pxを含む比較図

HOAI Point

基本CSSを先に用意し、max-widthかmin-widthのどちらか一方を中心にすると、条件の重なりや抜けを減らせます。既存のPC向けCSSを狭い画面だけ直すならmax-width、新規制作で小さい画面から広げるならmin-widthを候補にしてください。

カードの列数を切り替える練習

ここでは、練習用の新しいフォルダーに2つのファイルを作ります。3枚のカードを同じHTMLで用意し、701px未満では1列、701px以上では3列に切り替えます。CSS Gridの列指定を復習したい方は、「CSS Gridの使い方」も参考にしてください。

STEP

index.htmlを作る

テキストエディターで次の内容を入力し、練習用フォルダーへindex.htmlという名前で保存します。文字コードはUTF-8を選び、ファイル名の末尾が.html.txtになっていないか確認してください。link要素が、このあと同じフォルダーに作るstyle.cssを読み込みます。card-listは3枚のcardを包む要素です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>メディアクエリの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="card-list">
    <article class="card">
      <h2>HTML</h2>
      <p>ページの構造を作ります。</p>
    </article>
    <article class="card">
      <h2>CSS</h2>
      <p>見た目と配置を整えます。</p>
    </article>
    <article class="card">
      <h2>JavaScript</h2>
      <p>ページに動きを加えます。</p>
    </article>
  </main>
</body>
</html>

STEP

style.cssを作る

次の内容をstyle.cssという名前で、index.htmlと同じフォルダーへ保存します。末尾が.css.txtになっていないことと、フォルダーに2ファイルがそろったことを確認してください。701px未満では1列を基本にし、701px以上で3列へ切り替えます。

body {
  margin: 0;
  padding: 16px;
  font-family: sans-serif;
}

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

.card {
  padding: 24px;
  background-color: #f5f6f2;
  border: 1px solid #7a8e6d;
  border-radius: 12px;
}

@media (min-width: 701px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.card-listがメディアクエリの対象です。1frは利用できる幅を1列で使う指定、repeat(3, 1fr)は同じ幅の3列を作る指定です。幅701px未満では基本の1frで1列、701px以上ではrepeat(3, 1fr)が適用されて3列になります。.cardの背景色や枠線は画面幅で変えないため、メディアクエリの外側に一度だけ書いています。

STEP

ブラウザー幅を変えて確認する

2ファイルを保存し、index.htmlをブラウザーで開く。編集後は保存してからページを再読み込みする
開発者ツールのデバイス表示で幅を900px・701pxにし、どちらも3列になるか確認する
幅を700px・390pxにし、どちらも1列になるか確認する
3枚のカードがすべて表示され、文字が読め、横にはみ出していないか確認する

まずはブラウザーのウィンドウを狭くしたり広くしたりして、列数の変化を見てください。幅を数値で指定して境界を確かめる場合は、Chrome DevToolsのデバイスモードの公式手順で操作画面を確認できます。「レスポンシブ」表示で幅を入力し、ブラウザー全体の外寸ではなく、ページを表示する領域の幅を比べます。

900px・701pxで3列、700px・390pxで1列になり、3枚すべてを読めれば練習は完了です。結果が違う場合は、次の「メディアクエリが効かないときの確認方法」で症状に合う項目だけを調べてください。

ブレイクポイントの決め方

ブレイクポイントは、端末の製品名や人気の画面サイズだけで決めるものではありません。端末名ではなくレイアウトが窮屈になる幅を見つけると、将来の画面サイズにも対応しやすくなります。

デザインが崩れる直前を探す

広い状態で完成レイアウトを表示する
ブラウザー幅を少しずつ狭くする
文字、ボタン、画像、列幅が窮屈になる位置を探す
その直前の幅をブレイクポイント候補にする
候補の前後と実機相当の幅で再確認する

この記事の700px・701pxは説明用です。カード内容が短ければもっと狭くても3列を保てますが、長い見出しやボタンが入るなら早めの切り替えが必要です。

ブレイクポイントの数

最初は1つのブレイクポイントで十分か確認します。切り替えごとに上書きが増えるため、「端末が増えたから追加」ではなく、「既存の配置では読みやすさを保てないから追加」と判断します。

境界値の重なりと空白

max-width: 700pxとmin-width: 701pxだけで全範囲を分けると、700.5pxのような幅はどちらにも一致しません。表示倍率などによってCSS上の幅は小数になることがあります。実践例は基本CSSの1列を常に用意し、min-width: 701pxで上書きするため、その間の幅も基本の1列で表示できます。

発展的な書き方として、@media (width < 700px)と@media (width >= 700px)のような範囲構文もあります。<と>=を使えば境界を含める側を明示できます。ブラウザーの表示倍率などによってCSS上の幅が小数になる場合でも、境界の重なりや空白を避けやすくなります。まずは従来のmax-width・min-widthを使い、境界を含むことを理解してから試しましょう。

HOAI Point

ブレイクポイントの値を先に暗記せず、実際の内容を入れた状態でブラウザー幅を動かしてください。「どの端末か」より「どの幅から読みづらいか」を基準にすると、理由を説明できる設計になります。

メディアクエリが効かないときの確認方法

練習例がうまく表示されないときは、今の症状から確認先を選びます。すべての項目を順に試す必要はありません。原因を直したら、練習のSTEP 3と同じ幅で確認し、期待どおりに表示された時点で終了できます。

背景色や枠線も出ない：CSSの読み込みとclassを確認する
色や枠線は出るが列数が変わらない：幅条件・単位・記号を確認し、合っていればCSSの優先順位へ進む
PCでは切り替わるのにスマートフォンだけ表示が小さい：viewport設定を確認する

CSSの読み込みとclass

まず、メディアクエリの外側にある背景色や枠線が表示されるかを見ます。実践例でカードの背景色も変わらないなら、幅の条件より先に読み込み先を確認しましょう。

index.htmlとstyle.cssを保存し、href="style.css"が実際のファイル名と一致しているか確認します。次に、CSSの.card-listとHTMLのclass="card-list"のつづりを比べます。練習ファイルを保存してページを再読み込みし、背景色や枠線が表示されるかを確認します。表示されたら幅を変えて列数を確認し、列数だけ切り替わらない場合は「幅条件・単位・記号」へ進みます。

幅条件・単位・記号

開発者ツールのデバイス表示で現在の幅を確かめ、max-widthが「以下」、min-widthが「以上」のどちらの条件なのか読み直します。

0以外の幅には、px、em、remなどの長さ単位が必要です。@media (max-width: 700)は単位がないため、意図した条件として成立しません。

次の違いを一文字ずつ確認してください。

正：@media (max-width: 700px) { ... }
誤：@media (max-width 700px) { ... }　コロンがない
誤：@media (max-width: 700) { ... }　単位がない
誤：@media screen and(max-width: 700px) { ... }　andの後の空白がない

波括弧の閉じ忘れがあると、後ろのCSSまで解釈が崩れる場合があります。コードエディターの色分けやCSS検証機能も利用しましょう。記号を直して保存・再読み込みしても、条件に合う幅で列数が変わらない場合は「CSSの優先順位」を確認します。

CSSの優先順位

メディアクエリの中だから優先されるわけではありません。同じ要素へ複数のCSSが当たると、セレクターの指定の強さ（詳細度）、CSSを書いた順番（宣言順）、!importantの有無など、通常のCSSの優先順位で最終値が決まります。

@media (max-width: 700px) {
  .button {
    width: 100%;
  }
}

.button {
  width: 240px;
}

このコードだけなら、同じ詳細度の.buttonが後ろにあるため、700px以下でもwidth: 240pxが優先されます。開発者ツールで対象の要素を選び、適用されていない指定に取り消し線が付いていないか確認してください。上書きするCSSの順番を整理し、原因が分からないまま!importantを追加するのは避けましょう。

スマートフォンのviewport

スマートフォンで意図どおりの幅にならない場合は、HTMLのheadにviewport設定があるか確認します。

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

この指定は、レイアウトビューポートの幅を端末幅に合わせるためのものです。MDNの「meta viewport」でも基本形を確認できます。WordPressテーマなどがすでに出力している場合は、重複して追加しません。

HOAI Point

幅の数値だけを変え続けると、読み込みや優先順位の問題を見落とします。症状に合う項目を選び、1か所直すたびに表示を確かめると、どの変更が効いたのか分かります。期待する表示になったら、ほかの設定まで変更する必要はありません。

よくある質問

min-widthとmax-widthを同じクエリで併用できますか？: はい。@media (min-width: 600px) and (max-width: 1024px)のように書くと、600px以上かつ1024px以下で適用されます。両方の境界値を含む点に注意してください。
ブレイクポイントの単位はpxでよいですか？: はい。この記事のように幅を数値で確かめながら練習するなら、pxから始められます。emやremも使えますが、メディアクエリ内ではブラウザーの初期フォントサイズを基準にする点に注意してください。ページのhtmlへ指定したfont-sizeで境界が変わるわけではありません。採用する場合は、ブラウザーの文字サイズ設定を変えたときも確認しましょう。