Google ChromeのDeveloper ToolにCSSのカラーピッカー機能が追加された - 適宜覚書-Fragments

Google ChromeのDeveloper ToolにCSSのカラーピッカー機能が追加された

   

Google ChromeのDeveloper ToolにCSSのカラーピッカー機能が追加された

Google ChromeのDeveloper ToolにCSSのカラーピッカー機能が追加された

Google Chromeは高頻度で機能改善を加え、バージョンアップを行うことで知られています。気がつくと面白い機能がついていたり、或いは見直しのために機能が無くなっていたりと、ユーザとしては期待半分不安半分な面もありますが(^^;;。

今回はChrome Canary版(Version 19.0.1048.0 canaryで確認)のDeveloper ToolにCSSのカラーピッカー機能が追加されていたので紹介します。

Developer ToolのCSSのカラーピッカー機能

  1. 今回動作確認したのはChrome Canary版(Version 19.0.1048.0 canaryで確認)です。Dev版、Beta版、Stable版では現時点で未実装でしたが、いずれこれらにも実装されるかもしれません。
  2. Ctrl+Shift+Iのショートカットキーを押下し、Developer Toolを開きます。

    Ctrl+Shift+I

    Ctrl+Shift+I

  3. Developer Toolを開いている状態で上部エリアからHTMLソースを確認したい部分をクリックするか、Developer Tool左部のHTMLソースを直接クリックします。すると、その部分に適用されているCSSがDeveloper Toolの右側に表示されます。

    選択部分に適用されているCSS

    選択部分に適用されているCSS

  4. 表示されているCSSの中で色指定がされている部分は下図のように色コードなどの隣に実際に適用している色を小さい四角の中に再現して表示します。

    色指定部分の表示

    色指定部分の表示

  5. ここまでは従来のChromeでも同様に表示されます。Chrome Canary版の場合、この小さい四角をクリックすると下図のようにカラーピッカーが表示されます。

    カラーピッカー表示

    カラーピッカー表示

  6. このカラーピッカーで任意の色を選択するとその色を即座に画面内に反映出来ます。色の選択だけではなくアルファ値をスライダーで選択することも可能です
  7. 尚、Canary以外の版の場合、同じ操作をすると、同じ色を示す形式として、色コードやRGB表記などを切り替えて確認することが出来ます。

おわりに

今回は、Google ChromeのDeveloper ToolにCSSのカラーピッカー機能が追加された、と題して機能の紹介を行いました。

Developer Toolは高機能なツールで色々と使いこめば使い込みがいのあるツールですが、今回紹介の機能や以前紹介した拡張要らずでお手軽にGoogle Chromeのユーザエージェントを変更する方法 のように知っているだけで便利に使える機能も含んでいますので、開発とか関係無いや~と思う方も触ってみると楽しいですよ。

この記事がお役に立てると嬉しいです。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Google, Webブラウザ, ツール , , ,