特集
カテゴリー
タグ
メディア

デザイナーの作業効率アップ、CSS情報を解析する拡張機能「CSS Peeper」

  • カテゴリー:
  • TOOL
デザイナーの作業効率アップ、CSS情報を解析する拡張機能「CSS Peeper」

「CSS Peeper」はデザイナーの作業効率アップ、CSS情報を解析する拡張機能です。いま閲覧しているページのCSS情報をまとめて教えてくれます。フォントや色の一覧をはじめ、埋め込まれている画像をまとめて表示してくれます。また、Web Inspectorも内蔵されているので、気になる箇所のCSS情報の詳細を知ることができます。


170521_cs2

解析したいWebページを開き、CSS Peeperの拡張機能ボタンをクリックするだけ。このようにフォント情報や色情報の一覧が表示されますよ。カラーパレットが自動生成されるのは便利ですね。


170521_cs3

また、このように画像の一覧を抽出したり、指定した箇所のCSSの詳細情報を調べることもできますよ。Google Chrome内蔵のWeb Inspectorを利用しなくても大まかな情報が得られるのは助かりますね。ぜひWebデザイナーの方は導入しみてはいかがでしょうか。


CSS Peeper


(カメきち)


swiper-button-prev
swiper-button-next