Media の機能

レスポンシブ デザインは、メディアクエリなしでは実現できません。メディアクエリが登場するまでは、ユーザーがウェブサイトにアクセスする際に使用しているデバイスの種類を把握する方法はありませんでした。デザイナーは仮定を立てる必要がありました。これらの想定は、固定幅のデザインまたはリキッド レイアウトにエンコードされていました。

メディアクエリの導入により、状況は一変しました。デザイナーは初めて、ユーザーのニーズに寄り添うことができました。デザイナーは、ユーザーのデバイスに合わせてレイアウトを調整できます。

メディアクエリは、省略可能なメディアタイプと必須のメディア機能で構成されます。メディアの種類は、この数年で大きな変化はありません。指定できる値は次の 4 つのみです。

@media all
@media screen
@media print
@media speech

一方、メディア機能は大幅に拡大しています。デザイナーは、画面サイズだけでなく、デザインをより多くのものに適合させることで、ユーザーのニーズをより深く満たすことができるようになりました。

ビューポートの寸法

ウェブ上で最もよく使用されているメディアクエリは、ビューポートの幅を扱うものです。ただし、ここでも選択肢が表示されます。max-width メディア機能を使用して特定の幅以下のスタイルを適用することも、min-width メディア機能を使用して特定の幅以上のスタイルを適用することもできます。

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

個人的には min-width を使用するのが好きです。レイアウト スタイルは加法的に適用します。前のルールを元に戻すのではなく、各ブレークポイントで新しいレイアウト ルールを導入します。

この加算的なアプローチは高さにも適用できます。min-height を使用すると、ビューポートの高さが大きくなるにつれて、より多くのルールを導入できます。たとえば、十分な垂直方向のスペースがある場合に、ブラウザ ウィンドウの上部に固定したいヘッダー要素があるとします。

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

ただし、必要に応じて max-height メディア機能を使用できます。ここでは、ヘッダーはデフォルトで固定されますが、垂直方向のスペースが十分にない場合は固定が解除されます。

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

min- と max- の接頭辞の選択は、width と height にのみ適用されるわけではありません。aspect-ratio メディア機能でも同じ選択肢が提供されます。幅と高さの比率を正確に適用したい場合は、プレフィックスなしのバージョンも用意されています。

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

アスペクト比ごとに異なるスタイルを提供すると、すぐに手に負えなくなる可能性があります。このようなきめ細かい制御が必要ない場合は、orientation メディア機能の方がニーズに適している可能性があります。有効な値は portrait または landscape です。

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

「縦向き」と「横向き」という用語はモバイル デバイスの向きを指す場合によく使用されますが、orientation メディア機能はデバイス固有のものではありません。一般的なノートパソコンの全画面ブラウザ ウィンドウの orientation 値は landscape になります。

ディスプレイ

ディスプレイによってピクセル密度が異なり、dpi（1 インチあたりのドット数）で測定されます。resolution メディア機能を使用すると、さまざまなピクセル密度に合わせてスタイルを調整できます。aspect-ratio と同様に、resolution には最小、最大、完全一致の 3 種類があります。

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

resolution メディアクエリを使用する必要がない場合もあります。通常、ピクセル密度が問題になるのは画像のみです。レスポンシブ画像は、HTML でピクセル密度を直接処理する方法です。

一方、CSS ではアニメーションとトランジションを定義します。update メディア機能を使用すると、さまざまなリフレッシュ レートに対応するようにアニメーションとトランジションを調整できます。このメディア機能は、none、slow、fast の 3 つの値のいずれかをレポートします。

update の値が none の場合、リフレッシュ レートはありません。たとえば、印刷されたページは更新できません。

update の値が slow の場合、ディスプレイをすばやく更新できません。電子インク ディスプレイは、リフレッシュ レートが遅い画面の一例です。

update の値が fast の場合、アニメーションとトランジションを処理するのに十分な速さでディスプレイが更新されることを意味します。

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

ディスプレイのすべての側面がハードウェア機能に関連しているわけではありません。テーマ設定に関するモジュールでは、ウェブアプリ マニフェスト ファイルでプロパティを定義する方法について説明しました。これらのプロパティの 1 つは display と呼ばれ、fullscreen、standalone、minimum-ui、browser のいずれかの値を指定できます。対応する display-mode メディア機能を使用すると、これらのさまざまなオプションに合わせてスタイルを調整できます。

たとえば、ウェブアプリ マニフェストで display の値として standalone を指定したとします。ユーザーがサイトをホーム画面に追加すると、ブラウザ インターフェースなしでサイトが起動します。そうしたユーザーには戻るボタンを表示することをおすすめします。

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

色

デバイスのカラー機能をクエリするためのメディア機能は多数あります。グレースケールのみを出力するディスプレイのスタイルを調整する場合は、値なしで monochrome メディア機能を使用できます。

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

対応する color メディア機能があります。

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

カラー画面の場合は、メディア機能 color-gamut、color-index、dynamic-range を使用してクエリを記述できます。これらはすべて、画面の色機能に関する具体的な詳細をレポートします。

この例では、ディスプレイの最大輝度、色深度、コントラスト比の組み合わせをレポートする dynamic-range メディア機能に応じて、色の値が更新されます。有効な値は standard または high です。dynamic-range 値が high の高精細度スクリーンには、新しい CSS color() 関数を使用して別の色空間が与えられます。

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

インタラクション

メディア機能では、サイトの操作に使用される入力メカニズムの種類（hover、any-hover、pointer、any-pointer）を報告することもできます。詳しくは、インタラクションに関するモジュールをご覧ください。

ユーザー設定のクエリ

CSS を使用すると、ユーザーと協力して、ユーザーがコンテンツにアクセスしやすいようにすることができます。このレッスンでは、ユーザーのデバイスのサイズと機能に基づいてさまざまな CSS を適用する方法を学びました。ユーザーの設定に基づいて異なる CSS を適用することもできます。

ダークモードとライトモード

ライトモードとダークモードのどちらを使用するかというユーザーの設定に対応できます。多くのユーザーがこれをシステム設定として設定しています。

UI 要素の配色を設定する

ブラウザでは、スクロールバーやフォーム要素などのデフォルトの色が用意されています。color-scheme: light を使用するユーザーにはライトモードを、color-scheme: dark を使用するユーザーにはダークモードを使用するかどうかを指定できます。color-scheme: light dark を使用して、ページが両方をサポートしていることを指定することもできます。:root 要素または html 要素で設定してページ全体のスキームを設定することも、特定の要素でオーバーライドすることもできます。

また、color-scheme の meta タグを設定して、スタイルが読み込まれる前にページのスキームを設定することもできます。ページ内の要素に color-scheme: normal を設定すると、このメタタグで設定した color-scheme 値が使用されます。

<meta name="color-scheme" content="dark light">

prefers-color-scheme メディア機能

また、prefers-color-scheme のメディアクエリを使用して、ユーザーが選択したカラーテーマに応じてカスタム スタイルを定義することもできます。

light-dark

ユーザーにライトモードとダークモードの両方を提供する場合、メディアクエリ内で各色を設定するのは冗長になる可能性があります。light-dark() を使用すると、両方を 1 つのプロパティで指定できます。

これを有効にするには、要素またはその祖先のいずれかに color-scheme: light dark を設定する必要があります。まず、ライトモードで使用する色を設定し、次にダークモードで使用する色を設定します。

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

システム設定でライトモードがリクエストされている場合、見出しは黒になります。ダークモードが選択されている場合は、見出しは白になります。

コントラストの設定

ユーザーは、コントラストが高いコンテンツや低いコンテンツを読みやすいと感じることがあります。そのため、ユーザーがシステムを設定して、テーマを自分にとって最適なものにオーバーライドすることがあります。サイトがユーザーの好みに合わせて適切に機能するようにすることが、サイト運営者の役割です。

カスケード モジュールで説明したように、!important ローカル ユーザー スタイルは、ウェブページが提供する作成者スタイルをオーバーライドできます。これにより、ユーザーは自分に合ったスタイルを使用できます。

色の強制

Windows には、ユーザーが選択してウェブサイトのテーマをオーバーライドできる「コントラスト テーマ」が用意されています。多くの場合、高コントラストのテーマで、ライトモードまたはダークモードがあります。CSS では、これは強制カラーと呼ばれます。ほとんどの場合、このモードでもサイトは期待どおりに動作します。ボタン、リンク、入力などのコンテンツには、テーマの色が使用されます。

要素を標準以外の方法で使用している場合など、スタイルを調整する必要があることがあります。@media (forced-colors: active) メディアクエリを使用すると、ユーザーが強制カラーを有効にしたときにスタイルを適用できます。

サイトのスタイルがコンテンツ自体を理解するうえで不可欠な場合もあります。たとえば、カラーキー付きのグラフやカラー選択ツールなどです。要素に forced-color-adjust: none; を設定すると、強制配色モードを無効にできます。特定の要素でのみオプトアウトし、強制配色モードでコンテンツにアクセスできることを確認してください。

高コントラスト

コントラストの向上をリクエストするようにシステムを設定することもできます。prefers-contrast: more メディアクエリを使用して、レスポンスでスタイルを調整できます。

モーションを抑制

prefers-reduced-motion メディアクエリを使用すると、モーションの削減を希望するユーザーの好みに対応できます。これは、てんかん、前庭運動障害、片頭痛の感受性を持つ人々のトリガーとなる可能性のある大きな動きを避ける代替アニメーションを提供するために使用されることがよくあります。詳しくは、アニメーションを使用する際の考慮事項をご覧ください。

スクリプト

ユーザーが JavaScript を無効にしてサイトにアクセスする可能性もあります。その場合でも、scripting メディアクエリを使用してコンテンツにアクセスできるように CSS を調整できます。

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

理解度を確認する

メディア機能に関する知識をテストする