作成中のhtmlのプレビューをgooglechromeで表示していますが、page ruler reduxというツールが使えません。

Question

現在はAirbnb（https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1576991857_OWQ3M2IxMzkzMjE1）の模写コーディング中で、元のサイトではrulerは使えます。しかし、その時もrulerの始発点が上手く定まりません。Googleで調べてみましたが、原因がわかりませんでした。
また、rulerで測った数値のpxを実際に入力しても、htmlのページを更新した後のプレビューには正しい数値が反映されません（rulerで測った時に得られる数値と実際にcssに記述する数値が合わない）。原因が分かる方、よろしくお願いします。

Answer 1

私の方でも確認してみたのですが、rulerは問題なく使用できたため、始点が定まらない理由はこちらでは分かりませんでした。
環境の違いで起きるバグかも知れません。

そして数値が実際に合わない理由は、正確に測れていないか、ブラウザのデフォルトのCSSが干渉している等の理由が考えられます。
試しに__reset.css__を入れてみてはどうでしょうか？
参考までに、私が普段使用しているものです → https://unpkg.com/reset-css/reset.css

最後にそもそも論になってしまうのですが、模写ならばrulerで測るのではなくデベロッパーツールから数値を確認すれば良いと思います。
細かい数値や、相対値で指定されているもの等をrulerで測って正確に模写することはホボ不可能だと思われます。

Comments

[reo_fukkase]

reset.cssありがとうございます。
実際の案件のときのコーディングでも、rulerは使いませんか？
与えられたデザインをみながら作るときはrulerを使うものだと思っていました。
本当に初心者で何もわからない状態ですみません????‍♂️

[take-t.t.]

自分は業務未経験者のため案件時の事は分からないのですが、ブラウザ上で動くrulerは使わないと思います（実際にコーディングしないとサイトが表示できない）。

もしデスクトップ上で動くrulerを使ってコーディングするにしても、その場合ワイヤーフレーム・モックアップ等が全て原寸大（且つモニターの大きさの違いが考慮できない）で、しかもpx指定しか出来ない事になってしまいます。

[reo_fukkase]

ありがとうございました。