CSSレイアウト情報をレイヤー表示するブックマーク （XRAY）

CSSのレイアウトなど気になる部分をサッと確認したいときに便利なのが、XRAY。普段利用しているブラウザでも利用でき、利用する準備も非常に簡単。ソフトウェアなどのインストールは必要ない。

利用するには、レイアウト情報を確認したいサイトで、事前にブックマークしておいたXRAYを呼び出すだけで利用できる。対象の部分をクリックすると、サイズや位置の情報をレイヤー表示してくれる。

XRAYをブックマークに登録
利用する準備として、XRAYのコードをブックマークに登録しておく必要がある。ブラウザで右クリックなどで登録することが出来るので簡単。

表示される情報はレイアウト関連
XRAYを利用して確認できるCSSの情報は主に、レイアウトに関連する内容に限定される。フォントサイズなどは表示されないが、レイアウト情報をチェックしたい場合には非常にわかりやすく表示されるので、好感が持てる。

CSSでデザインを作成する際、ブラウザによってレイアウトが微妙に崩れたるする場合がある。そうした際に、XRAYを利用して異なるブラウザで値をチェックすれば、修正すべき部分を比べることも出来るので便利に活用していただきたい。