CSS メディアクエリ

CSS2では、メディアタイプが導入されました。

CSS2では、 @media ルールは、異なるメディアタイプに対して異なるスタイルルールを定義する可能性を提供します。

例えば、コンピュータのスクリーン用のスタイルルール、プリンタ用のルール、ハンドヘルドデバイス用のルール、テレビ用のルールなどがあります。

残念ながら、印刷メディアタイプ以外のこれらのメディアタイプは、デバイスから大規模にサポートされていません。

CSS3はメディアクエリを導入しました

CSS3のメディアクエリはCSS2のメディアタイプの概念を拡張しています：彼らはデバイスのタイプを探すのではなく、デバイスの能力に焦点を当てています。

メディアクエリは多くのことがチェックできるため、例えば：

  • ビューポートの幅と高さ
  • デバイスの幅と高さ
  • 方向（タブレットやスマートフォンが横向きか縦向きかのモード）
  • 解像度

メディアクエリを使用することは、デスクトップ、ラップトップ、タブレット、スマートフォン（例えばiPhoneやAndroidスマートフォン）にカスタムのスタイルシートを提供する人気のある技術です。

ブラウザのサポート

テーブルの数字は完全なサポートを示しています @media 規則の最初のブラウザバージョン。

属性
@media 21.0 9.0 3.5 4.0 9.0

メディアクエリの構文

メディアクエリは一つのメディアタイプで構成され、一つまたは複数の式を含み、これらの式はtrueまたはfalseとして解釈できます。

@media not|only mediatype and (expressions) {
  CSS-Code;
}

指定されたメディアタイプが表示されているデバイスのタイプと一致し、メディアクエリ内のすべての式がtrueの場合、クエリの結果はtrueです。メディアクエリがtrueの場合、対応するスタイルシートやスタイルルールが適用され、通常の継承規則に従います。

notまたはonly演算子を使用していない場合、メディアタイプは任意であり、暗黙的に指定されます。 all タイプ。

異なるメディアに対して異なるスタイルシートを使用することもできます：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 メディアタイプ

値 説明
all すべてのメディアタイプのデバイス用
print プリンター用
screen コンピュータのスクリーン、タブレット、スマートフォンなどに使用
speech ページを大声で「読み上げ」するスクリーンリーダー用

メディアクエリの簡単な例

メディアクエリを使用する方法の一つは、スタイルシート内に代替のCSS部分を持つことです。

以下の例では、ビューポートの幅が480ピクセル以上の場合に背景色を薄緑色に変更します（ビューポートの幅が480ピクセル未満の場合、背景色はピンクになります）：

例

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

自分で試してみる

以下は、ビューポートの幅が480ピクセル以上の場合、メニューがページの左側にフロートする例です（ビューポートの幅が480ピクセル未満の場合、メニューはコンテンツの上部に配置されます）：

例

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

自分で試してみる

さらに多くのメディアクエリの例

さらに多くのメディアクエリの例が必要な場合は、次のページにアクセスしてください：CSS MQ 例。

CSS @media リファレンスマニュアル

すべてのメディアタイプと特性/表現の完全な概要については、以下を確認してください。 CSS 参考の @media ルール。