ウェブページに掲載している画像サイズをすぐに調べたい。テキスト範囲の横幅が何pxなのか調べたい。
そんな「ウェブページの要素の情報をすぐに調べたい」ときって結構あるのです。
それは私がウェブディレクターであり、ブロガーだからかもしれません。でも、そういうウェブの情報を知りたくなる時が来るかもしれないので、今日の事は覚えておきましょうか！
このブックマークレットを使えば、ウェブページに掲載してある要素情報をすぐに調べることができちゃいます。それも、たったワンクリックで。
ウェブページの要素を調べる超便利ブックマークレット
ウェブページの要素を調べる時、右クリックのメニューの「要素検証」を使用する人は多いかと思います。ですが、いちいち面倒くさいですよね。
その代わりとして、一発クリックで要素の詳細が分かってしまう便利なブックマークレットがあります。それが「XRAY」というもの。
ブックマークレットは、ブラウザのブックマークに登録しておく事で使える便利機能。登録したブックマークレットを使用すると、ウェブページが表示されるのではなく、ウェブページ上で何かしらのアクションを起こすことができます。
例えば、私のブログの画像サイズを調べたいとします。そうしたら、予め登録しておいたブックマークレット「XRAY」を選択します。（※ブックマークレットの登録の仕方については後述します）
すると、画面上にメニューが表示されます。
この状態で、調べたいウェブページ上の要素をクリック。すると、ページの遷移はせず、先ほどのメニューに要素の詳細が表示されるんです。要素上にもタテヨコのサイズが表示されていますね。
メニューの中には画像のサイズだけでなく、marginやpadding、要素の持つclassなども表示されます。
人のウェブページを参考にしながら自分のブログをカスタマイズしていく。非常に一般的な流れだと思います。そんな時には、このブックマークレットが力になってくれることでしょう。
ブックマークレットの登録の仕方
ブックマークレットの登録方法は非常にカンタンです。まず、以下のリンクにアクセスしましょう。
アクセスをしたら、「XRAY」と表示されたボタンをクリックしたまま、ブックマークバーにドラッグ＆ドロップします。
これでブックマークレットの登録は完了です。あとは調べたいウェブページ上で、このブックマークをクリックすれば使い始められます。
あとがき
クリックひとつで使える手軽さが非常に嬉しいブックマークレットのご紹介でした。ぜひご活用ください。
それでは、今日はこの辺りで。
