メディアクエリ

デザイナーはユーザーに合わせてデザインを調整できます。最もわかりやすい例は、ユーザーのデバイスのフォーム ファクタ（デバイスの幅、デバイスのアスペクト比など）です。デザイナーは、メディアクエリを使用することで、こうしたさまざまなフォーム ファクタに対応できます。

メディアクエリは @media キーワードで開始され（通常は CSS で）、さまざまなユースケースに使用できます。

さまざまなタイプの出力をターゲットにする

ウェブサイトは多くの場合画面に表示されますが、CSS を使用して他の出力用のウェブサイトのスタイルを設定することもできます。 たとえば、ウェブページで画面の見た目を一方向に変えて、印刷時には別のウェブページに表示したい場合があります。 これは、メディアタイプをクエリすることで可能になります。

この例では、背景色はグレーに設定されています。 ただし、ページが印刷されている場合は、背景色を透明にする必要があります。これにより、ユーザーのプリンタのインクを節約できます。

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

スタイルシートで @media at ルールを使用するか、別のスタイルシートを作成して link 要素で media 属性を使用します。

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

CSS のメディアタイプを指定しない場合は、自動的に all のメディアタイプ値が設定されます。次の 2 つの CSS ブロックは同じものです。

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

この 2 行の HTML も同じ内容です。

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

クエリの条件

メディアタイプに条件を追加できます。これらはメディアクエリと呼ばれます。 CSS は、メディアタイプが一致し、かつ条件も true である場合にのみ適用されます。 これらの条件はメディア機能と呼ばれます。

メディアクエリの構文は次のとおりです。

@media type and (feature)

スタイルが別のスタイルシートに含まれている場合は、link 要素でメディアクエリを使用できます。

<link rel="stylesheet" href="specific.css" media="type and (feature)">

ブラウザ ウィンドウが横表示（ビューポートの幅が高さより広い）かポートレート モード（ビューポートの高さが幅より広い）かに応じて、異なるスタイルを適用するとします。テストに使用できる orientation というメディア機能があります。

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

または、個別のスタイルシートを使用します。

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

この場合、メディアタイプは all です。これはデフォルト値であるため、必要に応じて省略できます。

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

または、個別のスタイルシートを使用します。

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

メディア タイプごとに個別のスタイルシート（print など）を使用しても問題ない場合もありますが、メディアクエリごとに個別のスタイルシートを使用することはおすすめしません。代わりに @media at-rules を使用してください。

ビューポートのサイズに基づいてスタイルを調整する

レスポンシブ デザインにおいて最も有用なメディア機能の一つに、ブラウザのビューポートのサイズに関するものがあります。 ブラウザ ウィンドウが特定の幅よりも広い場合にスタイルを適用するには、min-width を使用します。

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

特定の幅未満でスタイルを適用するには、max-width メディア機能を使用します。

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

メディアクエリでは、任意の CSS の長さの単位を使用できます。 コンテンツが主に画像をベースにしている場合は、ピクセルを使用するのが理にかなっています。 コンテンツが主にテキストベースの場合は、em や ch など、テキストサイズに基づく相対単位を使用した方が理にかなっています。

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

メディアクエリを組み合わせて、複数の条件を適用することもできます。 メディアクエリを組み合わせるには、次のように and という単語を使用します。

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

コンテンツに基づいてブレークポイントを選択する

メディア機能の条件が true になるポイントをブレークポイントといいます。 ブレークポイントは、一般的なデバイスのサイズではなく、コンテンツに基づいて選択することをおすすめします。デバイスのサイズはテクノロジーのリリース サイクルのたびに変更される可能性があるためです。

この例の 50em は、テキスト行が異常に長くなってしまう点です。 そのため、インターフェースを読みやすくするためにブレークポイントが作成されます。column-count プロパティを使用すると、テキストはその時点から 2 つの列に分割されます。

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

組み合わせ

ビューポートの幅だけではなく、高さに基づいてメディアクエリを使用できます。 これは、「スクロールせずに見える範囲」のインターフェース コンテンツを最適化するのに便利です。上の例で、読者が幅広で短いブラウザ ウィンドウを使用している場合、読者は 1 列下へスクロールしてから 2 列の先頭までスクロールする必要があります。ビューポートの幅と高さが十分にある場合にのみ列を適用する方が安全です。

すべての条件が true の場合にのみスタイルが適用されるように、メディアクエリを組み合わせることができます。 この例で列のスタイルを適用するには、ビューポートの幅が 50em 以上、高さが 60em 以上である必要があります。 これらのブレークポイントはコンテンツの量に基づいて選択されています。

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

以下の例は、メディアクエリを使用してユーザーのデバイスのフォーム ファクタにデザインを適応させる方法を示していますが、これは可能性のほんの一部にすぎません。メディアクエリでは、幅と高さだけでなく、ユーザー補助機能やテーマカラーに関するユーザー設定にアクセスできます。メディアクエリを使用してレイアウトを調整することは、レスポンシブ デザインの出発点になります。レスポンシブ デザインは、これらの機能などを基に構築されています。

理解度チェック

レスポンシブ メディアクエリに関する知識をテストします。