メディアクエリ

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

メディアクエリは @media キーワード（CSS の @ 規則）で始まり、さまざまなユースケースで使用できます。

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

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

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

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

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

スタイルシートで @media @ 規則を使用することも、別のスタイルシートを作成して 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 @規則を使用してください。

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

レスポンシブ デザインで最も便利なメディア機能の 1 つは、ブラウザのビューポートの寸法に関するものです。ブラウザ ウィンドウの幅が特定の幅より広い場合にスタイルを適用するには、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. */
}

このメディアクエリは、width メディア機能と小なりイコール演算子を使用して記述することもできます。

@media (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. /*
}

これは範囲構文を使用して記述することもできます。

@media (50em <= 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 以上、高さが 30em 以上である必要があります。これらのブレークポイントは、コンテンツの量に基づいて選択されました。

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

or キーワードと not キーワードを使用して、スタイルを適用する際のより複雑な状況を表現することもできます。これらは論理的に推論するのが難しい場合があるため、想定どおりに動作し、やり取りしていることを必ずテストしてください。

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

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

理解度を確認する

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