Photoshop風のルーラーとガイドをWebページに表示する「RulerGuides.js」

RulersGuides js

RulerGuide.js」は名前から想像できるように、Photoshop風のルーラー(定規)とガイドをWebページに表示することができるJavaScriptライブラリ(GitHub)。

キーボードショートカットを使ってルーラーやガイドの表示・非表示を切り替えることができます。操作方法は以下の通り。

  • ルーラーをトグル: CTRL+ALT+R
  • ガイドをトグル: CTRL+ALT+G
  • ルーラーとトグルをトグル: CTRL+ALT+A
  • 全てのガイドをクリア: CTRL+ALT+D

ガイドはルーラー部分から下または右にマウスをドラッグすれば表示されます。
ソフトアンテナ

ブックマークレットが用意されていてあらゆるサイトでルーラーとガイドを表示することもできます。ガイドの座標が表示されるので、Webサイトの部品のサイズを測ったりするとき便利に使えるかも(結構便利?)

スポンサーリンク