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

Sofia Emelianova

ユーザー設定のメディア機能を使用すると、ユーザー固有の好みやニーズに合わせてウェブ エクスペリエンスのスタイルを設定できます。つまり、プリファレンス メディア機能を使用すると、ユーザー エクスペリエンスをユーザーの期待に適応させることができます。

次の 3 つのステップを踏むことで、ウェブサイトのユーザー エクスペリエンスを向上させることができます。

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

DevTools は、さまざまなエミュレーション オプションをサポートしています。システムやブラウザの設定を検索して調整する必要がないように、すべてのエミュレーション オプションが DevTools の [Rendering] タブにあります。

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

• prefers-color scheme - ライトまたはダークのカラーパターン
• prefers-contrast - コントラストを高くまたは高くする
• prefers-reduced-motion - モーションを最小化するかどうか
• prefers-reduced-data - トラフィックの消費が抑えられるかどうか

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

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

さらに、DevTools では、テスト機能は、作業中の 1 台のデバイスに限定されません。Device Mode でモバイル デバイスをシミュレートできます。