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. ページを再読み込みします。次に例を示します。

Emulated prefers-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 で指定されている色域に近い色域以上