04_ウェブサービス 04_ウェブディレクター 07_仕事で役立つ情報 28_便利ブックマークレット

ウェブページの要素を一瞬で調べられるブックマークレット「XRAY」

ウェブページに掲載している画像サイズをすぐに調べたい。テキスト範囲の横幅が何pxなのか調べたい。

そんな「ウェブページの要素の情報をすぐに調べたい」ときって結構あるのです。

それは私がウェブディレクターであり、ブロガーだからかもしれません。でも、そういうウェブの情報を知りたくなる時が来るかもしれないので、今日の事は覚えておきましょうか!

このブックマークレットを使えば、ウェブページに掲載してある要素情報をすぐに調べることができちゃいます。それも、たったワンクリックで。

ウェブページの要素を一瞬で調べられるブックマークレット XRAY が超便利

ウェブページの要素を調べる超便利ブックマークレット

ウェブページの要素を調べる時、右クリックのメニューの「要素検証」を使用する人は多いかと思います。ですが、いちいち面倒くさいですよね。

その代わりとして、一発クリックで要素の詳細が分かってしまう便利なブックマークレットがあります。それが「XRAY」というもの。

ブックマークレットとは…
ブックマークレットは、ブラウザのブックマークに登録しておく事で使える便利機能。登録したブックマークレットを使用すると、ウェブページが表示されるのではなく、ウェブページ上で何かしらのアクションを起こすことができます。

例えば、私のブログの画像サイズを調べたいとします。そうしたら、予め登録しておいたブックマークレット「XRAY」を選択します。(※ブックマークレットの登録の仕方については後述します)

ウェブページの要素を一瞬で調べられるブックマークレット XRAY が超便利 1

すると、画面上にメニューが表示されます。

ウェブページの要素を一瞬で調べられるブックマークレット XRAY が超便利 2

この状態で、調べたいウェブページ上の要素をクリック。すると、ページの遷移はせず、先ほどのメニューに要素の詳細が表示されるんです。要素上にもタテヨコのサイズが表示されていますね。

ウェブページの要素を一瞬で調べられるブックマークレット XRAY が超便利 3

メニューの中には画像のサイズだけでなく、marginやpadding、要素の持つclassなども表示されます。

ウェブページの要素を一瞬で調べられるブックマークレット XRAY が超便利 4

人のウェブページを参考にしながら自分のブログをカスタマイズしていく。非常に一般的な流れだと思います。そんな時には、このブックマークレットが力になってくれることでしょう。

ブックマークレットの登録の仕方

ブックマークレットの登録方法は非常にカンタンです。まず、以下のリンクにアクセスしましょう。

アクセスをしたら、「XRAY」と表示されたボタンをクリックしたまま、ブックマークバーにドラッグ&ドロップします。

ウェブページの要素を一瞬で調べられるブックマークレット XRAY が超便利 5

これでブックマークレットの登録は完了です。あとは調べたいウェブページ上で、このブックマークをクリックすれば使い始められます。

あとがき

素人から玄人まで、幅広く活用できるブックマークレットです。あなたがもしコーダーやウェブデザイナー、ウェブディレクターという立場なら、必ずや役に立つでしょう。

クリックひとつで使える手軽さが非常に嬉しいブックマークレットのご紹介でした。ぜひご活用ください。

それでは、今日はこの辺りで。

関連キーワードからさらに見る

\ この情報をシェアしよう! /

-04_ウェブサービス, 04_ウェブディレクター, 07_仕事で役立つ情報, 28_便利ブックマークレット
-,

Copyright© あなたのスイッチを押すブログ , 2020 All Rights Reserved.