2007年から2013年までの期間、およそ10,000件のデザインの記事をアップしたブログのアーカイブ。現在はhttp://designwork-s.netで更新中。
2007年07月31日

CSSレイアウト情報を瞬時に確認できるブックマークレット「XRAY」

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

cssbookmark.gif

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

詳しくは以下

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

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

cssbookmark02.gif

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

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

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

XRAY

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


posted by admin at 16:11 | Comment(0) | TrackBack(0) | Web
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。