【Windows】Microsoft EdgeでWEB画面上の色情報（RGBA値）を取得するカラーピッカー（スポイト機能）の使用方法

2022/03/28 18:00:00 IT作業員, パソコン（software）

いつもお世話になっております。
RfromL.comです。

以前「Internet ExplorerでWEB画面上の色情報（RGBA値）を取得するカラーピッカー（スポイト機能）の使用方法」というTips記事を書きましたが、今回はMicrosoft EdgeでのWEB画面上の色情報（RGB値）を取得するカラーピッカー（スポイト機能）の使用方法についての紹介です。

CONTENTS

1.はじめに
2.環境情報
3.手順
　3.1.Microsoft Edgeの起動
　3.2.開発者ツールを表示
　3.3.カラーピッカーを起動して色情報を取得
4.おわりに


1.はじめに

簡単な手順だけでみれば以下の通りです。

  1. Microsoft Edgeを起動
  2. 開発者ツールを起動
  3. カラーピッカーを起動して色情報を取得

起動するブラウザが「Microsoft Edge」であること以外は「Internet Explorer」で行った場合と同じですが、細かいところではカラーピッカー（スポイト）の起動だけ少しわかりにくくなっています。
詳細については、手順の項で説明します。


2.環境情報

この記事を作成するにあたって使用した環境の情報は以下の通りです。

EditionVersion
OSWindows11 Home x6421H2
ブラウザMicrosoft Edge x6497.0.1072.76

なお今回使用したWindows11は、元々Windows10がインストールされていたパソコンに対してアップグレードしたものです。


3.手順

ここから詳細手順を記載します。

3.1.Microsoft Edgeの起動

①「Windowsマーク」キーと「Ｒ」キーを同時押しして「ファイル名を指定して実行」のウィンドウを表示します。



②「名前(Ｏ):」の入力欄に「msedge」と入力して「OK」ボタンをクリックします。



③「Microsof Edge」が起動します。



3.2.開発者ツールを表示

①「MicrosoftEdge」が起動したらメニューバーの「…」のマークをクリック。
表示されたツールメニューから「その他のツール」を選択します。



②「その他のツール」を選択することで更に表示されたリストの中から「開発者ツール」をクリックします。「開発者ツール」の右に表示されている「Ctrl+Shift+I」は開発社ツールを起動するショートカットキーです。



③ブラウザの右側に開発者ツールのペインが追加表示されます。



また、「開発者ツール」の起動は「InternetExplorer」同様、キーボードの「F12」キーを押下することでも表示できます。初めて「F12」キーで起動する際は以下のようなポップアップが表示されますが「DevTools を開く」をクリックすれば「開発者ツール」が起動します。

毎回表示させたくない場合には「決定を記憶する」にチェックを入れてから「DevTools を開く」をクリックすることで次回以降表示されなくなります。


3.3.カラーピッカーを起動して色情報を取得

①「開発者ツール」起動直後はペインの幅が狭くなっているので、マウスで幅を広げます。
すると、開発者ツールのペインに「要素」タブ（英語版は「Element」タブ）が表示されるので「要素」タブをクリックして画面を切り替えます。



②「要素」タブの画面に切り替わったらHTMLソースの「body」タグの部分をクリックします。
すると一番右のペイン「スタイル」タブに「body」タグのスタイル内容が表示されます。



③「スタイル」タブのスクロールバーを下にスクロールさせていくと「body」タグに指定された「background」属性があります。



④カラーコードの左にある四角（※ここでは黒色の為、黒四角で表示されています）にマウスカーソルを合わせると「カラーピッカーが開きます。Shiftを～」と表示されるので、クリックします。



⑤「background」属性に設定されているカラーコードでカラーパレットが表示されます。



⑥カラーパレットが表示された状態で、マウスカーソルをWEB画面のペイン（一番左のペイン）に移動すると、マウスカーソルの形がカラーピッカー（スポイト）に切り替わります。このカーソルの状態で色情報を確認したい箇所をクリックすると、色情報が取得できます。
試しに、Windowsマークの左上の赤色四角から色情報を抽出してみます。



以下が抽出前にカラーパレットに設定されていた色情報値と、抽出後の色情報値です。

抽出した結果を見るとWindowsマークの赤色の四角はRGBA値（242,80,34,1）となっていることがわかります。


4.おわりに

Windows11になってInternet Explorerが搭載されなくなったので、今後ブラウザの標準機能でWEB画面の色情報を取得する際はMicrosoft Edgeで行うことになります。

現場によってはまだWindows7、Windows10あたりをまだ使うことになると思われるので、しばらくはInternet Explorerも使うことはできますが、いずれ全てWindows11に置き換わっていくのは止められないのでMicrosoft Edgeの操作・機能は色情報取得に限らず把握しておくと良いと思います。

以上です。
宜しくお願い致します。