最近perfectpixelなるツールをつかってみて感動したのでそのメモ書きです。
そもそも久しぶりにHTMLとCSSを使ったデザインの当て込みをおこなおうとしたのですが、
xdで作られたファイルでデザインを納品してもらったのが初めてでした。
xdのファイルの画像の高さ、幅やサイズを確認してそれをもとにCSSで画像の高さや文字のサイズを設定しようとしたのですが、そもそもxdファイルとCSSのサイズ感が合わない。
このままだと正確な数値がわからないとなやんでいたところに上記のツールですよ。
何ができるかというと、とってもシンプルなのですが画像をブラウザの画面の上に透過させて載せることができるんですよね。
詳細な使い方はこちら
https://www.asobou.co.jp/blog/web/perfectpixel
これがめちゃくちゃよくて納品されたデザインとずれているかどうかが確認できるんですよね。
子供の頃に使った「うつしがみ」の要領ですね。
(みんな使いましたよね??)
HTML,CSSのコーディングには必須だなと思いました。