【2026年版】CSSメディアクエリ完全ガイド｜レスポンシブ対応の書き方とブレイクポイント設計

/* 画面幅が768px以上のとき適用 */
@media (min-width: 768px) {
  .container {
    max-width: 1100px;
    margin: 0 auto;
  }
}

/* 画面幅が480px以下のとき適用 */
@media (max-width: 480px) {
  .nav {
    display: none;
  }
}

/* 768px以上かつ1200px以下 */
@media (min-width: 768px) and (max-width: 1200px) {
  .sidebar {
    width: 280px;
  }
}

/* 480px以下または1400px以上（どちらか） */
@media (max-width: 480px), (min-width: 1400px) {
  .hero {
    padding: 40px 20px;
  }
}

/* ベース（全画面共通、主にモバイル想定） */
.card {
  display: block;
  padding: 16px;
}

/* 768px以上（タブレット〜PC）になったら2列に */
@media (min-width: 768px) {
  .card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* 1024px以上（PC）になったら3列に */
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ベース（PC向け） */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 767px以下（タブレット以下）なら2列 */
@media (max-width: 767px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 480px以下（スマホ）なら1列 */
@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* モバイルファーストの典型例 */

/* ベース：縦1列、フォント小さめ */
.hero {
  padding: 32px 16px;
  text-align: center;
}

.hero__title {
  font-size: 1.6rem;
  line-height: 1.4;
}

.hero__image {
  width: 100%;
  margin-top: 24px;
}

/* タブレット以上：横並びにする */
@media (min-width: 768px) {
  .hero {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 60px 40px;
    text-align: left;
  }

  .hero__title {
    font-size: 2.4rem;
  }

  .hero__image {
    width: 45%;
    margin-top: 0;
    flex-shrink: 0;
  }
}

/* デスクトップ以上：さらに大きく */
@media (min-width: 1200px) {
  .hero {
    padding: 80px 60px;
    max-width: 1300px;
    margin: 0 auto;
  }

  .hero__title {
    font-size: 3rem;
  }
}

/*
  ブレイクポイント定義（コメントで共有）
  --bp-sm: 640px
  --bp-md: 768px
  --bp-lg: 1024px
  --bp-xl: 1280px
*/

/* 使用箇所では数値を直接書く（カスタムプロパティはmq条件に使えない） */
@media (min-width: 768px) { /* --bp-md */ }
@media (min-width: 1024px) { /* --bp-lg */ }

<header class="site-header">
  <a href="/" class="logo">LOGO</a>
  <button class="hamburger" aria-label="メニューを開く">☰</button>
  <nav class="global-nav">
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/works">Works</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

/* ベース（モバイル） */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.global-nav {
  display: none; /* モバイルでは非表示 */
}

.hamburger {
  display: block;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* PC（768px以上） */
@media (min-width: 768px) {
  .global-nav {
    display: block; /* ナビを表示 */
  }

  .global-nav ul {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .hamburger {
    display: none; /* ハンバーガーを非表示 */
  }
}

/* モバイル：1列 */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* タブレット：2列 */
@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* PC：3列 */
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

/* 大型モニター：4列 */
@media (min-width: 1280px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* メディアクエリだけで切り替える方法 */
.section-title {
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
}

@media (min-width: 1200px) {
  .section-title {
    font-size: 2.8rem;
  }
}

/* clamp()を使って滑らかに変化させる方法 */
.section-title-fluid {
  /* 最小1.5rem → ビューポートに応じて → 最大3rem で変化 */
  font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
}

/* 縦向きのとき */
@media (orientation: portrait) {
  .hero-image {
    height: 40vh;
    object-fit: cover;
  }
}

/* 横向きのとき */
@media (orientation: landscape) {
  .hero-image {
    height: 60vh;
  }
}

/* 組み合わせ：横向きかつ最大高さが500px（スマホ横向きを判別） */
@media (orientation: landscape) and (max-height: 500px) {
  .fixed-header {
    height: 48px; /* 小さくして画面を有効活用 */
  }

  .hero {
    padding-top: 48px;
  }
}

/* ライトモード（デフォルト） */
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-primary: #d16176;
  --color-surface: #f5f5f5;
  --color-border: #e0e0e0;
}

/* ダークモード：OSがダークに設定されているとき */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-text: #f0f0f0;
    --color-primary: #e8889a;
    --color-surface: #2c2c2c;
    --color-border: #404040;
  }
}

/* 実際のスタイル（カスタムプロパティを参照するだけ） */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
}

/* OSのデフォルト：ライトモード */
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
}

/* data-theme="dark" が html 要素に付いたとき */
[data-theme="dark"] {
  --color-bg: #1a1a1a;
  --color-text: #f0f0f0;
}

/* OSがダークのとき、かつ data-theme="light" が指定されていないとき */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1a1a1a;
    --color-text: #f0f0f0;
  }
}

/* 従来の書き方 */
@media (min-width: 768px) { }
@media (max-width: 767px) { }
@media (min-width: 768px) and (max-width: 1199px) { }

/* ↓ range構文で書き直した版 */
@media (width >= 768px) { }
@media (width < 768px) { }
@media (768px <= width < 1200px) { }

/* heightにも使える */
@media (height >= 600px) {
  .hero {
    min-height: 100vh;
  }
}

/* 実践例：3段階のレスポンシブグリッド */
.grid {
  display: grid;
  gap: 20px;
}

@media (width < 640px) {
  .grid { grid-template-columns: 1fr; }
}

@media (640px <= width < 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (width >= 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* 1. 親要素にコンテナとして登録する */
.card-wrapper {
  container-type: inline-size; /* 横幅を基準にする */
  container-name: card-container; /* 名前は省略可 */
}

/* 2. @container で子要素のスタイルを切り替える */
@container (width >= 400px) {
  .card {
    display: flex;
    gap: 20px;
  }

  .card__image {
    width: 140px;
    flex-shrink: 0;
  }
}

@container (width < 400px) {
  .card {
    display: block;
  }

  .card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
}

/* 名前付きコンテナを指定して適用する場合 */
@container card-container (width >= 500px) {
  .card__title {
    font-size: 1.4rem;
  }
}

<!-- <head>に必ず入れる -->
<meta name="viewport" content="width=device-width, initial-scale=1">

/* NG：767と768の境界で両方が一瞬当たる可能性 */
@media (max-width: 768px) { }
@media (min-width: 768px) { }

/* OK：境界値をずらして重複を防ぐ */
@media (max-width: 767px) { }
@media (min-width: 768px) { }

/* もっと安全：range構文なら境界が明確 */
@media (width < 768px) { }
@media (width >= 768px) { }

/* OK：モバイルファーストの正しい順序 */
.box { width: 100%; }                          /* ベース */
@media (min-width: 640px) { .box { width: 50%; } }   /* sm */
@media (min-width: 1024px) { .box { width: 33%; } }  /* lg */

/* NG：順序が逆になっている */
@media (min-width: 1024px) { .box { width: 33%; } }  /* lgが先 */
@media (min-width: 640px) { .box { width: 50%; } }   /* smが後に来て上書きしてしまう */

/* 全画像のはみ出し防止 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ビデオにも適用 */
video,
iframe {
  max-width: 100%;
}

/* 通常：アニメーションあり */
.button {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.button:hover {
  transform: translateY(-2px);
}

/* アニメーション軽減設定のユーザーには動きを止める */
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: background-color 0.15s ease; /* 色変化は残してもよい */
  }

  .button:hover {
    transform: none;
  }

  /* すべてのアニメーションを一括で止める場合 */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}