要素間の距離をチェックするためのブラウザ拡張
レンダリングされたページの要素間の距離を確認できるブラウザ拡張機能（任意のブラウザ）はありますか？.
更新：Firefox Dev Tools Rulerを試してみました：ただし、上記の参照画像に示されているように、隣接する要素間の距離は表示されません。それを取得するには、ルーラーに従って正確な値を手動で決定してから、2つの隣接する要素の値を差し引く必要があります。
レンダリングされたページの要素間の距離を確認するにはどうすればよいですか。
私は JR Screen Ruler を使用します：
コンピュータ画面用の無料の仮想定規
このスクリーンルーラーは、画面上のあらゆるものを正確に測定できる優れたツールです。これは、グラフィックス、Webページブラウザのサイズなどを測定するときに特に役立ちます。スクリーンルーラーは、ピクセル、インチ、ピカ、またはセンチメートルを表示できます。
ソース JRスクリーンルーラー
Firefox Dev Tools Ruler
定規の使用
ルーラーツールは、いつでも持ち歩くのに便利です。これは、ページの高さや幅、さまざまな列やサイドバーの大きさ、およびスクロールの大きさをすばやく確認する方法を提供します。
定規ツールはデフォルトではオンになっていないため、最初に有効にする必要があります。これをする：
- ツールボックスを開きます（ツールを切り替える簡単な方法としてctrl + shift + Iを使用することがよくありますが、それは私だけです。F12も機能します。もちろん、ページを右クリックして[要素の検査]を選択するのは簡単な方法です。それを行うには）、
- オプションパネル（ツールバーの歯車アイコン、右端、またはCtrl + Shift + O）に切り替えます。
- そこには多くのオプションがあり、恐れることはありません。「利用可能なツールボックスボタン」セクションまでスクロールし、「ページのルーラーを切り替える」ボックスがオンになっていることを確認します。
- 完了すると、ツールボックスツールバーに素敵な小さなアイコンが表示され、クリックするだけでルーラーを切り替えることができます。
ソース Firefox DevToolsでの要素と距離の測定
でもブラウザの拡張機能が欲しい！
Chrome
この拡張機能は、境界にぶつかるまでのマウスポインターの上下左右の寸法を測定します。したがって、Webサイトの要素間の距離を測定する場合は、これが最適です。色がピクセルごとに大きく変化するため、画像では実際には機能しません。
画像とHTML要素
次の要素の間で測定します：画像、入力フィールド、ボタン、ビデオ、gif、テキスト、アイコン。ブラウザに表示されるすべてのものを測定できます。
ページルーラーを使用すると、任意のページにルーラーを描画して、その幅、高さ、および位置を表示できます。
特徴
- 任意のページに定規を描画し、幅、高さ、上、下、左、右の位置を表示します
- ルーラーの端をドラッグしてサイズを変更します
- 矢印キーを使用して、ルーラーを移動およびサイズ変更します
- 定規の端から伸びるガイドを表示する
- ツールバーからルーラーのサイズと位置を手動で更新して、精度を変更します
- 「要素モード」を有効にして、マウスを要素の上に移動すると、ページ上の要素の輪郭を描きます
- 測定された要素の親、子、兄弟要素をナビゲートします
Firefox
任意のWebページに定規を描画して、ページ要素の幅、高さ、または配置をピクセル単位で確認します。
注-Firefox Quantumとの互換性はありません