CSS メディア機能をエミュレートする

Sofia Emelianova
Sofia Emelianova
GitHub

[レンダリング] タブでエミュレーション オプションの参照を使用して、さまざまな CSS メディア特性をエミュレートします。

CSS メディア特性 prefers-color-scheme をエミュレートする

prefers-color-scheme CSS メディア特性は、ユーザーがライトモードとダークモードのどちらを好むかを示します。

この状況をエミュレートするには:

  1. [prefers-color-scheme] ページで、[レンダリング] タブを開きます。

  2. [CSS メディア機能 prefers-color-scheme のエミュレート] で、プルダウン リストから次のいずれかを選択します。

    • エミュレーションなし
    • prefers-color-scheme:light
    • prefers-color-scheme:dark

  3. ページを再読み込みします。例:

エミュレートされた Preferreds-color-scheme:dark

CSS メディアタイプをエミュレートする（印刷プレビューを有効にする）

印刷メディア クエリは、印刷時のページの外観を制御します。

ページを強制的に印刷プレビュー モードにするには:

  1. [レンダリング] タブを開き、[CSS メディアタイプをエミュレート] で [印刷] を選択します。

    印刷プレビュー モード

  2. ここでは、他のウェブページと同様に CSS を表示、変更できます。CSS の表示と変更を始めるをご覧ください。

CSS メディア特性 forced-colors をエミュレートする

forced-colors CSS メディア機能は、ユーザー エージェントが強制色モードを有効にしたかどうかを示します。強制カラーモードの例としては、Windows のハイ コントラストがあります。

この条件をエミュレートするには:

  1. [レンダリング] タブを開きます。

  2. [CSS メディア機能の模倣 forced-colors] で、プルダウン リストから次のいずれかを選択します。

    • エミュレーションなし
    • forced-colors:active
    • forced-colors:none

forced-colors:active をエミュレートした場合:

forced-colors:active

CSS メディア特性 prefers-contrast をエミュレートする

prefers-contrast CSS メディア機能は、ユーザーがウェブ コンテンツを高いコントラスト値、低いコントラスト値、または特定のコントラスト値で表示するようリクエストしたかどうかを示します。

この状況をエミュレートするには:

  1. [レンダリング] タブを開きます。

  2. [CSS メディア機能の模倣 prefers-contrast] で、プルダウン リストから次のいずれかを選択します。

    • エミュレーションなし
    • prefers-contrast:more
    • prefers-contrast:less
    • prefers-contrast:custom

CSS メディア特性 prefers-reduced-motion をエミュレートする

prefers-reduced-motion CSS メディア機能は、ユーザーがページ上のモーション量の最小化をリクエストしているかどうかを示します。

この状況をエミュレートするには:

  1. こちらのデモで[レンダリング] タブを開き、スクロールしてさまざまなアニメーションを確認してみてください。
  2. [CSS メディア特性 prefers-reduced-motion をエミュレートする] で、prefers-reduced-motion:reduce を選択します。
  3. もう一度スクロールしてみてください。

CSS メディア特性 prefers-reduced-transparency をエミュレートする

prefers-reduced-transparency CSS メディア機能は、ユーザーがデバイスで使用される透明または半透明のレイヤ効果を減らすようリクエストしたかどうかを示します。

prefers-reduced-transparency 機能は Chrome 118 以降で利用可能になり、ユーザーが選択した設定にウェブ コンテンツを適応させ、OS の透明性を下げることができます（macOS の [透明度を下げる] 設定など）。

この状況をエミュレートするには:

  1. [レンダリング] タブを開きます。
  2. [CSS メディア特性 prefers-reduced-transparency をエミュレートする] で、prefers-reduced-transparency: reduce を選択します。
  3. ページが正しく表示されるかどうかを確認します。

CSS メディア特性 color-gamut をエミュレートする

color-gamut CSS メディア機能は、ユーザー エージェントと出力デバイスがサポートする色の範囲を示します。

この条件をエミュレートするには:

  1. [レンダリング] タブを開きます。

  2. [CSS メディア機能 color-gamut のエミュレート] で、プルダウン リストから次のいずれかを選択します。

    • エミュレーションなし
    • color-gamut:srgb - 約 sRGB 色域以上
    • color-gamut:p3 - Display P3 色空間で指定されている色域以上
    • color-gamut:rec2020 - Rec. 2020 以上で指定された色域