模写コーディング時に、ローカル環境でも使えるrulerはありますか？

Question

現在模写コーディングを始めようとしていて、page ruler reduxを使用していますが、ローカル環境で長さを測らないと要素を正しい位置に正確に置くことができません。ローカル環境で使えるrulerを探していますが、デスクトップ上でしか使用できず、他のアプリの上に定規を表示できないものなど、いいものが見つかりません。

Comments

[m.ts10806]

「ローカル環境」「デスクトップ上」をどういう定義で使われているかわかりません。
「ピクセル定規」じゃダメなんでしょうか。

[reo_fukkase]

macを使っていますが、ピクセル定規をダウンロードした後に使用することができません。

[m.ts10806]

でしたらはじめから「Mac」を前提条件で書いておいてください。
あと、前半の用語の定義についてはどうでしょうか

[reo_fukkase]

はい、わかりました
前半の定義について説明します。
一度入れてみた定規のアプリでは、最初のホームの画面(デスクトップ)上では定規が表示されますが、Googleを開いたら、ほかのものを全画面表示にすると、それが定規にかぶさって見えなくなり、使えなくなるという感じです

[m.ts10806]

質問は編集できるので適宜追記してください。
こちらのコメントに書かれてもデフォルト非表示なので目につきにくいです。

Answer 1

ちょっと観点が違うかもしれませんが、模写コーディングをする際に便利なPerfectPixelというChromeの拡張機能があります。

定規は表示されないのですが、自分がコーディングしてる画面の下に模写したいサイトの画像を表示できるので、トレーシングペーパーでなぞるようにコーディングができます。

拡張機能を作った方のYoutubeの紹介動画を見ると使い方がわかりやすいと思います。
PerfectPixel - How to make HTML with perfect pixel accuracy - YouTube

他にもこの拡張機能の使い方を紹介したブログ記事もありますので、参考にはっておきます。
PerfectPixelを使ってデザインカンプとコーディングの確認時間を短縮しよう

Comments

[reo_fukkase]

参考になりました、ありがとうございます！