---
title: "メディアクエリとは？画面幅でデザインを切り替えるCSSの基礎"
description: "スマホ・タブレット・PCで表示を切り替えたいCSSの初心者へ。メディアクエリのブレークポイントの考え方と書き方を、モバイルファーストの設計方針とあわせて、最初の一歩が踏み出せるよう基礎から整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/media-query-term"
markdown: "https://giga-site.com/articles/media-query-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# メディアクエリとは？画面幅でデザインを切り替えるCSSの基礎

同じページでも、スマホでは縦一列、PCでは横並び、というように表示が変わるサイトがあります。これを支えているのがCSSのメディアクエリです。この記事では、画面幅に応じてデザインを切り替えるメディアクエリの基礎を、初めての方向けに説明します。

> Source HTML: https://giga-site.com/articles/media-query-term
> Article index: https://giga-site.com/articles/index.md

## メディアクエリとは

メディアクエリとは、画面の幅などの条件に応じて、適用するデザインを切り替えるCSSのしくみです。「画面がこの幅より狭いときは、このスタイルにする」といった条件分けができます。

これを使うと、一つのHTMLのまま、スマホでは見やすい縦並び、PCでは情報量の多い横並び、というように表示を出し分けられます。端末ごとに別々のページを用意しなくてよいのが利点です。

画面の大きさに合わせて柔軟に表示を変えるこの考え方は、レスポンシブデザインと呼ばれる作り方の中心になっています。

## @mediaで条件を書く

メディアクエリは @media というキーワードで始め、その後ろに「どんな条件のときか」を書きます。よく使われるのは画面の幅に関する条件で、ある幅を境にスタイルを切り替えます。

条件に合うときだけ、その中に書いたデザインの指定が有効になります。条件に合わないときは無視されるので、基本のデザインと、特定の画面幅向けのデザインを併存させられます。

つまり「ふだんのデザイン」を用意したうえで、「この画面幅のときはこう変える」という上書きを足していくイメージです。

## 実務ではどこで関係する？

メディアクエリは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

メディアクエリについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## 画面幅で表示を切り替える手順

スマホとPCで表示を出し分けるレイアウトは、次の順で考えると整理しやすくなります。

1. まず土台となる基本のデザインを作る
2. 切り替えの境目になる画面幅（ブレークポイント）を決める
3. @mediaでその画面幅の条件を書く
4. 条件の中に、その幅で変えたい部分のスタイルだけを書く
5. ブラウザの幅を実際に変えて、切り替わりを確認する

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

デザインを切り替える境目の幅を、ブレークポイントと呼びます。スマホ・タブレット・PCといった大まかな区分に合わせて、いくつかの境目を設けるのが一般的です。

ただし、特定の機種の幅にぴったり合わせようとすると、機種が増えるたびに調整が必要になります。実際のデザインが崩れ始める幅を見ながら境目を決めると、機種に振り回されにくく、長く使える設定になります。

## 切り替えの確認と共有

メディアクエリの調整は、ブラウザの幅を変えながら切り替わりを確かめる作業の繰り返しです。手元では問題なくても、実際のスマホで見ると印象が違うこともあるため、いろいろな端末での確認が役立ちます。

ギガサイト便では、CSSを含むファイルやZIPをドロップすると共有URLが発行され、QRコードでの配布にも対応しています。発行されたURLのQRをスマホで読み取れば、実機での表示をその場で確認でき、関係者にも同じURLで見てもらえます。

## よくある質問

### メディアクエリは何のために使いますか

画面の幅などに応じてデザインを切り替えるために使います。一つのHTMLのまま、スマホでは縦並び、PCでは横並び、というように表示を出し分けられ、端末ごとに別ページを用意せずに済みます。

### ブレークポイントとは何ですか

デザインを切り替える境目になる画面幅のことです。スマホ・タブレット・PCといった区分に合わせて設けるのが一般的で、デザインが崩れ始める幅を見ながら決めると、機種に左右されにくくなります。

### 端末ごとに別のページを作る必要はありますか

メディアクエリを使えば、原則として一つのHTMLのままで端末ごとの表示に対応できます。画面幅に応じてスタイルを切り替えることで、別ページを用意しなくても見やすい表示を実現できます。

### スマホでの表示はどう確認すればよいですか

ブラウザの幅を変えて確かめるほか、実際のスマホで開いて確認するのが確実です。共有URLのQRコードをスマホで読み取れば、その場で実機の表示を確認でき、見え方のずれにも気づきやすくなります。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [ブレークポイントとは？レスポンシブで切り替える境目の基礎](https://giga-site.com/articles/breakpoint-term/index.md)
- [メディアクエリとは？画面幅で見た目を変えるCSS](https://giga-site.com/articles/what-is-media-query/index.md)
- [モバイルファーストとは？スマホ基準で設計する考え方の基礎](https://giga-site.com/articles/mobile-first-term/index.md)
- [タブレット幅だけ表示が中途半端に崩れるときの対処](https://giga-site.com/articles/tablet-breakpoint-awkward/index.md)
- [viewportとは？スマホ表示を整えるmetaタグの基礎](https://giga-site.com/articles/what-is-viewport/index.md)
- [クエリパラメータとは？URLの?以降の意味](https://giga-site.com/articles/what-is-query-parameter/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "メディアクエリとは？画面幅でデザインを切り替えるCSSの基礎",
  "description": "スマホ・タブレット・PCで表示を切り替えたいCSSの初心者へ。メディアクエリのブレークポイントの考え方と書き方を、モバイルファーストの設計方針とあわせて、最初の一歩が踏み出せるよう基礎から整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/media-query-term",
  "url": "https://giga-site.com/articles/media-query-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "メディアクエリは何のために使いますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "画面の幅などに応じてデザインを切り替えるために使います。一つのHTMLのまま、スマホでは縦並び、PCでは横並び、というように表示を出し分けられ、端末ごとに別ページを用意せずに済みます。"
      }
    },
    {
      "@type": "Question",
      "name": "ブレークポイントとは何ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "デザインを切り替える境目になる画面幅のことです。スマホ・タブレット・PCといった区分に合わせて設けるのが一般的で、デザインが崩れ始める幅を見ながら決めると、機種に左右されにくくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "端末ごとに別のページを作る必要はありますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "メディアクエリを使えば、原則として一つのHTMLのままで端末ごとの表示に対応できます。画面幅に応じてスタイルを切り替えることで、別ページを用意しなくても見やすい表示を実現できます。"
      }
    },
    {
      "@type": "Question",
      "name": "スマホでの表示はどう確認すればよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザの幅を変えて確かめるほか、実際のスマホで開いて確認するのが確実です。共有URLのQRコードをスマホで読み取れば、その場で実機の表示を確認でき、見え方のずれにも気づきやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```