デザイナーは、ユーザーに合わせてデザインを調整できます。 最もわかりやすい例は、ユーザーのデバイスのフォーム ファクタ（幅、デバイスのアスペクト比など）です。メディアクエリを使用すると、デザイナーはこれらのさまざまなフォーム ファクタに対応できます。
メディアクエリは @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 アットルールを使用してください。
ビューポートのサイズに基づいてスタイルを調整する
レスポンシブ デザインで最も有用なメディア機能の一つに、ブラウザのビューポートのサイズがあります。
ブラウザ ウィンドウの幅が特定の幅より大きい場合にスタイルを適用するには、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;
}
}
これらの例は、メディアクエリを使用してユーザーのデバイスのフォーム ファクタにデザインを適応させる方法を示しています。 これらは可能性のほんの一部にすぎません。メディア クエリは幅と高さだけでなく、ユーザー補助機能やテーマカラーのユーザー設定にもアクセスできます。メディアクエリを使用してレイアウトを調整することは、レスポンシブ デザインの最初のステップとして最適です。レスポンシブ デザインは、これらの機能などを基盤としています。
理解度をチェックする
レスポンシブ メディアクエリに関する知識をテストします。
メディアクエリは画面サイズにのみ存在しますか？
ウェブ コンテンツを消費または表示する場所は画面だけですか？
デフォルトのメディアタイプは
screenscreen はデフォルトのタイプではありません。nonenone は有効なメディアタイプではありません。allsomesome は有効なメディアタイプではありません。landscapelandscape は有効なメディアタイプではありません。モバイルでブラウザがデザインをスケーリングしないようにするには、何を使用すればよいですか。
width: 100%font-size: 200%<meta name="viewport" content="width=device-width, initial-scale=1">ブラウザ ウィンドウが 720px を超える場合に適用するメディアクエリ。
@media (width: 720px)720px に等しい場合にのみ使用されます。@media (max-width: 720px)720px 未満の場合に使用します。@media (min-width: 720px)720px 以上であることを意味します。@media (clamp-width: 720px)clamp-width は、有効なメディアクエリ機能条件ではありません。