「RulerGuide.js」は名前から想像できるように、Photoshop風のルーラー(定規)とガイドをWebページに表示することができるJavaScriptライブラリ(GitHub)。
キーボードショートカットを使ってルーラーやガイドの表示・非表示を切り替えることができます。操作方法は以下の通り。
- ルーラーをトグル： CTRL+ALT+R
- ガイドをトグル: CTRL+ALT+G
- ルーラーとトグルをトグル: CTRL+ALT+A
- 全てのガイドをクリア: CTRL+ALT+D
ガイドはルーラー部分から下または右にマウスをドラッグすれば表示されます。
ブックマークレットが用意されていてあらゆるサイトでルーラーとガイドを表示することもできます。ガイドの座標が表示されるので、Webサイトの部品のサイズを測ったりするとき便利に使えるかも(結構便利?)
