メディアクエリ

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

メディアクエリは @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 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;
  }
}

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

理解度をチェックする

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