browser

Webクリエイターがブラウザに入れるべき9つのアドオン

Webクリエイターがブラウザに入れるべき9つのアドオンの記事

この記事と同じカテゴリ

ARTNOC記事


Webデザイナー・クリエイターには欠かせないブラウザアドオン

Chrome・Firefoxがシェアを伸ばしている理由は独自のadd-ons(アドオン)にあります。add-ons(アドオン)とは拡張機能の事で、自分好みの便利な機能をブラウザに追加できます。

 

1.マウスジェスチャ機能 All-in-One Gestures

All-in-One Gestures

All-in-One Gestures (Chrome)>>

All-in-One Gestures (Firefox)>>

ブラウザをマウスの動作だけで操作するマウスジェスチャを実装します。キーボードやボタンクリックをしなくても良いので作業効率が格段にアップします。

2.ブラウザで表示されている色情報を取得する ColorZilla

254

ColorZilla (Chrome) >>

ColorZilla (Firefox)>>

マウスカーソルを合わせた場所の色情報をRGB、16進数で表示してくれます。色情報は10進数、16進数など様々な形式でコピー可能で、パレットに記憶させ自分の好みのカラーパレットを作る事も可能です。

3.リンク切れを調べる LinkChecker

LinkChecker (Chrome)>>

LinkChecker (Firefox)>>

閲覧中ページのリンク切れ箇所をマークアップしてくれます。サイトのリンク切れチェックに使えます。

4.ピクセルサイズを調べる MeasureIt

47523

MeasureIt(Chrome) >>

MeasureIt(Firefox) >>

画面上で簡単に要素のサイズ計測ができます。サイトの表示がズレる際にCSS指定サイズと表示サイズの確認をしたりと中々便利です。

5.ソースを見るテキストエディタを指定する ViewSourceWith

ViewSourceWith >>

閲覧中のページのソースファイルを自分で指定したエディタで開けるようにします。使い慣れたエディタで見ればそのまま編集もし易いですし、Firefoxのデフォルト設定では使い難いので必須でしょう。

6.Web開発の拡張機能 Web Developer

http://www.infoaxia.com/tools/webdeveloper/(Chrome) >>
http://www.infoaxia.com/tools/webdeveloper/(Firefox) >>
おそらく、FirefoxでWeb制作をする方のほとんどが入れているWeb制作を補助する拡張機能です。

以下は一部の機能です。詳しくは公式サイトでチェックして下さい。

* クッキー、Java、JavaScript、CSSなどを無効にする

* CSSをその場で編集する* フォームの各属性値を表示する

* 画像を非表示にする

* ブラウザのウィンドウおよび表示領域の幅と高さを表示する

* HTMLおよびCSSの構文をチェックする

* W3C/WCAG 1.0 あるいは米国リハビリテーション法508条でアクセシビリティをチェックする

7.画面のキャプチャを保存する

Awesome Screenshot(Chrome) >>
画面のキャプチャを撮って、画像ファイルに保存できます。こちらのアドオンでは保存の際に、トリミングをしたり、文字で注釈を付けたりも可能です。

Pearl Crescent Page Saver Basic(Firefox) >>
ブラウザ閲覧中画面のキャプチャを撮って、画像ファイルに保存できます(jpeg、png)。ページ全体(表示されていない部分)のキャプチャも取得可能なので、プレゼン用資料制作時など、とても重宝します。「Pro」と「Basic」がありますが「Basic」で十分使えます。「Pro」は有料なので要注意。

8.スマートフォンやモバイルサイト表示する

User Agent Switcher(Chrome) >>
User Agent Switcher(Firefox) >>
ブラウザのuser agentを自由に変更できます。携帯サイトの開発などにとっても便利です。各キャリアのuser agentは携帯電話会社の公式サイトで確認できます。

9.ブラウザで開発

firebug-large

Firebug(Chrome) >>

Firebug(Firefox) >>
豊富な開発ツールを ブラウザに統合します。閲覧中のWeb ページの CSS、HTML、及び JavaScript をリアルタイムに編集、デバッグ、またはモニタすることが出来ます。

 

※ここでご紹介したアドオンは、動作確認はしていますが、万一の動作不良などに備え、導入は自己責任でお願いします。

アドオンはWeb制作者には欠かせない強力な拡張機能が満載です。以下の公式サイトで紹介されていますのでチェックしてみて下さい。

【Chrome ウェブストア】
https://chrome.google.com/webstore/category/apps >>
【Firefox用アドオン】
http://www.mozilla-japan.org/addons/firefox/ >>

この記事と同じカテゴリ

ARTNOC記事

この記事と同じタグ

WebサイトURL
http://www.art-noc.com/firefox-3444.html
Webサイト説明
(Description)
Chrome・Firefoxの便利なadd-ons(アドオン)をご紹介。