必見！Webデザインのお供に「XRAY」
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デザイナはもちろん、開発者の方も必見のソフトウェアだ。
XRAY :: for web developers
http://westciv.com/xray/index.html
[...] MOONGIFT: » 必見！Webデザインのお供に「XRAY」:オープンソースを毎日紹介 [...]
Pingback by diigo2ZerockBlog 09/03/2007 « ZerockBlog | 2007/09/04 Tuesday