Webクリエイターがブラウザに入れるべき9つのアドオンの記事
この記事と同じカテゴリ
Webデザイナー・クリエイターには欠かせないブラウザアドオン
Chrome・Firefoxがシェアを伸ばしている理由は独自のadd-ons(アドオン)にあります。add-ons(アドオン)とは拡張機能の事で、自分好みの便利な機能をブラウザに追加できます。
1.マウスジェスチャ機能 All-in-One Gestures
All-in-One Gestures (Chrome)>>
All-in-One Gestures (Firefox)>>
ブラウザをマウスの動作だけで操作するマウスジェスチャを実装します。キーボードやボタンクリックをしなくても良いので作業効率が格段にアップします。
2.ブラウザで表示されている色情報を取得する ColorZilla
マウスカーソルを合わせた場所の色情報をRGB、16進数で表示してくれます。色情報は10進数、16進数など様々な形式でコピー可能で、パレットに記憶させ自分の好みのカラーパレットを作る事も可能です。
3.リンク切れを調べる LinkChecker
閲覧中ページのリンク切れ箇所をマークアップしてくれます。サイトのリンク切れチェックに使えます。
4.ピクセルサイズを調べる MeasureIt
画面上で簡単に要素のサイズ計測ができます。サイトの表示がズレる際にCSS指定サイズと表示サイズの確認をしたりと中々便利です。
5.ソースを見るテキストエディタを指定する 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(Chrome) >>
Firebug(Firefox) >>
豊富な開発ツールを ブラウザに統合します。閲覧中のWeb ページの CSS、HTML、及び JavaScript をリアルタイムに編集、デバッグ、またはモニタすることが出来ます。
※ここでご紹介したアドオンは、動作確認はしていますが、万一の動作不良などに備え、導入は自己責任でお願いします。
アドオンはWeb制作者には欠かせない強力な拡張機能が満載です。以下の公式サイトで紹介されていますのでチェックしてみて下さい。
- 【Chrome ウェブストア】
- https://chrome.google.com/webstore/category/apps >>
- 【Firefox用アドオン】
- http://www.mozilla-japan.org/addons/firefox/ >>
あなたにお勧めのコンテンツ
この記事と同じカテゴリ
- WebサイトURL
- http://www.art-noc.com/firefox-3444.html
- Webサイト説明
(Description) - Chrome・Firefoxの便利なadd-ons(アドオン)をご紹介。