WordPress(ワードプレス) ホームページ

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

更新日:

タイトル

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

今回は「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は実行せずすぐにブラウザを閉じちゃうというのもアリです。

以上で操作完了です。

お疲れ様でした!

 

まとめ

まとめ

いかがでしたか?

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

そんな時に、

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

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

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

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

るーしー
ではまた!

スポンサーリンク



膠原病(こうげんびょう)にかかった(かもしれない)時にすべき事

トピック
「膠原病(こうげんびょう)にかかった(かもしれない)」
と分かった時、自分が何をどうするべきか分からず途方にくれました。 同じような心配をお持ちの方はこの記事を見てください。 その時に私がした事を全てまとめました。

膠原病(こうげんびょう)にかかった(かもしれない)時にすべき事

  1. (検査・治療)入院に備える
  2. 膠原病(こうげんびょう)であると確定させる(確定していない場合)
  3. 医師に「診断書(臨床個人調査票)」を記入してもらう
  4. 【確定診断後】(指定難病の)医療費助成制度に申請する
  5. 【確定診断後】自治体の福祉制度(給付金など)の申請をする
  6. 【確定診断後】障害年金が受給できる場合は申請をする
  7. 【確定診断後】生活費が工面できない場合は生活保護の申請をする
上記の内容を出来る限り詳細にまとめています。

膠原病(こうげんびょう)にかかった(かもしれない)時にすべき事を確認する

-WordPress(ワードプレス), ホームページ

Copyright© 膠原病でした , 2018 All Rights Reserved.