Aardvark AHHHHH!

SPONSORED LINK

Pocket

GW中は全体的にサイトをリニューアルしまくっていたおかげですっかりCSS技術が向上した(まだまだだけど)。また詳しくなればなるほどもっと知りたくなるわけで、きれいなサイトを見るたびに「これってどうやってんの?」と調べてみたりしてみた。

以前まではそうした調べ物にはFireFoxのWeb Developerを使っていたりしたのだが、これは便利なようで(一部)ちょっと不便だったりする。

例えばこれを使えばある要素の枠を表示したり、そこに指定されているクラスの名称を表示したりできるのだが、これがいっぺんに表示される&要素名や枠が見やすいように表示されるため、オリジナルのレイアウトがくずれてしまうのだ。するとかっこよかったのはどこだったっけかな、とまた枠を非表示にしたりとわけわからなくなる。

web_dev.gif

↑ Web Developerで要素の枠線と要素名を表示。くずれる、くずれる・・・。

そこで今回のリニューアル作業には各所で話題になっていたAardvarkを使ってみた。FireFoxの拡張機能なのだが、マウスオーバーするとその箇所だけの情報を必要最小限だけ教えてくれる。またその部分だけのソースコードも見せてくれたりするのでミニマムな感じで使い勝手が良い。

adver.gif

↑ このサイトでやるとこんな感じ。

使い方は簡単で、Aardvarkのサイトでインストール後、FireFoxを再起動、右クリックから「Start Aardvark」で準備完了だ。

それ後、サイト上でマウスを動かせば上のように必要な情報を表示してくれる。またそこからいくつかのコマンドで便利機能も実現している。背景色だけ変えたり、その要素を囲む親要素を表示したり、一時的に要素を非表示にしたり・・・。

ウェブを創る人向けですが、手放せない一品ですね。僕の作業時間を大幅に減らしてくれたであろうことに敬意を表してLife Hackとして取り上げておきます。

ツイッターもやっています!

SPONSORED LINK

  1. Firefox Extension: ピンポイントでページの構造を探索できる Aardvark

    i d e a * i d e a 経由、 Aardvark という Firefox 用拡張は、マウスオーバーでその場所の要素を枠で示したり要素名やクラス名…

  2. FireFox:デベロッパー/デザイナ向けのエクステンション

    今回は"Aardvark"と、いうデザイナーやデベロッパー向けのFireFox用のエクステンションを紹介しよう。
    » …

  3. [firefox] Aardvark

    Idea * Idea で紹介されてた。
    Firefox拡張機能。「Aardvark」使ってみたけど、すごくいい。
    Webデザイナーはこんなんあると便利だろ…

  4. Aardvark

    普段、チェックするブログに百式
    があります。最近リニューアルされて、編集後記がなくなった見たいで残念に思っていました。結構こっちの方も好きだったもんで。

  1. No trackbacks yet.