【Microsoft Edge】レンダリングツールで任意のWebサイトにダークモードを強制する方法

Windows 11では、アプリケーションごとにダークモードかライトモードかを選択できます。実はMicrosoft Edgeにも、これとよく似た機能が「レンダリング(Rendering)」ツールとして標準搭載されています。このツールを使うと、表示中のページに対してダークまたはライトの配色をエミュレートでき、Webサイトがそれぞれのモードでどのように見えるのかを簡単にプレビューできます。

そのため、Dark ReaderのようなEdge拡張機能をインストールしなくても、ダークモードやライトモードの表示を試したい場合には、Edge標準のレンダリングツールを活用するのが便利です。

レンダリングツールとは?利用前の注意点

まず知っておきたいのは、Edgeのレンダリングツールが本来「Web開発者向けのツール」であるという点です。開発者がページをさまざまな表示条件でチェックしたり、色覚障害を持つ方など視覚的な特性のあるユーザーの見え方を確認したりするために用意された機能です。

また、ブラウザーの開発者ツール(DevTools)はあくまでテスト用のものであり、ここで加えた変更をそのまま保存することはできません。見た目を一時的に変えられるだけで、変更を恒久的に反映したい場合はコード側を修正・保存する必要があります。DevToolsを閉じれば表示は元に戻る点にも注意しましょう。

開発者ツール(DevTools)を開く4つの方法

Chromeの「Rendering」タブと同じように、Edgeのレンダリングツールでも、Webサイトがさまざまなカラー設定でどう表示されるかを確認できます。

マイクロソフトでブラウザーツールのプリンシパル プログラム マネージャーを務めるクリス・ハイルマン(Chris Heilmann)氏も、ダークモードに対応していないサイトでダークモードを強制表示する方法について、有用なアドバイスを紹介しています。

この機能を有効化して使うには、まずEdgeのDevToolsを開く必要があります。開き方は主に以下の4つです。

1. 右クリックから開く:任意のWebサイト上でマウスを右クリックし、「検査」を選択します。この操作ではDevToolsの「要素」タブが開きますが、そこからいつでも「レンダリング」タブへ切り替えられます。
2. メニューから開く:Edgeウィンドウ右上の「…」(設定など)メニューをクリックし、「その他のツール > 開発者ツール」を選択します。
3. ショートカットキーを使う:Ctrl + Shift + Iを押します。
4. F12キーを使う:キーボードのF12キーを押します。なお、このショートカットは後からEdgeの設定で無効化することも可能です。

Edgeのレンダリングツールへアクセスする

DevToolsを開くと、最初に「ようこそ(Welcome)」タブが表示されます。

次のステップは、レンダリングタブを開くことです。手順は以下の通りです。

1. DevTools右上の「⋯」(三点メニュー)をクリックします。
   
2. 「その他のツール > レンダリング」を選択します。
   
3. パネルを下へスクロールし、「自動ダークモードを有効にする(Enable automatic dark mode)」という項目を探します。チェックボックスにチェックを入れると、自動ダークモードが有効になり、prefers-color-schemeが「dark」に設定されます。

自動ダークモードへの切り替えは瞬時に反映されるため、Webページを再読み込みする必要はありません。

なお、この方法によるダークモードはDevToolsを開いている間だけの一時的なものです。すべてのサイトで常時ダークモードを適用したい場合は、「Dark Reader」などの拡張機能を併用するとより快適に利用できます。