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

[PR]記事内のアフィリエイトリンクから収入を得る場合があります
  • URLをコピーしました!

RulersGuides js

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

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

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次