DevTools のヒント: DevTools を使用して CSS ユーザー設定のメディア機能をエミュレートする方法

Sofia Emelianova

ユーザー設定のメディア機能を使用すると、ユーザーの特定の設定やニーズに合わせてウェブ エクスペリエンスをスタイル設定できます。つまり、ユーザーの期待に応じてユーザー エクスペリエンスを調整できます。

ウェブサイトのユーザー エクスペリエンスを向上させるには、次の 3 つのステップに沿って対応してください。

1. 可能性を発見しましょう。ユーザー設定のメディア機能について学習する。
2. ウェブ エクスペリエンスのスタイルを設定します。設定に応じて色、レイアウト、要素サイズを変更するなど、実装します。
3. UI をテストする。DevTools で設定をエミュレートし、ウェブサイトの動作をテストします。

DevTools はさまざまなエミュレーション オプションをサポートしています。システムとブラウザの設定を検索して調整しなくても済むように、すべてのエミュレーション オプションが 1 か所にまとめられています。DevTools の [レンダリング] タブで確認できます。

ユーザーの設定のエミュレーション オプションには、次のようなものがあります（ただし、これらに限定されません）。

• prefers-color scheme - ライトまたはダークのカラーパターン
• prefers-contrast - コントラストを下げる、または上げる
• prefers-reduced-motion - モーションを最小限に抑えるかどうか
• prefers-reduced-data - トラフィックを抑えるかどうか

すべてのエミュレーション オプションの一覧については、CSS メディア機能をエミュレートするをご覧ください。

[レンダリング] タブを使用して適用できるその他の効果については、[レンダリング] タブの概要をご覧ください。

また、DevTools では、テスト機能が作業している 1 つのデバイスに限定されません。Device Mode でモバイル デバイスをシミュレートできます。