こんにちは！タクマです。
31歳未経験からエンジニア転職に成功し、
2021年3月より都内の受託開発企業にてWebエンジニアとして働いています。
僕は31歳未経験からエンジニア転職に成功し、現在は都内の受託開発企業でエンジニアとして働いています。
早速ですが、みなさんはこんな風に思ったことないです？
「このサイトのこの部分のカラーコードってなんだろう？」
「カラーコードってどういう風に調べたらいいの？」
僕はWebエンジニアに転職するためにポートフォリオアプリを作っていた時にこう思いました。
僕「このサイトのロゴの色いいなー。俺のポートフォリオのヘッダーもこの色にしよう！でもこのロゴのカラーコードってどうやって調べればいいんだ？」
こんな時に役に立つのがGoogleChromeの拡張機能『ColorPick Eyedropper』です！
ColorPick Eyedropperを使えば、カーソルを調べたいカラーの上に持っていくだけで簡単にカラーコードを表示させることができます。
たとえばユニクロのロゴのカラーコードは#ED1D23ということが分かりますね。
今回はそんな超便利なColorPick Eyedropperについてインストール方法から、使い方まで詳しく解説していきます！
ColorPick Eyedropperのインストール方法
1. chromeウェブストアにアクセス
chromeウェブストアはこちら
2. ストアを検索の欄にColorPick Eyedropperと入力し、Enterを押す
3. ColorPick Eyedropperをクリックする
4. Chromeに追加を押す
※Chromeにログインしていない方はログインをする。
5. 拡張機能を追加をクリック
6. GoogleChrome右上の拡張機能のアイコン一覧にColorPick Eyedropperが表示される
※ 拡張機能のアイコン一覧にColorPick Eyedropperが表示されない場合
１. パズルのピースのアイコンをクリック
２. ピンアイコンをクリックすると拡張機能のアイコン一覧にColorPick Eyedropperが表示される
ColorPick Eyedropperの使い方
1. GoogleChrome右上に表示されているColorPick Eyedropperのアイコンをクリック
2. カラーコードを調べたい部分にカーソルを持っていく
カーソルの部分はかなり拡大して表示されるのでされるので、このように細い枠線もピンポイントでカラーコードを表示させることができます。
3. カラーコードを調べたい部分にカーソルを合わせたらクリック
するとこのような表示に変わります。
表示が変わった時点で自動的にカラーコードが選択されているので、コピーも楽ちんです♪
さいごに
いかがでしたでしょうか？
かなり便利な拡張機能であることがわかっていただけたと思います。
これだけ便利で、しかも無料なので、もう使わない理由はないですね。
ということで今回も最後までご覧いただきありがとうございました(^^)
これからもエンジニアの方や、エンジニアを目指す方の役に立つような記事を投稿していきますので、よろしくお願いします！
