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

2007/08/29

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

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

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

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

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

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

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

MOONGIFTの関連記事