![うにょママ](https://www.unyomama.com/wp-content/uploads/2021/01/11efc12447f2fb65488f0c08b69fdb5c.png)
うにょママ
復習をかねたプログラミング学習の記録と+αで調べた事の備忘録です。
![](https://image.moshimo.com/af-img/2965/000000051504.png)
【Day11】PerfectPixelを使ったチェック&修正
PerfectPixelとは
デザインカンプをもとに作ったサイトを、ブラウザ上でコーディングのズレを確認できる拡張機能。
サイトの上に透過した画像を重ね、デベロッパーツールを使いズレを修正していく。
デザインカンプとズレが無い=品質の高いコーディングである。
PerfectPixel公式サイト → https://www.welldonecode.com/perfectpixel/
PerfectPixelの使い方
![](https://www.unyomama.com/wp-content/uploads/2021/08/dailytrial_second-day11-1-800x419.jpg)
- 重ねる画像(デザインカンプ)を取得する
- デベロッパーの幅をカンプと合わせる
- カンプの画像を読み込む
- 検証機能を使い「ズレ」を微調整
- コード修正
※どこまで厳密にチェックするかは案件による。
まとめ
PerfectPixelを使った再現度の高いコーディングはコーダーとして必須の技術だそうです。
この技術を身に着けて、仕事の途切れないフリーランスを目指したいと思います!
![](https://image.moshimo.com/af-img/2965/000000051504.png)