--- title: '@media' slug: Web/CSS/@media tags: - '@-規則' - '@media' - CSS - Reference - 条件付き translation_of: Web/CSS/@media ---
{{CSSRef}}

CSS の @media @-規則は、一つまたは複数のメディアクエリの結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリを指定することができ、メディアクエリがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。

メモ: JavaScript では、 @media を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。

構文

@media @-規則は、コードの最上位に配置したり、他の条件付きグループ @-規則の中に入れ子にして配置したりすることができます。

/* コードの最上位 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 他の条件付き＠規則の中にネスト */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

メディアクエリの文法について詳しくは、メディアクエリの利用を参照してください。

形式文法

{{csssyntax}}

メディア特性

{{page("/ja/docs/Web/CSS/Media_Queries/Using_media_queries","Media features")}}

例

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリを記述できる新しい範囲の構文が導入されました。

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}

他の例については、メディアクエリの利用をご覧ください。

アクセシビリティの考慮事項

サイトの文字の大きさを調整する人のために、メディアクエリで {{cssxref("<length>")}} が必要な時には em を使用してください。

em および px はどちらも有効な単位ですが、 em はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。

また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリを使用することを検討してください。例えば、 prefers-reduced-motion はユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します。

セキュリティ

メディアクエリはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。

この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリは実際の端末の状態を表す値ではなく既定値を報告します。

仕様書

仕様書 備考 フィードバック
{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}} Level 4 で除外された light-level, inverted-colors およびカスタムメディアクエリを復帰。
prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, prefers-color-scheme の各メディア特性を追加。		 CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Conditional', '#at-media', '@media')}} {{Spec2('CSS3 Conditional')}} @media 規則の基本的な構文を定義。
{{SpecName('CSS4 Media Queries', '#media', '@media')}}

メディア特性 scripting, pointer, hover, update, overflow-block, overflow-inline を追加。
screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定。
構文をもっと柔軟にし、他の事の間に or キーワードを追加。

 CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}} 初回定義

ブラウザーの互換性

{{Compat("css.at-rules.media")}}

関連情報