ボックス要素のサイズを表示するブックマークレット“XRAY”

xray_t.png

久々に便利そうなブックマークレットを発見。調べたいページで登録したブックマークレットをクリックするとのボックス要素の、表示位置、サイズや、margin、padding、borderの上下左右の幅、positionやfloatの状態を表示。

XRAY :: for web developers

まずは、配付サイトのブックマークレットをブックマークバー等に登録。

Xra 1

調べたいページを表示したあと、登録したXRAYのブックマークレットをクリックすると半透明の黒いウィンドウが出現。

Xray 2

そのまま好きなページ内の場所をクリックすれば、ボックス要素の位置とサイズが表示され、また黒いウィンドウ内にはマージンやパディング等のに関わるCSS各属性が表示されます。

Xray 3

ブラウザはSafari2と3、Firefox等のMozilla系ブラウザ各種、IE6に対応。 FirefoxのFirebug、やMacならwebkitのインスペクター機能でもっと詳細な情報を見れるわけですが、とにかくサイズを確認したい場合はXRAYの方が手軽で良いです。何より表示がシンプルで見やすい。気になるレイアウトのサイトを参考にする時等重宝しそう。

このエントリーをはてなブックマークに追加
はてなブックマーク - ボックス要素のサイズを表示するブックマークレット“XRAY”
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]