メディア機能

メディア機能でデバイスやそれに対応する方法のまとめ 設定。

レスポンシブ デザインは、メディアクエリなしでは実現できません。メディアクエリが登場する前は、ユーザーがどのようなデバイスでウェブサイトにアクセスしているかを把握する手段はありませんでした。デザイナーは仮説を立てる必要がありました。これらの前提条件は、固定幅のデザインまたはリキッド レイアウトにエンコードされています。

メディアクエリの導入によって、このすべてが変わりました。デザイナーが途中で人々と初めて会うことができました。デザイナーは、ユーザーのデバイスに合わせてレイアウトを調整できます。

メディアクエリは、オプションのメディアタイプと必須のメディア機能で構成されます。ここ数年でメディアの種類は大きく変化していません。有効な値は次の 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 の 2 つの可能な値があります。

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

「ポートレート」という言葉は「landscape」をほとんどの場合、モバイル デバイスの向きを示すために使用されます。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）も報告できます。詳細については、インタラクションに関するモジュールをご覧ください。

設定

prefers-color-scheme、prefers-contrast、prefers-reduced-motion などのさまざまなメディアクエリを使用して、ユーザー設定に応答できます。詳しくは、テーマ設定とユーザー補助に関するモジュールをご覧ください。

1 つのメディアクエリで複数のメディア機能を組み合わせることができます。デバイスのリフレッシュ レートが高速で、ユーザーが動きの抑制を望まない場合にのみ適用されるよう、アニメーション スタイルの範囲を設定できます。

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

その他のメディア機能

今後、他のメディア機能も追加される予定です。

forced-colors と inverted-colors のメディア機能は、デバイスが制限付きのカラーパレットまたは反転したカラーパレットのどちらを使用しているかを報告します。

scripting メディア機能を使用すると、JavaScript の可用性に基づいて CSS を調整できます。

prefers-reduced-data というメディア機能では、従量制接続を使用していることをユーザーが指定でき、送信するアセットの数を減らしたり、サイズを小さくしたりできます。

その他の提案は現在作成中です。次の最後のモジュールでは、さまざまな画面構成を処理するメディア機能の提案について説明します。

理解度をチェックする

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