デベロッパーツールで色を取得する方法【サイト模写で便利】

サイト模写を進めていくとき、お手本サイトの色を再現したいけど、どうやって取得すればいいのかなあ？という疑問にお答えします。

デベロッパーツールを使って調べたい色が適用されているCSSを探して見れば適用されている色が分かりますが、それだとどうしても他にもコードが丸々見えてしまってカンニングになってしまいます。

そんな時に便利なのが、デベロッパーツールにもともと備わっているcolor picker・カラーピッカーです。

今回は、カンタンですが、意外と気づかないカラーピッカーで色を取得する方法をご紹介します。

カンタンで一瞬で分かりますので、ぜひ知らないという方は参考にしてみてください。

それでは、みていきましょう。

色を取得したいお手本サイトのページを表示させます。

macbook等では、「option + command + i 」キーを同時に押すとデベロッパーツールが開きます。

または、ページ上で右クリックやダブルタップで「検証」を押すとデベロッパーツールが開きます。

デベロッパーツールの下の方にスクロールすると、CSSの領域があります。そして四角い色の部分をクリック、またはタップします。

ちなみに、カラーピッカーの起動が目的なので、色の四角いやつであれば、どれでも構いません。

四角い部分をクリックすると、色の詳細画面が表示されます。

ペンのマークをクリック、またはタップします。ペンが青表示になっていることを確認してください。

次に、そのままポインター、矢印をページ上に移動させます。

すると、カラーピッカーが表示されますので、調べたい色に合わせて、クリック、またはタップします。

取得したい色をクリックしたら、直後にカラーコードが表示されますので、コピーしてあとはCSSファイルにカラーコードをペーストするとokですね。

カラーコードの右側に見える上下の矢印を押すと、カラーコードの表示形式を変えられますので、お好みのカラーコードが使えます。

以上がデベロッパーツールを使ってカラーピッカーを起動し、お手本サイトの色、カラーコードを取得する方法となります。

超カンタンだけれど、意外と気づきにくい機能ですね。