Webデザインのときに重宝するChromeの便利な拡張機能

  • このエントリーをはてなブックマークに追加

こんにちは、工藤です。

Webデザインのときに私がよく使うChromeの拡張機能をご紹介したいと思います。
無駄にウィンドウを開いておくことが多いため、ブラウザ上で色々出来るのは本当助かります・・。

Awesome Screenshot

Awesome-Screenshot---Capture--Annotate-and-Share

Chrome ウェブストアへ

画面スクリーンショットを撮ることができる拡張機能です。
表示している画面や選択した範囲のみのスクリーンショットはもちろんのこと、縦に長いサイトも一気にスクリーンショットしてくれます。
他のWebサイトをなぞって練習させていただくときやこのブログを書くときにも大変重宝しています。
個人的にですが色々スクリーンショット系の機能を使わせていただいてこれが一番使いやすいかなと思います。


Firebug Lite for Google Chrome

Firebug

Chrome ウェブストアへ

例えば「ここのフォントサイズを変えたらどうなるんだろう?」とふと思ったときに、ブラウザ上で試しに編集をして確認をできたりするのが『Firebug』です。もちろん保存はできないです。
firefoxにも『Firebug』はあるのですがこちらはLiteとついているので少し簡易版な印象です。

Firebug06
ちょっとした確認のために本来のCSSやHTMLをいじる必要がないのはとても便利ですね!


MeasureIt

MeasureIt-ruler-extension-for-Chrome--Safari--Firefox---Frayd-Media

Chrome ウェブストアへ

画面のサイズを測ることができる拡張機能です。上のスクリーンショットのように選択したとところpxで表示してくれます。
『Firebug』で確認ができない時などにはこちらを使用させてもらいます。


WhatFont

whatfont

Chrome ウェブストアへ

フォント名やフォントのサイズ・色などをワンクリックで表示してくれる拡張機能です。
他のサイトで使用しているフォントが気になったときの確認にとても便利ですね。


CSSViewer

css

Chrome ウェブストアへ

気になる要素にマウスを持って行くだけで使用しているcssを一覧で表示してくれる拡張機能です。
『Firebug』を使用する程でもない時に便利ですし、何より軽いのがいいです。


ColorZilla

colorpickerChrome ウェブストアへ

webサイトを見ていて気になった色をスポイトできたり、表示しているページで使用している色を一覧で出してくれたり…と何かと便利な拡張機能です。
スポイトした色を保存してくれているのはとても助かります。



久々に新しい拡張機能を調べたくなってきました・・!
今回はこのあたりで。

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。