「スマホで見たら、デザインが崩れてる…」「パソコンでは綺麗なのに、タブレットだとレイアウトが変…」
Webサイトを作っていて、こんな経験はありませんか？
今は、パソコン、タブレット、スマホなど、色々な画面サイズでWebサイトが見られる時代です。それぞれの画面に合わせて、最適なデザインを表示したいですよね。
そのために使うのが、CSSメディアクエリです。
「メディアクエリって何？」「どうやって書くの？」「難しそう…」
この記事では、そんな疑問に答えながら、CSSメディアクエリについて初心者の方にもわかりやすく解説します。Web制作を学んでいる人、レスポンシブデザインに挑戦したい人、ぜひ最後まで読んでみてください。
コードの書き方から実践的なテクニックまで、すべてお伝えしますね！
CSSメディアクエリとは？
まず、メディアクエリの基本から説明しましょう。
メディアクエリの正式名称
Media Queries（メディアクエリ）は、CSSの機能の一つです。
日本語では「メディア照会」とも呼ばれますが、普通は「メディアクエリ」と言います。
メディアクエリは何をするもの？
メディアクエリは、画面のサイズや種類に応じて、適用するCSSを切り替える仕組みです。
例えばこんなこと
- スマホ（幅320px〜）：1カラムレイアウト
- タブレット（幅768px〜）：2カラムレイアウト
- パソコン（幅1200px〜）：3カラムレイアウト
同じHTMLなのに、見る端末によってデザインが変わるんです。
服で例えると
メディアクエリは、着替えのようなものです。
- 夏：半袖Tシャツ
- 冬：ダウンジャケット
- 雨の日：レインコート
状況（画面サイズ）に応じて、服（デザイン）を変える感じですね。
レスポンシブデザインとは？
メディアクエリを使った設計を、レスポンシブデザインと呼びます。
「レスポンシブ」は「反応する」という意味。
画面サイズに反応して、デザインが自動で切り替わるんです。
レスポンシブデザインのメリット
- 1つのHTMLで全デバイスに対応できる
- スマホ専用サイトを別に作らなくていい
- 管理が楽（1箇所修正すれば全デバイスに反映）
- SEOに有利（Googleが推奨）
現代のWeb制作では、必須のスキルになっています。
メディアクエリの歴史
メディアクエリは、CSS3で導入されました。
2012年にW3C（Web標準を決める組織）が正式勧告。
それまでは、スマホ用とパソコン用で別々のサイトを作るのが普通でした。
メディアクエリの登場で、Web制作が大きく変わったんですね。
メディアクエリの基本的な書き方
実際のコードを見ながら、書き方を学びましょう。
基本の構文
メディアクエリは、次のように書きます。
@media (条件) {
/* 条件に合う時だけ適用されるCSS */
}@mediaから始まるのが特徴です。
シンプルな例
画面幅が600px以下の時だけ、背景色を青にする例です。
body {
background-color: white; /* 通常は白 */
}
@media (max-width: 600px) {
body {
background-color: lightblue; /* 600px以下は水色 */
}
}動き
- 画面幅が601px以上：背景は白
- 画面幅が600px以下：背景は水色
ブラウザの幅を変えてみると、色が切り替わります。
これがメディアクエリの基本です！
よく使う条件
画面の幅で判定
/* 画面幅が768px以下 */
@media (max-width: 768px) {
/* スマホ・タブレット用のCSS */
}
/* 画面幅が769px以上 */
@media (min-width: 769px) {
/* パソコン用のCSS */
}
/* 画面幅が768px〜1024px */
@media (min-width: 768px) and (max-width: 1024px) {
/* タブレット専用のCSS */
}画面の高さで判定
/* 画面の高さが600px以下 */
@media (max-height: 600px) {
/* 縦に短い画面用のCSS */
}画面の向きで判定
/* 横向き（landscape） */
@media (orientation: landscape) {
/* 横長の画面用のCSS */
}
/* 縦向き（portrait） */
@media (orientation: portrait) {
/* 縦長の画面用のCSS */
}印刷時
/* 印刷する時 */
@media print {
/* 印刷用のCSS */
/* 例：背景色を消す、不要な要素を非表示にする */
}複数の条件を組み合わせる
and（かつ）
両方の条件を満たす時だけ適用されます。
@media (min-width: 768px) and (max-width: 1024px) {
/* 768px以上、かつ1024px以下 */
/* つまり、タブレットサイズ */
}or（または）
どちらかの条件を満たせば適用されます。
@media (max-width: 600px), (orientation: portrait) {
/* 画面幅が600px以下、または縦向き */
}カンマ,が「または」の意味です。
not（〜でない）
条件を否定します。
@media not all and (max-width: 600px) {
/* 画面幅が600px以下でない時 */
/* つまり、601px以上 */
}あまり使われませんが、知っておくと便利です。
ブレークポイントの決め方
ブレークポイントとは、デザインを切り替える境界線のことです。
一般的なブレークポイント
これは業界標準として、よく使われる値です。
/* スマホ（縦） */
@media (max-width: 599px) {
/* 超小型スマホ〜通常のスマホ */
}
/* スマホ（横）〜タブレット（縦） */
@media (min-width: 600px) and (max-width: 899px) {
/* 小さめのタブレット */
}
/* タブレット〜小型ノートPC */
@media (min-width: 900px) and (max-width: 1199px) {
/* タブレット、小さいノートPC */
}
/* デスクトップPC */
@media (min-width: 1200px) {
/* 通常のPC、大画面 */
}主要フレームワークのブレークポイント
Bootstrap（人気のCSSフレームワーク）
/* Extra small（スマホ） */
@media (max-width: 575.98px) { }
/* Small（大きいスマホ・タブレット） */
@media (min-width: 576px) { }
/* Medium（タブレット） */
@media (min-width: 768px) { }
/* Large（小型PC） */
@media (min-width: 992px) { }
/* Extra large（PC） */
@media (min-width: 1200px) { }
/* Extra extra large（大画面PC） */
@media (min-width: 1400px) { }Tailwind CSS（最近人気のフレームワーク）
/* Small */
@media (min-width: 640px) { }
/* Medium */
@media (min-width: 768px) { }
/* Large */
@media (min-width: 1024px) { }
/* Extra large */
@media (min-width: 1280px) { }
/* 2X large */
@media (min-width: 1536px) { }ブレークポイントを決めるコツ
コツ1：コンテンツ優先で決める
「iPhoneは375px、iPadは768px」と機種ごとに決めるのではなく、
デザインが崩れるポイントでブレークポイントを設定しましょう。
コツ2：多すぎないように
ブレークポイントが10個も20個もあると、管理が大変です。
3〜5個程度に抑えるのがおすすめ。
コツ3：モバイルファーストで考える
最初にスマホ用のデザインを作って、画面が大きくなるにつれて要素を追加する方法です。
/* 基本（スマホ）のスタイル */
.container {
width: 100%;
}
/* タブレット以上で幅を制限 */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* PC以上でさらに幅を広げる */
@media (min-width: 1200px) {
.container {
width: 1140px;
}
}この方が、コードが読みやすく管理しやすいです。
実践例：レスポンシブなレイアウト
実際のWebサイトで使える例を見てみましょう。
例1：1カラム→2カラム→3カラム
カード型のレイアウトを、画面サイズに応じて変える例です。
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* スマホ：1カラム */
.card {
width: 100%;
}
/* タブレット：2カラム */
@media (min-width: 768px) {
.card {
width: calc(50% - 10px);
}
}
/* PC：3カラム */
@media (min-width: 1024px) {
.card {
width: calc(33.333% - 14px);
}
}動き
- スマホ：カードが縦に1列
- タブレット：カードが2列に並ぶ
- PC：カードが3列に並ぶ
例2：ナビゲーションメニュー
スマホではハンバーガーメニュー、PCでは横並びにする例です。
/* ハンバーガーボタン */
.menu-button {
display: block;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}
/* ナビゲーション */
.nav-menu {
display: none; /* スマホでは最初は非表示 */
position: fixed;
top: 60px;
left: 0;
width: 100%;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nav-menu.active {
display: block; /* ボタンを押したら表示 */
}
.nav-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-menu li {
border-bottom: 1px solid #eee;
}
.nav-menu a {
display: block;
padding: 15px 20px;
color: #333;
text-decoration: none;
}
/* PCでは横並びのメニュー */
@media (min-width: 768px) {
.menu-button {
display: none; /* ハンバーガーボタンを非表示 */
}
.nav-menu {
display: flex !important; /* 常に表示 */
position: static;
box-shadow: none;
}
.nav-menu ul {
display: flex;
}
.nav-menu li {
border-bottom: none;
}
.nav-menu a {
padding: 10px 20px;
}
}例3：画像のサイズ調整
画像を画面サイズに応じて最適化します。
.hero-image {
width: 100%;
height: 200px;
object-fit: cover;
}
/* タブレット以上で高さを増やす */
@media (min-width: 768px) {
.hero-image {
height: 400px;
}
}
/* PC以上でさらに高さを増やす */
@media (min-width: 1200px) {
.hero-image {
height: 600px;
}
}例4：フォントサイズの調整
読みやすさを考えて、画面サイズでフォントサイズを変えます。
/* 基本（スマホ） */
body {
font-size: 14px;
line-height: 1.6;
}
h1 {
font-size: 24px;
margin-bottom: 16px;
}
h2 {
font-size: 20px;
margin-bottom: 12px;
}
/* タブレット以上 */
@media (min-width: 768px) {
body {
font-size: 16px;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
}
/* PC以上 */
@media (min-width: 1200px) {
body {
font-size: 18px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 28px;
}
}例5：要素の表示・非表示
PCでは表示するけど、スマホでは非表示にする要素。
/* サイドバー */
.sidebar {
display: block;
}
/* スマホではサイドバーを非表示 */
@media (max-width: 767px) {
.sidebar {
display: none;
}
}
/* スマホ専用の「もっと見る」ボタン */
.show-more-mobile {
display: block;
}
/* タブレット以上では非表示 */
@media (min-width: 768px) {
.show-more-mobile {
display: none;
}
}モバイルファーストとデスクトップファースト
メディアクエリの書き方には、2つのアプローチがあります。
モバイルファースト
スマホを基本にして、画面が大きくなるにつれてスタイルを追加する方法です。
/* 基本スタイル（スマホ） */
.container {
width: 100%;
padding: 10px;
}
/* タブレット以上で追加 */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
padding: 20px;
}
}
/* PC以上でさらに追加 */
@media (min-width: 1200px) {
.container {
width: 1140px;
padding: 30px;
}
}メリット
- スマホユーザーが多い現代に合っている
- 読み込みが速い（スマホで不要なCSSを読まない）
- コードがシンプルになりやすい
使う条件
min-width（最小幅）を使います。
「◯◯px以上の時」という書き方ですね。
デスクトップファースト
PCを基本にして、画面が小さくなるにつれてスタイルを変更する方法です。
/* 基本スタイル（PC） */
.container {
width: 1140px;
margin: 0 auto;
padding: 30px;
}
/* タブレット以下で変更 */
@media (max-width: 1199px) {
.container {
width: 750px;
padding: 20px;
}
}
/* スマホ以下でさらに変更 */
@media (max-width: 767px) {
.container {
width: 100%;
padding: 10px;
}
}メリット
- 昔ながらのアプローチで理解しやすい人もいる
- PCデザインを先に考える場合に自然
使う条件
max-width（最大幅）を使います。
「◯◯px以下の時」という書き方ですね。
どちらを選ぶべき？
基本的にはモバイルファーストがおすすめです。
理由
- スマホユーザーが多い（日本では60%以上）
- Googleがモバイルファーストインデックスを採用
- パフォーマンスが良い
- コードが読みやすい
ただし、既存のPCサイトをレスポンシブ化する場合は、デスクトップファーストの方が楽なこともあります。
プロジェクトに応じて選びましょう。
メディアクエリのベストプラクティス
1. viewportメタタグを忘れずに
メディアクエリを使う時は、HTMLの<head>内に必ずこれを書きましょう。
<meta name="viewport" content="width=device-width, initial-scale=1.0">これがないと、スマホで正しく表示されません。
2. 相対単位を使う
px（ピクセル）より、emやremを使う方が柔軟です。
/* あまり良くない */
@media (min-width: 768px) {
font-size: 16px;
}
/* 良い */
@media (min-width: 48em) { /* 768px ÷ 16px */
font-size: 1rem;
}ユーザーがブラウザのフォントサイズを変更した時も、適切に表示されます。
3. 共通スタイルは外に出す
すべてのデバイスで共通のスタイルは、メディアクエリの外に書きましょう。
/* 良くない：同じコードの繰り返し */
@media (max-width: 767px) {
.button {
padding: 10px 20px;
border-radius: 4px;
background: blue;
color: white;
}
}
@media (min-width: 768px) {
.button {
padding: 10px 20px;
border-radius: 4px;
background: blue;
color: white;
}
}
/* 良い：共通部分は外に */
.button {
padding: 10px 20px;
border-radius: 4px;
background: blue;
color: white;
}
/* 違いだけをメディアクエリで */
@media (min-width: 768px) {
.button {
padding: 12px 30px; /* PCではもう少し大きく */
}
}4. メディアクエリをまとめすぎない
全部のメディアクエリを最後にまとめるより、関連するスタイルの近くに書く方が管理しやすいです。
/* 良い：関連するスタイルをまとめる */
.header {
padding: 10px;
}
@media (min-width: 768px) {
.header {
padding: 20px;
}
}
.footer {
padding: 20px;
}
@media (min-width: 768px) {
.footer {
padding: 40px;
}
}5. コメントを活用する
どの画面サイズ用か、コメントで明記しましょう。
/* ======================
スマホ（〜767px）
====================== */
.container {
width: 100%;
}
/* ======================
タブレット（768px〜）
====================== */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* ======================
PC（1200px〜）
====================== */
@media (min-width: 1200px) {
.container {
width: 1140px;
}
}6. テストを忘れずに
必ず実機やブラウザの開発者ツールで確認しましょう。
Chromeの開発者ツール
- F12キーを押す
- デバイスツールバーアイコン（スマホのマーク）をクリック
- 様々な画面サイズでテストできる
主要な端末（iPhone、iPad、Androidなど）でチェックしましょう。
よくあるトラブルと解決法
問題1：メディアクエリが効かない
原因1：viewportメタタグがない
<!-- これを<head>内に追加 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">原因2：CSSの優先順位の問題
メディアクエリは、CSSファイルの後ろの方に書きましょう。
/* 悪い例：順序が逆 */
@media (min-width: 768px) {
.box {
width: 50%;
}
}
.box {
width: 100%; /* これが後にあるので、上書きされる */
}
/* 良い例：正しい順序 */
.box {
width: 100%;
}
@media (min-width: 768px) {
.box {
width: 50%; /* 正しく適用される */
}
}原因3：条件の書き間違い
よくある間違い：
/* 間違い：単位がない */
@media (min-width: 768) { }
/* 正しい：単位を付ける */
@media (min-width: 768px) { }問題2：画像がはみ出る
画像が画面からはみ出す時は、こう書きましょう。
img {
max-width: 100%;
height: auto;
}これで、画像が画面幅に収まります。
問題3：横スクロールが出る
要素が画面幅を超えている場合です。
/* 原因：固定幅が大きすぎる */
.container {
width: 1200px; /* スマホ（375px）ではみ出る */
}
/* 解決策：最大幅を設定 */
.container {
width: 100%;
max-width: 1200px;
}問題4：フォントが小さすぎる/大きすぎる
適切なフォントサイズの目安：
- スマホ：14px〜16px
- タブレット：16px〜18px
- PC：16px〜20px
問題5：ブレークポイントで微妙なズレ
min-width: 768pxとmax-width: 767pxのように、1pxずらして使いましょう。
/* スマホ */
@media (max-width: 767px) {
/* 〜767px */
}
/* タブレット以上 */
@media (min-width: 768px) {
/* 768px〜 */
}よくある質問
Q1：メディアクエリはどこに書けばいい？
同じCSSファイル内に書けます。
HTMLで別ファイルを読み込むこともできますが、通常は1つのCSSファイルにまとめます。
<!-- あまり使わない方法 -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">/* 一般的な方法：1つのCSSファイルにまとめる */
.container {
width: 100%;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}Q2：ブレークポイントはいくつ設定すべき？
3〜5個が目安です。
多すぎると管理が大変です。
最小限で考えるなら：
- スマホ（〜767px）
- タブレット・PC（768px〜）
の2つでも十分なケースがあります。
Q3：retina対応はどうする？
高解像度ディスプレイ用には、別のメディアクエリがあります。
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* retina用の画像を使う */
.logo {
background-image: url('logo@2x.png');
background-size: 100px 50px;
}
}Q4：印刷用のスタイルも必要？
あった方が親切です。
@media print {
/* 背景色を消す */
body {
background: white;
color: black;
}
/* ヘッダー・フッター・ナビを非表示 */
header, footer, nav {
display: none;
}
/* リンクのURLを表示 */
a::after {
content: " (" attr(href) ")";
}
}Q5：古いブラウザでも動く？
IE8以前は非対応です。
ただし、2025年現在、IE8を使っている人はほぼいません。
気にしなくて大丈夫でしょう。
Q6：JavaScriptと連携できる？
できます。
JavaScriptで現在のブレークポイントを取得できます。
// 768px以上かチェック
if (window.matchMedia('(min-width: 768px)').matches) {
console.log('タブレット以上');
} else {
console.log('スマホ');
}Q7：CSSフレームワークを使うべき？
初心者はフレームワークから始めるのもありです。
Bootstrap、Tailwind CSSなどは、レスポンシブ対応が簡単にできます。
ただし、基礎を理解してから使った方が応用が効きます。
まとめ
CSSメディアクエリは、レスポンシブWebデザインの核となる技術です。
画面サイズに応じてデザインを自動で切り替えることで、あらゆるデバイスで快適なユーザー体験を提供できます。
この記事のポイント
✓ メディアクエリは画面サイズに応じてCSSを切り替える仕組み
✓ @media (条件) { } という構文で書く
✓ よく使うのは min-width（〜以上）と max-width（〜以下）
✓ モバイルファーストで書くのが現代の主流
✓ ブレークポイントは3〜5個程度が管理しやすい
✓ viewportメタタグの設定が必須
✓ 相対単位（rem、em）を使うと柔軟性が高まる
✓ 必ず実機やブラウザツールでテストする
最初は難しく感じるかもしれませんが、何度も書いているうちに自然に身につきます。
まずは簡単なサイトから始めて、徐々に複雑なレイアウトに挑戦してみましょう。
レスポンシブデザインをマスターすれば、あなたのWeb制作スキルは大きくレベルアップするはずです。頑張ってくださいね！
コメント