Media の機能

メディア機能でデバイスや設定に応答できるすべての方法の概要。

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

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

メディアクエリは、オプションのメディアタイプと必須のメディア機能で構成されます。メディアの種類は長年にわたってほとんど変わっていません。指定可能な値は引き続き 4 つです。

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

一方、メディア機能は大幅に拡張されています。デザイナーは、画面サイズだけでなく、はるかに幅広いデバイスに適合するようにデザインを調整し、ユーザーのニーズに応えることができます。

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

ビューポートのサイズ

ウェブで最もよく使用されているメディアクエリは、ビューポートの幅を扱うものです。ただし、ここでも選択肢があります。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- の接頭辞の選択は、widthheight にのみ適用されるわけではありません。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(インチあたりのドット数)で測定されます。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 メディア機能を使用して、さまざまなリフレッシュ レートに対応するように調整できます。このメディア機能は、noneslowfast のいずれかの値を報告します。

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

update 値が slow の場合、ディスプレイを高速に更新できないことを意味します。リフレッシュ レートが遅い画面の例として、電子ペーパー ディスプレイがあります。

update の値が fast の場合、ディスプレイはアニメーションと遷移を処理できるほど高速に更新されます。

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

ディスプレイのすべての要素がハードウェアの機能に関連しているわけではありません。テーマ設定に関するモジュールでは、ウェブアプリ マニフェスト ファイルでプロパティを定義する方法について説明しました。これらのプロパティの 1 つは display と呼ばれ、fullscreenstandaloneminimum-uibrowser の値を指定できます。対応する 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-gamutcolor-indexdynamic-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);
  }
}

インタラクション

メディア機能では、サイトの操作に使用された入力メカニズムの種類(hoverany-hoverpointerany-pointer)も報告できます。詳細については、インタラクションに関するモジュールをご覧ください。

設定

ユーザーの設定に応答できるさまざまなメディアクエリ(prefers-color-schemeprefers-contrastprefers-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 というメディア機能により、ユーザーは従量制接続を使用していることを指定できるため、より小さいアセットやアセットの数を送信できます。

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

理解度を確認する

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

メディアクエリで、@media (width: 1024px) のような特定の幅のデバイスを確認できますか?

正しい
特定の幅を指定するには、1023px より大きい幅と 1025px より小さい幅を同時に確認する必要があります。
False
min-widthmax-width を使用できます。

メディアクエリで、@media (aspect-ratio: 4/3) などの特定の aspect-ratio にあるデバイスを確認できますか?

正しい
アスペクト比に固有の機能として、1 つの比率を一致させることができます。
False
このオプションは aspect-ratio に存在します。

有効なカラー メディアクエリはどれですか?

@media (color)
任意の色のデバイスに一致します。
@media (monochrome)
カラー対応ではないすべてのデバイスに一致します。
@media (color-gamut: srgb)
sRGB カラー対応のデバイスと一致します。
@media (min-color-index: 15000)
利用可能な色が 15,000 色以上のデバイスに一致します。
@media (dynamic-range: high)
HD の色域に対応しているデバイスと一致します。

次のユーザー設定メディア クエリのうち、有効なものはどれですか。

@media (prefers-color-scheme: dark)
ユーザーがオペレーティング システムをダークモードに設定している場合に一致します。
@media (prefers-colors: high-definition)
実在しない。
@media (prefers-reduced-motion: reduce)
ユーザーがオペレーティング システムでモーションを低減するように設定している場合に一致します。
@media (prefers-contrast: more)
ユーザーがオペレーティング システムのコントラストを高く設定している場合に一致します。
@media (prefers-site-speed: fast)
実在しない。