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

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

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

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

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

photo by Susana Fernandez

スポンサーリンク
レクタングル(大)広告

XRAYとは

XRAYブックマークレット

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

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

XRAY調査結果ダイアログ

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

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

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

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

XRAYの使い方

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

登録方法

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

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

XRAYボタンをブックマークバーにドラッグ&ドロップ

これで登録は完了です。

使用方法

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

2015-08-16_12h44_09

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

マウスで調査したいHTML要素をクリックする

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

XRAYの調査結果

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

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

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

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

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

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

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

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

デフォルトのXRAYの文字サイズ

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

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

文字サイズを16pxにしたXRAYブックマークレット

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

文字サイズの変更方法

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

XRAYを右クリックして編集を選択

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

XRAYブックマークレットの編集

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

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

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

まとめ

XRAYを利用すると、要素の配置に関する情報なら、開発者ツールよりも手軽に手に入ります。

もちろん、詳しい要素情報を調べるのなら、デベロッパーツールなどには敵いません。

けれど、「ちょっと要素の幅と高さを知りたい」とか「ここのマージン何ピクセルにしていたっけ?」なんてのを、さっと調べるだけなら、XRAYの方が軽くて重宝しています。