デザイナーは、ユーザーに合わせてデザインを調整できます。最もわかりやすい例は、ユーザーのデバイスのフォーム ファクタ（幅、デバイスのアスペクト比など）です。メディアクエリを使用すると、デザイナーはさまざまなフォーム ファクタに対応できます。
メディアクエリは @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 列目の上部までスクロールし直す必要があります。ビューポートの幅と高さが十分な場合にのみ列を適用することをおすすめします。
メディアクエリを組み合わせて、すべての条件が true の場合にのみスタイルが適用されるようにすることができます。この例では、列スタイルを適用するには、ビューポートの幅が 50em 以上、高さが 30em 以上である必要があります。これらのブレークポイントは、コンテンツの量に基づいて選択されています。
@media (min-width: 50em) and (min-height: 30em) {
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 は有効なメディアクエリ機能条件ではありません。