こんにちは! るーしーです。
今回は「Google Chrome(グーグルクローム)の純正カラーピッカーとスポイトが使いやすい件」についてです。
皆さんは
「ここで使われている背景色のカラーコードを今すぐ知りたい！！」
と思った事がありませんか？
そんな時、Google Chrome(グーグルクローム)のdevtoolsにある純正カラーピッカーとスポイトが解決してくれます！！
カラーコードの取得位なら操作を覚えれば10秒もかかりません。
プラグインをインストールせずに使える機能ですのでとても便利です。
もちろん【初心者向け】の簡単な操作方法なので是非試してみてください。
カラーピッカーの操作方法
１：Google Chrome(グーグルクローム)でウェブサイトを開く
カラーコードを知りたいページまで移動してください。
今回の紹介では「WordPress(ワードプレス)」と書かれている水色背景色のカラーコードを確認したいと仮定します。
２：キーボードの「F12」をクリックし「devtools」を開く
この「devtools」は様々な事が出来ますが今回は深く触れません。
３：「devtools」の「Styles」タブをクリックして開く
４：element.style{}の右側にある点にカーソルを合わせる
５：バケツマークが出るのでクリック
６：カラーピッカーが表示されるのでそのままカラーコードを確認したい位置までカーソルを移動
画面上にカーソルが移動するとスポイトになってます。
※キャプチャだとスポイト表示が消えるのでカメラで撮影しました。画質はすみません。
７：カラーコードを確認したい個所をクリック
するとカラーピッカーにクリックした個所のカラーコードが表示される。
それ以上に画面の背景色が変わりビックリすると思いますがこれはdevtoolsのデバック機能です。
ブラウザ表示上で背景色やCSSの操作も試しに変更出来るものなので気にしないでOK。
これで確認したい個所のカラーコードが取得できました。
カラーコードをコピーして使用しましょう。
８：キーボードの「F5」をクリックし画面をリロードする
これで変わってしまった背景色とカラーピッカーが表示されている状態をクリアされます。
９：キーボードの「F12」をクリックし「devtools」を閉じる
カラーコードを取得したら手順８、９は実行せずすぐにブラウザを閉じちゃうというのもアリです。
以上で操作完了です。
お疲れ様でした！
まとめ
いかがでしたか？
例え自分のサイトであっても見出し背景色などのカラーコードを暗記する事はないと思います。
そんな時に、
「ああっ、もう……適当にやったら色が合わないよ」
とならないための小ネタでした。
勿論初見のサイトで素敵な色を見つけた時カラーコードを確認するのにも役立ちますね。
是非試してみてください。
スポンサーリンク
