HTML要素の簡易レイアウト調査なら「XRAY」ブックマークレットが超軽い

HTMLの要素調査と言えば、通常はブラウザ付属の開発者ツールなどで行います。

Chromeだとデベロッパーツール、Firefoxだと内蔵ツールやFirebugなどで行えば、要素に関する詳しい情報を取得することができます。

ただ、幅や高さなどのちょっとした情報を知りたいだけなのに、開発者ツールを起動するのは、重たくて少し億劫です。

そういった時には、「XRAY」が、簡単なレイアウト情報なら一瞬で情報が取得できて最近重宝しているので紹介です。

photo by Susana Fernandez

XRAYとは

XRAYは、HTML要素の簡易調査を行えるブックマークレットです。

ブラウザの開発者ツールと違って、JavaScriptで、瞬時に以下のような調査画面を開くことができます。

環境によっては、開発ツールの場合、起動に数秒から10秒かかることもありますが、このブックマークレットは、0.1秒もかからないと思います。

ただ、XRAYは、レイアウトを簡易要素調査するものなので、調査できる内容は以下のものに限られます。

要素
ID
クラス
継承階層
position
width
height
float
border
margin
padding

ウェブサイトをデザインする上で頻繁に確認する要素の高さや幅、ボーダー、余白などを、ちょこっと調べるだけならもってこいのツールだと思います。

XRAYの使い方

XRAYは、ブックマークレットなので、手軽にブラウザに登録して利用することができます。

登録方法

登録するには、まずブラウザでXRAYページを開いてください。

すると、中心部分に「XRAY」と書かれたボタンがあるので、それをブラウザのブックマークや、ブックマークバーなどにドラッグ＆ドロップします。

これで登録は完了です。

使用方法

登録したブックマークレットを利用するには、まずは利用したいページで先程登録した「XRAY」ブックマークレットをクリックしてください。

すると、以下のようなダイアログが表示されるので、マウスで調査したい要素をクリックします。

すると、以下のような調査結果が表示されます。

要素の幅と高さがわかりやすく数字で表示され、マージンは薄紫色で、パディングは赤紫色で表示されます。

配置関係の情報なら、ある程度のものはかなり手軽に手に入ります。

ただ、XRAYで要素調査するには、マウスでクリックする必要があります。ですので、前面に出ている要素の下になっている要素などは調査することができません。

そういった時は、デベロッパーツールなどを起動する必要があります。

文字を大きくする設定変更

この、XRAYブックマークレットなんですが、簡単な調査ならとても手軽に行えます。

ただ、デフォルトの状態だと、かなり文字が小さいです。

デフォルトの大きさで使用すると、以下のような文字サイズです。

この文字サイズは、8ptとなっており、ピクセルに直すと約10.67pxしかなく、とても見づらいです。

ですので、ブックマークレットのコードを改良して、文字サイズが以下のように16pxになるようにしてみました。

以下は、文字を大きくするための設定方法です。

文字サイズの変更方法

Google Chromeの設定を例にすると、まずはブックマークレットを右クリックして「編集」を選択します。

すると、以下のようなブックマークの編集画面が表示されるのでURLの部分を全選択するか、削除しておきます

あとは以下の設定を書き加えたものと差し替えます。

javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement('SCRIPT');%20scriptElem.setAttribute('language',%20'JavaScript');%20scriptElem.setAttribute('src',%20scriptURL);%20document.body.appendChild(scriptElem);var%20css=document.createElement('style');rule=document.createTextNode('#XRAYHUD{font-size:16px%20!important;}');css.media='screen';css.type='text/css';if(css.styleSheet){css.styleSheet.cssText=rule.nodeValue;}else{css.appendChild(rule);};document.getElementsByTagName('head')[0].appendChild(css);}loadScript('http://westciv.com/xray/thexray.js');

これで普通に利用すれば、文字の大きな調査画面が表示されます。

「XRAYデフォルトでは文字が小さすぎる」なんて場合はご利用ください。