デモで学ぶ メディアクエリ実践ガイド
画面幅に応じてスタイルを切り替える @media の代表的な書き方を、ボタン操作で動きを確かめながら学べます。すぐに使えるHTML・CSSのコードもコピーできます。
HTML・CSS・JSコードプレビューツール にて実装確認ができます。
やりたいことから探す
① フォントサイズ・色の変化 — min-width でスタイルを上書き
画面の大きさでフォントサイズとカラーが変わります！
現在: スマホ幅 / 16px / 赤
<p>画面の大きさでフォントサイズとカラーが変わります！</p>p {
font-size: 16px;
color: red;
text-align: center;
}
@media (min-width: 768px) {
p {
font-size: 20px;
color: blue;
}
}
@media (min-width: 1280px) {
p {
font-size: 24px;
color: #1a1a2e;
}
}デフォルトのスタイルをスマホ向けに書き、min-width で画面が広くなるにつれてスタイルを追加します。CSSは後から書いたものが優先されるため、条件を小さい順に書くのがポイントです。この書き方を「モバイルファースト」と呼びます。
② テキストの出し分け — display: none で切り替え
768px未満の画面サイズです！（スマホ想定）
768px以上、1280px未満の画面サイズです！（タブレット想定）
1280px以上の画面サイズです！（PC想定）
現在: スマホ幅
<p class="txt-sp">768px未満の画面サイズです！（スマホ想定）</p>
<p class="txt-tb">768px以上、1280px未満の画面サイズです！（タブレット想定）</p>
<p class="txt-pc">1280px以上の画面サイズです！（PC想定）</p>.txt-sp { display: block; }
.txt-tb { display: none; }
.txt-pc { display: none; }
@media (min-width: 768px) {
.txt-sp { display: none; }
.txt-tb { display: block; }
}
@media (min-width: 1280px) {
.txt-tb { display: none; }
.txt-pc { display: block; }
}全テキストをHTMLに書いておき、表示したくないものを display: none で隠します。min-width の条件を小さい順に書くことで、画面幅が広くなるにつれて正しく切り替わります。
③ Flexbox レイアウトの変化 — 縦並び → 横並び → 比率変化
現在: スマホ幅 / 縦並び
<div class="box-wrap">
<div class="box-1">1</div>
<div class="box-2">2</div>
<div class="box-3">3</div>
</div>.box-1, .box-2, .box-3 {
height: 60px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
color: #fff;
margin-bottom: 8px;
}
.box-1 { background: #38bdf8; }
.box-2 { background: #f87171; }
.box-3 { background: #4ade80; }
@media (min-width: 768px) {
.box-wrap {
display: flex;
gap: 8px;
}
.box-1, .box-2, .box-3 {
flex: 1;
margin-bottom: 0;
}
}
@media (min-width: 1280px) {
.box-1 { flex: 2; }
.box-2 { flex: 1; }
.box-3 { flex: 1; }
}タブレット幅以上で display: flex を適用して横並びにします。PC幅では flex の数値で幅の比率を指定できます。flex: 2 と flex: 1 が並ぶと 2:1:1 の比率になります。
④ min-width と max-width の違い
min-width: 800px
100px / 赤（デフォルト）
max-width: 800px
200px / 青（条件一致）
現在: 800px未満の幅
<!-- min-width / max-width それぞれ単体で使用 -->
<div></div>/* min-width の例（800px以上になったらスタイルが変化） */
div {
width: 50px;
height: 50px;
background: #dc2626;
border-radius: 6px;
}
@media (min-width: 800px) {
div {
width: 80px;
height: 80px;
background: #2563eb;
}
}
/* max-width の例（800px以下になったらスタイルが変化） */
div {
width: 50px;
height: 50px;
background: #dc2626;
border-radius: 6px;
}
@media (max-width: 800px) {
div {
width: 80px;
height: 80px;
background: #2563eb;
}
}デフォルトをスマホ向けに書き、画面が広くなるにつれて条件が発火します。現代のWebはスマホ閲覧が主流のため、こちらが推奨されています。
デフォルトをPC向けに書き、画面が狭くなるにつれて条件が発火します。min-width と動作が逆になるため、混在させると意図しない挙動が起きやすくなります。どちらかに統一するのがオススメです。
⑤ 複数条件の組み合わせ — and でタブレットの時だけ効かせる
現在: スマホ幅 / 通常色
<div class="range-box"></div>.range-box {
width: 120px;
height: 90px;
border-radius: 10px;
background: #cbd5e1;
}
@media (min-width: 600px) and (max-width: 899px) {
.range-box {
background: #7c3aed;
}
}min-width と max-width を and でつなぐと、その範囲内のときだけスタイルが適用されます。「PCでもスマホでもなく、タブレットのときだけ」という指定に便利です。範囲の外に出ると自動でデフォルトのスタイルに戻ります。なお、ここでは範囲の始点と終点を分かりやすくするため 600px / 900px を例にしていますが、実際のブレイクポイントは①〜③と同じ 768px / 1280px でも構いません。
①〜③のように min-width だけを小さい順に並べる書き方は、広い条件を後から上書きしていく「積み上げ式」です。一方この and による範囲指定は、範囲の外側では即座に元のスタイルへ戻る「ピンポイント指定」です。画面が広がるほど段階的に変化させたいなら積み上げ式、特定の1レンジだけ挙動を変えたいなら and、と使い分けます。
⑥ orientation — 画面の向き（縦・横）で切り替える
現在: 縦向き / 縦並び
<div class="orient-wrap">
<div class="orient-box">A</div>
<div class="orient-box">B</div>
</div>.orient-wrap {
display: flex;
flex-direction: column;
gap: 8px;
}
.orient-box {
height: 50px;
border-radius: 6px;
background: #38bdf8;
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.orient-box:nth-child(2) {
background: #f87171;
}
@media (orientation: landscape) {
.orient-wrap {
flex-direction: row;
}
.orient-box {
flex: 1;
}
}orientation: portrait は「高さ ≥ 幅」、landscape は「幅 > 高さ」のときに発火します。スマホを横に倒したときだけレイアウトを変えたい、タブレットの向きに応じて要素の並びを変えたい、といった場面で使います。
orientation は画面の物理的な回転センサーではなく、あくまで「幅と高さのどちらが大きいか」で判定します。そのためPCでウィンドウを細長く縮めたときにも landscape / portrait は切り替わります。スマホの向き固定と混同しないよう注意しましょう。
よくある質問
ブレイクポイントは何pxに設定すればいいですか？
絶対の正解はありませんが、768px（タブレット）・1280px（PC）が代表的な目安として広く使われています。上の①〜③のデモもこの2点を基準にしています。最終的には、ターゲットとなる端末の画面幅の分布やコンテンツの見え方に合わせて微調整するのがおすすめです。
min-width と max-width を混在させたら意図通りに動きません。
min-widthは「その値以上で発火」、max-widthは「その値以下で発火」と、条件の向きが逆です。両方を別々の @media で混在させると、CSSの「後に書いたものが優先」というルールにより、意図しない箇所で上書きされることがあります。④のデモで違いを比較できますが、基本はどちらか一方（推奨は min-width によるモバイルファースト）に統一するのが安全です。
タブレットのときだけスタイルを変えたいです。
min-widthとmax-widthをandでつないだ範囲指定を使います。たとえば@media (min-width: 600px) and (max-width: 899px)と書けば、その範囲内のときだけスタイルが適用されます。⑤の複数条件の組み合わせで実際の動きを確認できます。
メディアクエリを書いたのにスマホで反映されません。よくある原因は？
最も多い原因は、<meta name="viewport" content="width=device-width, initial-scale=1">の記述漏れです。これがないとスマホは実際の画面幅ではなく、仮想的に広い幅（980px前後）でページを表示してしまい、min-widthの条件に一致しなくなります。まずHTMLの<head>内にviewportタグがあるか確認してください。
メディアクエリとFlexbox・Gridはどう組み合わせますか？
メディアクエリは「画面幅・向きによる条件分岐」を担当し、Flexbox・Gridは「その条件下でのレイアウト」を担当します。実務では③のデモのように、@media の中で display: flex に切り替えたり flex の比率を変えたりする組み合わせ方が定番です。横一列のナビゲーションやカードの並びなど1方向のレイアウトならFlexboxの実装解説、行と列の両方を揃えるギャラリーやページ全体の骨格ならGridの実装解説もあわせてご覧ください。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
