先日からCSSについて「CSSを整理整頓！使われていないセレクタをチェックできる「CSS Redundancy Checker」」や「使わなくなったCSSを見つけてくれるfirefox拡張「Dust-Me Selectors」」でお伝えしてきましたが、今回は不要なCSSセレクタを探すのではなく、気になる部分がどんなCSSで構成されているかを調べる事ができるブックマークレット「XRAY」を紹介したいと思います。



上記のように気になる部分をクリックするだけで、その部分がどんなCSSを使ってレイアウトしているかが画面上に表示されます。

詳しくは以下

使用方法はものすごく簡単で、「XRAY」にアクセスしてXREYと書かれたボタンをブックマークするだけです。ブックマ−クレットなのでXRAYを使いたいページで実行すれば起動してくれます。ブックマークツールバーなどに入れておくと使い勝手が良いです。

修正していてこの場所はどのCSSで制御されているのかわからなくなった時などは非常に便利で、実際のレイアウトをみながら修正箇所を探る事が出来ます。



ちなみに基本的にはどんなページでも実行可能でCSSを調べる事ができます。上記画像はYahooでの実行例です。コレを利用して気になるページやデザインが素敵なページで実行すれば、どのくらいの寸法で作られているのか、どういうセレクタを使っているのかも見る事ができますので、憧れのサイトで勉強させてもらうのも良いかもしれません。

CSS覚えたての方には非常に役に立つツールだと思います。

なお対応しているブラウザはSafari, Firefox, Camino or Mozilla. だそうです。

XRAY

関連記事

---

はてなブックマ−ク「じわじわ来てるエントリー」
CSSを整理整頓！使われていないセレクタをチェックできる「CSS Redundancy Checker」
RSSをミックスして表示してくれる「RSSMixer」: DesignWorks
100種類を超えるデザインが用意されたボタンジェネレーター「ButtonBoost」
究極にシンプルなカレンダーがフリーでダウンロードできるサイト
関連した画像も見つけてくる、新しい形の画像検索エンジン「TRIPIT」