必見！Webデザインのお供に「XRAY」 // MOONGIFT Archived

Webサイトをデザインをしていて、どうにもサイズがずれる事があるかも知れない。そうした時、いちいちソースを表示してCSSのクラスを確認して、CSSファイルと照らし合わせていないだろうか。非常に手間ひまのかかる作業だ。

表示されているそのものを確認できれば便利だ。そしてそれを実現するソフトウェアがこれだ。

今回紹介するフリーウェアはXRAY、CSSレイアウトの情報をフローティング表示するソフトウェアだ。現在ライセンスは明記されていないが、将来的にはオープンソース化される予定との事だ。JavaScriptなので、ソースは現状でも見ることが可能だ。

XRAYはBookmarkletとして導入するソフトウェアで、公式サイトのブックマークをツールバーに登録すればインストール完了だ。後は任意のサイトでBookmarkletを実行すればいい。

Bookmarkletを実行すると、ブラウザ上にフローティングウィンドウが表示される。後は適当な文字列をクリックすると、その文字列のCSSレイアウト情報を表示してくれる。さらにその部分だけハイライト表示され、右上の開始位置の座標、高さ、幅を表示してくれる。

CSSレイアウト情報はエレメント名、id、classに加えてhtmlからのネスト構造、position、padding、border、marginを表示する。Webデザインする上でかなり役立つのは確かだ。

対応ブラウザはIE6以上、GeckoエンジンやWebKitを使ったブラウザ（Firefox、Safariなど）となっている。Webデザイナはもちろん、開発者の方も必見のソフトウェアだ。