Chrome:ブラウザ上のカラーコードを取得するカラーピッカー「ColorPick Eyedropper」

WEBサイトを構築している時にブラウザ上に表示されているコンテンツの色を調べたい場合があります。

Chrome拡張機能で「ColorPick Eyedropper」を使用すると指定した箇所のカラーコードを取得することが可能です。

今回はChromeのブラウザ上に表示されているコンテンツのを調べることができるカラーピッカーアドオンColorPick Eyedropper」をご紹介します。

ColorPick Eyedropper

ColorPick_1

ColorPick Eyedropper」のアイコンをクリックし、調べたい箇所をクリックするだけでカラーコードを取得することができます。
また、RGBの値も表示してくれます。

サイトを構築する際に結構便利なChrome拡張機能です。

下記にChrome拡張機能ColorPick Eyedropper」を追加し、使用した時の方法をメモします。


「ColorPick Eyedropper」の使用方法

1.下記URLにアクセスします。

ColorPick Eyedropper

2.「+ 無料」ボタンをクリックし、「ColorPick Eyedropper」をChromeに追加します。

ColorPick_2

3.メッセージボックスが表示されるので、「追加」をクリックします。

ColorPick_3

4.追加するとヘッダーメニューに「ColorPick Eyedropper」のアイコンが表示されます。

ColorPick_4

5.アイコンをクリックするとカーソルが「十字マーク」になり、選択できる状態になります。

ColorPick_5

6.調べたい箇所をクリックするとカラーコードが表示されます。

ColorPick_6


表示されたカラーコードはそのままコピーできます。
サイト内の色を取得したい時に便利な拡張機能なのでおすすめです。

Chrome:ブラウザ上の選択した範囲をピクセルで表示するアドオン「MeasureIt!」

Chromeブラウザ上で選択(ドラッグ)した範囲の横幅縦幅サイズ
ピクセルで表示させることができるアドオンMeasureIt!」をご紹介します。

MeasureIt!

Chrome_MeasureIt_1

WEBサイトのデザインやコーディングをしていると画像や要素のサイズがどのくらいなのか調べたい時があります。

ブラウザに表示されている画像などの大体のサイズを計測したい時に「MeasureIt!」を使用すると
範囲を選択するだけで縦・横のサイズがピクセルで表示されるのでとても便利です。

サイト制作の作業効率も上がると思います。

下記にChrome拡張機能MeasureIt!」を追加し、使用した時の方法をメモします。


「MeasureIt!」の使用方法

1.下記URLにアクセスします。

MeasureIt!

2.「+ 無料」ボタンをクリックし、「MeasureIt!」をChromeに追加します。

Chrome_MeasureIt_2

3.メッセージボックスが表示されるので、「追加」をクリックします。

Chrome_MeasureIt_3

4.追加するとヘッダーメニューに「MeasureIt!」のアイコンが表示されます。

Chrome_MeasureIt_4

5.アイコンをクリックすると選択できる状態になるので、測りたい箇所をドラッグします。

ドラッグすると右側に選択した範囲の縦幅・横幅のサイズが表示されます。

Chrome_MeasureIt_5

再度、アイコンをクリックすれば通常の画面に戻ります。


アイコンをクリックしドラックするだけで、ピクセル単位でサイズを簡単に計測できるのでオススメなアドオンです。
「ここのサイズどのくらいだろう?」
みたいな感じでざっくりと測りたい時に活用できると思います。

参考サイトを調べたりする場合なども便利ですね。

Chrome:Chromeでユーザーエージェントを変更する方法

Chromeユーザーエージェントを変更する場合、拡張機能を使用することで簡単にユーザーエージェントを変更することができます。

chrome_useragent_1

自分のサイトや他のWEBサイトがiphoneではどのように表示されるのか、他のブラウザではどのように表示されるのかなど気になると思います。
またモバイルなどでチェックしたい場合、端末がないことが多いですがユーザーエージェントを変更することでモバイル(ガラケー)の画面もチェックすることが可能です。

下記にユーザーエージェントを変更できる拡張機能をご紹介します。


User-Agent Switcher

chrome_useragent_2

下記のダウンロードページにアクセスします。

User-Agent Switcher

「+CHROMEに追加」ボタンをクリックし、「User-Agent Switcher」をChromeに追加します。

chrome_useragent_b

追加するとアイコンが表示されるので、アイコンをクリックし変更したいユーザーエージェントに変更します。

chrome_useragent_4

リンククリック後、画面をリロードすると選択したユーザーエージェントの画面で表示されます。
下記は「iPhone」リンクをクリックし、「YAHOO」をChromeで開いた時の表示です。

chrome_useragent_5


User-Agent Switcher for Chrome

chrome_useragent_3

下記のダウンロードページにアクセスします。

User-Agent Switcher for Chrome

「+CHROMEに追加」ボボタンをクリックし、「User-Agent Switcher for Chrome」をChromeに追加します。

chrome_useragent_b

追加するとアイコンが表示されるので、アイコンをクリックし変更したいユーザーエージェントに変更します。
※Settingsリンクで新しくユーザーエージェントを追加することができます。

chrome_useragent_6

変更したいユーザーエージェントを選択するとユーザーエージェントが変更され画面が表示されます。

chrome_useragent_7


WEBサイトを作成する方にはいちいち他のブラウザや端末でチェックしながら作業しなくていいの制作の効率も上がると思います。
最終的には本物のブラウザ・端末でチェックしなければいけないと思いますが。。。