メディアクエリ

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

メディアクエリは @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 列目の一番上まで戻る必要があります。 ビューポートが十分な幅と高さがある場合にのみ、列を適用する方が安全です。

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

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

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

理解度をチェックする

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