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

colorpicker

工藤

執筆者: 工藤

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

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

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

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

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ