調べましたが分からずこちらで質問させていただきます。
調べましたが分からずこちらで質問させていただきます。 模写コーディングをしようとGo Full Pageを使ってサイトの画像を保存しPhotoshopのものさしツールで余白などを調べていたのですが、Photoshopで測ったところが73.5pxであるのに、実際のサイトを検証ツールで調べるとmargin:50pxになっています。これはなぜずれが生じるのでしょうか？
ベストアンサー
2つの可能性がありそうなので確認してみてください。 1.Go Full Pageで書き出したデータをPhotoshopで読み込んだ際、模写サイトと同じ等倍で読み込めているかどうか。 例えば、MacのRatinaディスプレイなど高解像度ディスプレィでGo Full Pageを使いキャプチャーすると解像度が変ってしまいます。 この辺りの事情はややこしい部分ですが「CSSピクセル、デバイスピクセル」などで調べてみてください。 2.余白の捉え方が模写サイトのワイヤーと一致しているかどうか。 見た目の余白＝CSSで指定した余白 とは限らないので、paddingやpositionなどの指定がされていないかなど親要素なども含め観察してください。 また、marginは相殺が起こりますので、こちらも押さえておくとよいかと思います。 https://coliss.com/articles/build-websites/operation/css/about-collapsing-margins.html
質問者からのお礼コメント
ご丁寧にリンクも貼っていただきありがとうございます。 確認したところ、１のように解像度が異なっていることが原因のようでした。本当にありがとうございました。
お礼日時：2/27 14:30
