「優れたCSSレイアウトのマークアップを研究したい」「制作途中のWebページの表示不具合の原因を探りたい」――そんなときに使えるツールといえば「Firebug」や「Web Developer」がおなじみだ。これらのツールはCSSや（X）HTMLの確認だけでなく、その場で編集したり、JavaScriptのデバッグもできるスグレモノ。だが、もっと最低限の機能だけを手軽に使いたい、というケースもあるだろう。

　（X）HTMLの構造やCSSのプロパティのチェックに特化したシンプルなツールが「XRAY」だ。Webブラウザーに登録して使うJavaScriptブックマークレットのXRAYは、アドオンをインストールする必要もなく、機能が絞られている分、動作も軽快だ。

作者のサイトからブックマークレットを登録。FirefoxやSafariならドラッグ＆ドロップでブックマークツールバーへ

　事前準備は、作者・Westcivのページにアクセスし、「XRAY」と書かれたボタンをブックマークに登録するだけ。FirefoxやSafariならそのままブックマークツールバーにドラッグ＆ドロップで、Internet Explorer（IE）の場合は右クリック→「お気に入りに追加」で登録しよう。なお、XRAYはFirefox、Safari、IE 6以降に対応しているが、IEでは一部正しく動作しないケースがあるようだ。

調べたいWebページを開き、登録しておいたブックマークレットをクリック

　XRAYの利用は、（X）HTMLやCSSを確認したいWebページを開いた状態で、ブックマークレットを実行すればOK。半透明の擬似ウィンドウが開き、そのまま調べたい場所をクリックすると、その部分の（X）HTMLの構造（要素、セレクタ）、CSS（プロパティ、値）が表示される。

選択した部分がハイライトに。プロパティと値を確認できる半透明の擬似ウィンドウは自由に動かせる

　同時に、選択した要素がハイライト表示になり、縦横サイズも示してくれる。サイズを調べたいときにパッと見で分かりやすいデザインがうれしい。

　XRAYでチェックできるCSSプロパティはレイアウト関連に絞られており、サイズのほかはpositionやfloat、border／margin／paddingなどとなっている。機能でいえばこれ以上はないシンプルな制作支援ツールだが、さくっと手軽に使える点は非常に魅力的だ。ぜひ試してみよう。

ツイートする

カテゴリートップへ

この記事の編集者は以下の記事をオススメしています

• ダブルクリックでWebが書き換わる！便利なFirefoxプラグイン

• Web制作に超便利！無料のプロトタイプ作成ツール

• クロスブラウザ対応のための3つのFirefoxプラグイン

• これは使える！加工もできる画面キャプチャソフト

• インストール不要！主要ブラウザーを1クリックで起動

はてブ注目ランキング

1. 50代でも分かったHTML5の基礎知識728 users

2. 10分でわかる！ jQuery Mobileのキホン94 users

3. iBooks AuthorでHTML5の電子書籍作ってみた76 users

4. HTML5要素のブラウザー実装状況を調べてみた38 users

5. 本店と楽天を使い分け、ブランディングを強化23 users

6. 40分で覚える！jQuery速習講座2208 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2135 users

8. もう配色には困らない！「Adobe Kuler」1681 users

9. 30分でできる！Webサイトを高速化する6大原則1496 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1215 users

最新記事

• ゲームを楽しむ前に知っておきたい危険とは？

  

• ZIPファイルも重複排除！バックアップ用の「Dell DR4000」

  

• NTT、端末に復号鍵が不要な「クラウド鍵管理型暗号方式」

  

• STECの「CellCare」でエンタープライズSSDもMLC化

  

• クリエイターの愛こそ力の源泉！　ワンフェス一般ブース【その1】