Webサイトのカラーコードを採取する方法【F12キー】

Webサイトのカラーコードを採取する方法【F12キー】パソコン知識

CSSでサイトをカスタマイズする時、サイトの色を採取する方法を知っていると便利です。

自分のサイトで使っている色をコピーしたり、別のサイトの色をコピーしたりできます。

今回は主要なブラウザでサイトの色を採取する方法を紹介します。

広告
そらしど

本業はWebプログラマー。
Cocoonのデザインをカスタマイズやブログノウハウを紹介しています。
気まぐれに遊べるおもちゃも作ってます。
リクエストは無料なので、気軽に投稿してください!
趣味はお昼寝です。
詳しいプロフィールはこちら

フォロー

カラーコードの採取手順

解決方法

手順は使用しているブラウザによって異なります

ほとんどは使用しているブラウザの機能から採取できます。Safariだけは他のアプリを使う必要があるようです。

手順はバージョンによって変わる可能性があります。

Chrome・Edgeの場合

Google ChromeとMicrosoft Edgeは同じエンジンを使用しているため、操作はほとんど同じです。

確認したバージョン
  • Chrome…101.0.4951.67
  • Edge… 101.0.1210.53
ChromeとEdgeで色を採取する手順
  • STEP1
    開発者ツールの起動

    キーボードのF12を押します。

    ファンクションキーの設定によってはFnキーを一緒に押す必要があります。

    キーボードの図に、同じキーを色付けている場合がありますが、1つだけ押せば大丈夫です。押しやすい場所を押してください。

    表示場所を変更したい場合

    表示する場所を変更したい場合は、開発者ツール右上にある「…」を押して、好きなドッキングの位置を選択します。

    ドッキングの位置
    別タブ、左側、下側、右側
  • STEP2
    カラーピッカーを開く

    任意の要素のスタイル項目からカラーピッカーを開きます。

    カラーコードの左にある四角いアイコンです。

    任意の要素のスタイル項目からカラーピッカーを開く
  • STEP3
    スポイトマークを選択

    カラーピッカーにあるスポイトのマークをクリックします。

    初めからスポイト機能がONになっている場合もあります。

    カラーピッカーにあるスポイトのマークをクリック
  • STEP4
    コピーしたい色の場所を選択

    マウスをサイトへ当てると、マウスポインタが変わります。

    左上のスコープのようなアイコンの場所を採取するので、コピーしたい色の場所に移動してクリックします。

    コピーしたい色の場所に移動してクリック
  • STEP4
    コピーマークを選択

    スポイトマークの隣にコピーするアイコンがあります。

    これをクリックしてクリップボードにコピーできます。

    コピーマークをクリック
動画で確認

Firefoxの場合

FirefoxはChromeやEdgeより手順が少なめです。

確認したバージョン
  • 100.0.2
ChromeとEdgeで色を採取する手順
  • STEP1
    開発者ツールの起動

    キーボードのF12を押します。

    ファンクションキーの設定によってはFnキーを一緒に押す必要があります。

    キーボードの図に、同じキーを色付けている場合がありますが、1つだけ押せば大丈夫です。押しやすい場所を押してください。

  • STEP2
    スポイトマークを選択

    スポイトのマークをクリックします。

    スポイトのマークをクリック
  • STEP3
    コピーしたい色の場所を選択

    マウスをサイトへ当てると、マウスポインタが変わります。

    コピーしたい色の場所に移動してクリックします。

    クリックした時点でクリップボードにコピーされます。

動画で確認

Safariの場合

DigitalColor MeterというiOS標準アプリで採取できるようです。

実機を持っていないため、説明は割愛します。

広告

まとめ

各ブラウザで色のスポイト機能を使う方法を紹介しました。

CSS作成等の一助になれば幸いです。

分からないことや質問があれば下記から気軽に連絡ください。

そらしど
そらしど

最後まで読んでいただきありがとうございました。


1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

関連のおすすめ記事

コメント

タイトルとURLをコピーしました