グーグルクロームの純正カラーピッカーとスポイトが使いやすい件

LINEで送る
Pocket

タイトル

こんにちは! るーしーです。

今回は「Google Chrome(グーグルクローム)の純正カラーピッカーとスポイトが使いやすい件」についてです。

皆さんは

「ここで使われている背景色のカラーコードを今すぐ知りたい!!」

と思った事がありませんか?

そんな時、Google Chrome(グーグルクローム)のdevtoolsにある純正カラーピッカーとスポイトが解決してくれます!!

カラーコードの取得位なら操作を覚えれば10秒もかかりません

プラグインをインストールせずに使える機能ですのでとても便利です。

もちろん【初心者向け】の簡単な操作方法なので是非試してみてください。

スポンサーリンク

 

カラーピッカーの操作方法

操作手順説明

 

1:Google Chrome(グーグルクローム)でウェブサイトを開く

カラーコードを知りたいページまで移動してください。

今回の紹介では「WordPress(ワードプレス)」と書かれている水色背景色のカラーコードを確認したいと仮定します。

ブラウザを開いた画面

 

2:キーボードの「F12」をクリックし「devtools」を開く

「F12」クリック時

この「devtools」は様々な事が出来ますが今回は深く触れません。

 

3:「devtools」の「Styles」タブをクリックして開く

「Styles」タブクリック時

 

4:element.style{}の右側にある点にカーソルを合わせる

カーソルを合わせた状態

 

5:バケツマークが出るのでクリック

バケツをクリック

 

6:カラーピッカーが表示されるのでそのままカラーコードを確認したい位置までカーソルを移動

カラーピッカー表示

画面上にカーソルが移動するとスポイトになってます。

スポイトを移動
※キャプチャだとスポイト表示が消えるのでカメラで撮影しました。画質はすみません。

 

7:カラーコードを確認したい個所をクリック

カラーコード取得

するとカラーピッカーにクリックした個所のカラーコードが表示される。

それ以上に画面の背景色が変わりビックリすると思いますがこれはdevtoolsのデバック機能です。

ブラウザ表示上で背景色やCSSの操作も試しに変更出来るものなので気にしないでOK

これで確認したい個所のカラーコードが取得できました。

カラーコードをコピーして使用しましょう。

 

8:キーボードの「F5」をクリックし画面をリロードする

これで変わってしまった背景色とカラーピッカーが表示されている状態をクリアされます。

リロード後の画面

 

9:キーボードの「F12」をクリックし「devtools」を閉じる

「devtools」を閉じた状態

カラーコードを取得したら手順8、9は実行せずすぐにブラウザを閉じちゃうというのもアリです。

以上で操作完了です。

お疲れ様でした!

 

まとめ

まとめ

いかがでしたか?

例え自分のサイトであっても見出し背景色などのカラーコードを暗記する事はないと思います。

そんな時に、

「ああっ、もう……適当にやったら色が合わないよ」

とならないための小ネタでした。

勿論初見のサイトで素敵な色を見つけた時カラーコードを確認するのにも役立ちますね。

是非試してみてください。

ではまた!

笑顔

スポンサーリンク
プログラミングのオンラインスクールのCodeCamp

LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です