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

Sofia Emelianova
Sofia Emelianova
GitHub

[Rendering] タブのエミュレーション オプションのリファレンスを使用して、さまざまな 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 をエミュレート

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

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

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

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

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

CSS メディア対象物 prefers-reduced-motion をエミュレート

CSS メディア機能 prefers-reduced-motion は、ページ上の動きの量を最小限に抑えるようユーザーがリクエストしたかどうかを示します。

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

  1. こちらのデモの [レンダリング] タブを開き、スクロールしてさまざまなアニメーションを見てみましょう。
  2. [Emulate CSS media feature prefers-reduced-motion] で prefers-reduced-motion:reduce を選択します。
  3. もう一度スクロールしてみてください。

CSS メディア対象物 prefers-reduced-transparency をエミュレート

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

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

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

  1. [レンダリング] タブを開きます。
  2. [Emulate CSS media feature 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 以上で指定されているおおよその色域