このページの本文へ

CSSのチェックに便利なブックマークレット「XRAY」

インストール不要!Web制作者必見のCSS解析ツール

2008年12月02日 08時00分更新

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

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

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

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

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

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

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

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

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

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

カテゴリートップへ

ソーシャルランキング
  1. これなら作れる!WordPressプラグイン開発に役立つ記事まとめ 60
  2. いまから本気で取り組む!SVGの入門から活用に役立つ記事9連発まとめ 15
  3. コンテンツマーケティングのセミナーに行く前に読んでおきたい記事8選 11
  4. 【週末まとめ読み】Google Fontsのぶっちぎりな進化に驚いた! 5
  5. 【週末まとめ読み】話題沸騰の新ブラウザー「Blisk」ってもう試した? 2
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1021
  10. 「シングルページ」流行の7つの理由と最新事例まとめ 705
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング