Web Grid Rulerという拡張機能を作りました
この頃、デザインからWEBサイトをコーディングするお仕事などをしています
その時、苦労するのがデザインを忠実に再現することだと思います
そんな時サイトに線が引けないかなということで作った物がコチラになります
Web Grid Ruler
Webページ上にカスタマイズ可能な縦線・横線のグリッド（ルーラー）を表示するChrome拡張機能です。
Webデザインのレイアウト調整、ピクセル単位でのズレ確認、レスポンシブデザインの確認などの際に便利です。
主な機能
- グリッドの表示/非表示の切り替え: 拡張機能全体の有効・無効化のほか、縦線・横線個別の有効・無効化が可能です。
-
サイズ・間隔の自由なカスタマイズ: 線幅、高さ、線の間隔を任意の数値と単位（
px,%,vw,vhなど）で設定できます。 - カラーの自由な選択: カラーピッカーまたはカラーコード（HEX）でグリッド線の色を自由に変更可能です。
- 最前面での表示: ページ上の他の要素に隠れることなく、常に最前面にグリッドが表示されます。
- スクロール追従: ページをスクロールしても、左上（原点）を基準としたグリッドが正確に維持されます。
使い方
インストール後、Chromeのツールバーから「Web Grid Ruler」のアイコンをクリックして設定ポップアップを開きます。
1. 全体設定
- グリッドを表示する (チェックボックス): グリッド全体の表示/非表示を切り替えます。
2. 縦線設定 (Vertical Grid)
- 縦線を表示する (チェックボックス): 縦線の表示/非表示を切り替えます。
- 線の太さ: 縦線の太さを数値で指定します。
-
太さの単位: 線の太さの単位（
px,em,rem,%,vw,vh）を指定します（通常はpxを推奨します）。 - 間隔: グリッド線同士の間隔を数値で指定します。
-
間隔の単位: 間隔の単位を指定します（例:
px,vwなど）。
3. 横線設定 (Horizontal Grid)
- 横線を表示する (チェックボックス): 横線の表示/非表示を切り替えます。
- 線の太さ: 横線の太さ（高さ）を数値で指定します。
- 太さの単位: 線の太さの単位を指定します。
- 間隔: グリッド線同士の間隔を数値で指定します。
-
間隔の単位: 間隔の単位を指定します（例:
px,vhなど）。
4. 線の色 (Grid Line Color)
- 色の選択: カラーピッカーから好きな色を選択します。選択された色のHEX値（16進数カラーコード）が右側に表示されます。
技術仕様・動作特性
-
最前面への追従: ページ上の要素が動的に追加された場合でも、拡張機能のグリッド（Shadow DOM）が常に最前面（
z-index: 2147483647）に再配置されるように監視・制御されています。 -
動作制限ページ: Chromeのセキュリティポリシーにより、
chrome://で始まる管理ページやChromeウェブストア等の特定の保護されたページ上ではグリッドが表示されません。