@media

その他

画面サイズ、デバイスタイプ、印刷状況などの条件に基づいてスタイルを適用するルールです。レスポンシブデザインの基礎となる機能で、モバイル、タブレット、デスクトップなど様々なデバイスに対応できます。

構文

Syntax

@media <media-query> { ... }

コード例

例 1

@media (max-width: 768px) {
  .container {
    padding: 1rem;
    font-size: 14px;
  }
}

実行結果

@media (max-width: 768px) → モバイル対応

デスクトップ表示（768px超）

Container

モバイル表示（768px以下）

Container - 小さいパディング・フォント

画面幅に応じてパディングとフォントサイズが変化

モバイル（768px以下）でのレイアウト調整

例 2

@media (min-width: 769px) and (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

実行結果

@media (min-width: 769px) and (max-width: 1024px) → タブレット対応

デスクトップ（1025px以上）

タブレット（769px〜1024px）

タブレットでは2列、デスクトップでは4列のグリッド

タブレット（769px〜1024px）で2列グリッド

例 3

@media (min-width: 1025px) {
  .sidebar {
    display: block;
  }
  .main {
    margin-left: 250px;
  }
}

実行結果

@media (min-width: 1025px) → デスクトップ対応

モバイル・タブレット（1024px以下）

メインコンテンツ

サイドバー非表示

デスクトップ（1025px以上）

サイドバー

表示

メインコンテンツ

左マージン付き

デスクトップでサイドバーが表示され、メインコンテンツに左マージンが付く

デスクトップ（1025px以上）でサイドバー表示

例 4

@media (orientation: portrait) {
  .hero {
    height: 50vh;
  }
}

@media (orientation: landscape) {
  .hero {
    height: 100vh;
  }
}

実行結果

@media (orientation: portrait/landscape) → デバイス向き対応

縦向き（Portrait）

Hero Section

height: 50vh

横向き（Landscape）

Hero Section

height: 100vh

デバイスの向きに応じてヒーローセクションの高さが変化

デバイスの向き（縦・横）に応じた高さ調整

例 5

@media print {
  .no-print {
    display: none;
  }
  body {
    font-size: 12pt;
    color: black;
  }
}

実行結果

@media print → 印刷対応

画面表示

重要なコンテンツ

印刷不要な要素（広告など）

カラーテキスト

印刷時

重要なコンテンツ

[印刷不要な要素は非表示]

黒色テキスト (12pt)

印刷時は不要な要素を非表示にし、フォントサイズと色を調整

印刷時のスタイル調整

例 6

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #ffffff;
  }
}

実行結果

@media (prefers-color-scheme: dark) → ダークモード対応

ライトモード

ページコンテンツ

background: white, color: black

ダークモード

ページコンテンツ

background: #1a1a1a, color: white

ユーザーのシステム設定に応じてダークモードを自動適用

ダークモード対応

💡 TIPS

モバイルファーストで設計し、小さい画面から大きい画面へとスタイルを追加していくのが一般的。breakpointは320px, 768px, 1024px, 1200pxなどがよく使われる。

⚠️ よくある間違い

max-widthとmin-widthの使い分けを間違えると意図しない結果になる。重複する条件で後から書いたルールが優先される。

ブラウザサポート

IE9+, 全モダンブラウザ

@media

構文

コード例

例 1

例 2

例 3

例 4

例 5

例 6

💡 TIPS

⚠️ よくある間違い

関連プロパティ

ブラウザサポート