デイトラWeb制作中級編Day11 『PerfectPixel』

WEB制作
うにょママ
うにょママ

復習をかねたプログラミング学習の記録と+αで調べた事の備忘録です。

スポンサーリンク

【Day11】PerfectPixelを使ったチェック&修正

PerfectPixelとは

デザインカンプをもとに作ったサイトを、ブラウザ上でコーディングのズレを確認できる拡張機能。

サイトの上に透過した画像を重ね、デベロッパーツールを使いズレを修正していく。

デザインカンプとズレが無い=品質の高いコーディングである。

PerfectPixel公式サイト → https://www.welldonecode.com/perfectpixel/

PerfectPixelの使い方

PerfectPixelを使えばズレが一目瞭然!
  1. 重ねる画像(デザインカンプ)を取得する
  2. デベロッパーの幅をカンプと合わせる
  3. カンプの画像を読み込む
  4. 検証機能を使い「ズレ」を微調整
  5. コード修正

※どこまで厳密にチェックするかは案件による。

まとめ

PerfectPixelを使った再現度の高いコーディングはコーダーとして必須の技術だそうです。

この技術を身に着けて、仕事の途切れないフリーランスを目指したいと思います!

コメント

タイトルとURLをコピーしました