Measure Distance を使うと、ウェブページ上の任意の2つの要素をクリックするだけで、水平（X）、垂直（Y）、対角線方向の正確な pixel 距離を即座に確認できます。要素間に距離の数値ラベル付きの視覚的な接続線が表示され、インフォバーには両要素のサイズと3方向の距離が表示されます。
ブラウザの DevTools で2つの要素間のスペーシングを確認するには、各要素を個別にホバーし、margin・padding の値を読み取り、実際の視覚的な距離を手計算する必要があります。Measure Distance はこれを完全に排除します。要素 A をクリック、要素 B をクリック — X（水平）、Y（垂直）、対角線の正確な pixel 距離が即座に表示され、2つの要素を直接つなぐラベル付きの線としてページ上に描画されます。このツールは要素のエッジ（bounding box）から計測するため、ユーザーが実際に目にする視覚的な間隔を表します。これは margin・padding の値を読み取る方法とは異なり、複数のスペーシングプロパティの累積効果を考慮します。選択した各要素はカラーのボーダーでハイライトされ、それ自身のサイズ（幅 × 高さ）が表示されるため、要素のサイズと要素間のスペーシングを1つのビューで確認できます。
最初の要素をクリック（青いボーダーでハイライト）し、次に2番目の要素をクリック（緑のボーダーでハイライト）します。各要素の bounding box 間の距離が計算され、即座に表示されます。ドラッグも手動入力も不要 — クリックするだけです。
水平距離（X）、垂直距離（Y）、対角線距離を同時に確認できます — それぞれ固有の色分けされた計測線とラベルで表示されます。X はアンバー、Y は赤、対角線は紫です。
破線の計測線が選択した2つの要素をページ上で直接つなぎ、各線の中点に距離ラベルが表示されます。視覚的な表現により、何が計測されているかが即座に明確になります。
選択した各要素には、小さなラベルに幅 × 高さのサイズが表示されます。これにより、ツールを切り替えることなく、同じビューで要素のサイズと要素間のスペーシングを両方確認できます。
新しい要素のペアをクリックすると、計測値が即座に更新されます。ツールを無効化・再有効化する必要はありません。新しい要素ペアの計測線が前の計測線と置き換わります。
viewport 下部に表示される固定のインフォバーに、コンパクトなサマリーが表示されます：両要素の名前とサイズ、および3方向すべての距離値（X、Y、対角線）。バグレポートやデザインフィードバックへの貼り付けに便利です。
モックアップによると、ボタンは見出しの24px下に配置されるべきです。見出しをクリックし、ボタンをクリックして、Y距離が正確に24pxであることを確認します。デザイントークンで指定されているものの、目に見えない微妙なスペーシングのずれを検出できます。
Card 1 と Card 2 の距離、次に Card 2 と Card 3 の距離を計測します。間隔が同一でない場合、不整合が見つかったということです — margin の違いや flexbox の gap の問題が原因である可能性があります。
デスクトップ幅で要素の距離を計測し、次にブラウザをリサイズしてモバイル幅で再計測します。スペーシングが breakpoint 全体で正しくスケールされているか、responsive な margin・padding の調整が設計通りに機能しているかを確認します。
バグレポートに正確な計測値を含めましょう：「nav とヒーローの間隔は47pxで、デザイン仕様では32pxです。」インフォバーの値を Jira チケットや GitHub Issues に直接コピーできます。
水平方向に揃っているべき2つの要素をクリックします。Y距離が0pxであれば、完全に揃っています。ゼロ以外の Y 値は垂直方向のずれを示します — その数値が何 pixel ずれているかを正確に教えてくれます。
DevSuite Pro のフローティングドックを開き、Measure Distance アイコンをクリックします。カーソルがクロスヘアに変わり、最初の要素を選択できることを示します。
ページ上の任意の要素をクリックします。青いボーダーでハイライトされ、「Element A」とそのサイズ（幅 × 高さ（pixel））がラベルに表示されます。
2番目の要素をクリックします。緑のボーダーでハイライトされ、「Element B」とラベル付けされます。2つの要素をつなぐ計測線が即座に表示されます。
3つの計測線が表示されます：水平（X）はアンバー、垂直（Y）は赤、対角線は紫。各線には pixel 距離を示すラベルが付いています。下部のインフォバーにすべての値がまとめて表示されます。
別の要素のペアをクリックすると、新しい距離を即座に計測できます。完了したら、ドック内の Measure Distance アイコンをクリックしてツールを無効化します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
