今回はPerfectPixelのインストールから使い方まで図解でわかりやすく紹介していきます！
PerfectPixelの正式名称は、「PerfectPixel by WellDoneCode (pixel perfect)」です。長いですね^_^;
PerfectPixelでコーディングしたページがデザインとズレているか確認する
コーディングしたページがデザインカンプとどれだけズレているか確認したいことありますよね。
PerfectPixelを使えば、ブラウザで開いたページとデザインカンプを重ね合わせてズレを確認できます！
PerfectPixelのインストール
PerfectPixelはブラウザの拡張機能で利用できます。
主要ブラウザのほとんどに対応しています。
今回はGoogle Chromeに追加してみましょう。
【1】PerfectPixelのサイトを開いて画像赤枠をクリック
【2】「Chromeに追加」をクリック
【3】ローカルファイルにもPerfectPixel使用できるように設定する
ブラウザ右上にPerfectPixelアイコンが出るので、右クリックして「拡張機能を管理」をクリック
画像赤枠をクリックして「ファイルのURLへのアクセスを許可する」をオンにする
これでPerfectPixelを使う準備が整いました！
次は実際に使ってみましょう。
PerfectPixelの使い方
ブラウザ右上のPerfectPixelアイコンを押します。
右上に以下の画像赤枠のエリアが出てきます。ここにデザインカンプ(jpg,png画像など)をドラッグ&ドロップします。
すると下の画像のようにwebページに画像が重なって表示されます。
右上のメニューの文字がズレています。
また当サイトのキャラまめしばくんも高さがズレてしまっていますね。。
以下の枠でコントロールできます。
目のマークで表示非表示を切り替え、鍵マークで画像を固定などが可能です。
以上、PerfectPixelの使い方でした。
PerfectPixelを使うことでデザインと完全一致したページを作ることも可能です。
ぜひ活用してみてください！