メディアクエリ デザイン見本
ウィンドウ幅に応じてスタイルを切り替える @media の動作をボタン操作で確認しながら、すぐに使えるコードをコピーできます。
① フォントサイズ・色の変化 — 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 と動作が逆になるため、混在させると意図しない挙動が起きやすくなります。どちらかに統一するのがオススメです。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
