Firefoxのアドオンを入れて変わったこと

投稿日:

「便利!」とだけ叫んでおいてレビューしていなかったFirefoxのアドオン。

正直なところまだ使いこなせてはいないのですが、目に見えて変わったところを紹介します。主にWeb制作に役立つ拡張です。

Firebugを入れてここが変わった

Before

以前は、HTMLの構造を理解するのに、わざわざ手打ちで書き出していました。

Recent Reactionのテンプレート構造

今見ると微妙に間違ってる...。

- スポンサードリンク -

After

Firebugを入れればアラべんり。ツール→Firebug→Command Lineで一発可視化!

firebug.jpg

さらに表示されたソースにカーソルを当てるとどの要素が画面上のどの部分を指定しているか色分けで示してくれるという親切さ。

firebug.png

  • 水色の部分 - 内容の領域
  • 黄緑色の部分 - マージン
  • 紫色の部分 - パディング

例えば隣り合うブロックがあって間にスキマが空いているとします。ふつうに見ただけではそれが右ブロックのマージンなのか、それとも左ブロックのマージンなのか、などということはわかりません。その見えない部分に色を与えて教えてくれるという優れもの。数字を見ただけではなかなかイメージしにくい部分だけにうれしい機能です。

また、要素の開始タグをクリックするとその要素がスタイルシートのどの行で指定されているのかがわかり、その上リアルタイムで試しに書き換えて見ることができます。...恐ろしい子!

Web Developerを入れてここが変わった

Firebugと同じぐらい重宝しているのがこのツール。今Pukiwikiのスキンをいじっているのですが、これがなければ形にするところまで持っていけなかったのではないかというぐらいです。とにかく集中力がないため、CSSファイルを見て→表示確認→CSSファイルを見て...というのでは途中で投げ出していたかもしれません。

Before

構造ツリー図と同じように、画面の構成を理解するのに手書きで線を入れていました。

Recent Reactionの出力画面

After

plastic.png

Web Developerがあればこの通り。色分けされた枠が一発で表示されます。X-Rayとの合わせワザでさらにわかりやすく。ちなみにこのスクリーンショットはPearl Crescent Page Saverというアドオンで撮影しました。隠れたところまで撮れて便利。

他にも構文チェッカーなど便利そうな機能が盛りだくさんですがまだ使いこなせていません。でもこの枠表示機能だけでもかなりの収穫でした。

ColorZillaを入れてここが変わった

Before

今まで、Webを見ていていいなと思う色があったら以下の手順を踏んで色番号を調べていました。

  • photoshopを立ち上げる
  • スクリーンショットを撮る
  • パレットにスクリーンショットをペースト
  • スポイトツールで色を拾う
  • カラーピッカーを見て色番号確認

After

ColorZillaだとこれだけ。

  • 左下のスポイトのアイコンをクリック
  • カーソルが十字にかわるのでブラウザの画面から直接色を拾う
  • 左下に色番号が表示される

という風にお手軽に色を調べることができます。

その他

他にもモノサシのアドオンなど入れてますが、まだ使いどころがない状態です。また試してみたらレビューしたいと思います。

- スポンサードリンク -