Page Ruler は Photoshop スタイルのルーラーとドラッグ可能な guide lines を任意のウェブページに追加します。ピクセル精度のルーラーが viewport の上端と左端に沿って表示され、guide lines をページ上にドラッグして距離の計測、アラインメントの確認、スペーシングの検証をライブページ上で直接行えます。
Figma や Photoshop で作業するデザイナーは、スペーシングとアラインメントの確認にルーラーとガイドを活用しています。しかし、それらのデザインが HTML/CSS で実装された際、pixel 精度の検証は通常 DevTools を開き、要素を一つひとつホバーし、計算済みの値をモックアップと比較する作業を意味します。Page Ruler は、使い慣れたルーラーとガイドのワークフローをブラウザに直接もたらします。目盛り付きの水平ルーラーが viewport の上端に、垂直ルーラーが左端に広がり、いずれも pixel 位置を表示します。どちらかのルーラーからクリック&ドラッグしてガイドラインをページに引き出せます。guide lines はカラーコード化されており（水平は青、垂直は赤）、pixel 位置を表示します。平行な 2本のガイド間の距離は自動計算されて表示されます。guide lines をドラッグして再配置したり、ダブルクリックで削除したりできます。オーバーレイ全体はページのレイアウトやインタラクションに影響を与えず、非侵入的にページの上に表示されます。
50 pixel ごとの目盛りを持つ精密なルーラーが、viewport の上端と左端に沿って表示されます。ルーラーはページとともにスクロールし、ページ原点（0,0）からの正確な pixel 位置を表示します。10px 間隔の目盛りと 50px ごとのラベルが付きます。
水平ルーラーからクリック&ドラッグして水平ガイドを作成するか、垂直ルーラーから垂直ガイドを作成します。guide lines はカーソル位置にスナップし、正確な pixel 座標（例：y: 200px）を表示します。ドラッグで再配置、ダブルクリックで削除できます。
2本の平行なガイドが配置されると、それらの間の pixel 距離が自動計算され、ブラケットとラベルで表示されます。2本の水平ガイドを 120px 離して配置すると、それらの間に「120px」とラベル表示されます。
水平ガイドは青、垂直ガイドは赤で、複数のガイドが配置されているときでも一目で区別できます。各ガイドには小さなラベルバッジにその位置が表示されます。
ルーラーと guide lines は、ページの DOM、レイアウト、JavaScript に影響を与えない透明なオーバーレイとしてレンダリングされます。ページ要素をクリックして操作することも引き続き可能です。オーバーレイはルーラーとガイドハンドル上のクリックのみをキャプチャします。
必要なだけ guide lines を配置できます。制限はありません。水平・垂直の guide lines でページ上のすべての重要なアラインメントポイントをマークした完全な計測グリッドを作成できます。
モックアップでヘッダーの高さが 80px、コンテンツが上から 120px の位置から始まると指定されています。それらの位置に水平ガイドを配置して、実装されたページがデザイン仕様と一致しているかを即座に確認できます。
繰り返される要素（カード、リストアイテム、セクション）の上端と下端にガイドを配置して、すべてのスペーシングが同一かを確認します。アイテム間の不均一なギャップが即座に明らかになります。
見出しの左端に垂直ガイドを配置し、下の段落テキスト、ボタン、画像が同じラインにアラインされているかを確認します。数 pixel のずれでもガイドに対して見えるようになります。
要素の左端と右端に 2本の垂直ガイドを配置して幅を計測します。高さの場合は 2本の水平ガイドを配置します。自動計算される距離が正確な pixel 寸法を提供します。
一般的なブレークポイントの幅（768px、1024px、1280px）に垂直ガイドを配置し、ブラウザをリサイズして各ブレークポイントで要素が正しくリフローされるかを確認します。guide lines は視覚的な基準点として固定されたままです。
DevSuite Pro のフローティングドックを開き、Page Ruler のアイコンをクリックします。ピクセル精度のルーラーが viewport の上端と左端に沿って表示されます。
上部のルーラーからクリック&ドラッグして水平ガイドラインを配置するか、左のルーラーから垂直ガイドを配置します。ガイドはカーソルに追従し、リリースした pixel 位置にスナップします。
各ガイドはその pixel 位置（例：y: 200px）を表示します。2本の平行なガイドが配置されると、それらの間の距離がラベル付きブラケットで自動表示されます。
任意のガイドをドラッグして新しい位置に移動できます。距離ラベルはリアルタイムで更新されます。ガイドをダブルクリックしてページから削除します。
Page Ruler のアイコンをもう一度クリックして、すべてのルーラーと guide lines を非表示にします。同じセッション中に再度有効化すると、ガイドの位置は保持されています。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
