コーディング

PerfectPixelのインストールと使い方を図解で丁寧に解説する

PerfectPixelを使うとコーディングとデザインを重ねてズレを確認できる!

今回はPerfectPixelのインストールから使い方まで図解でわかりやすく紹介していきます!

PerfectPixelの正式名称は、「PerfectPixel by WellDoneCode (pixel perfect)」です。長いですね^_^;

PerfectPixelでコーディングしたページがデザインとズレているか確認する

コーディングしたページがデザインカンプとどれだけズレているか確認したいことありますよね。

PerfectPixelを使えば、ブラウザで開いたページとデザインカンプを重ね合わせてズレを確認できます!

PerfectPixelのインストール

PerfectPixelはブラウザの拡張機能で利用できます。

主要ブラウザのほとんどに対応しています。

今回はGoogle Chromeに追加してみましょう。

【1】PerfectPixelのサイトを開いて画像赤枠をクリック

PerfectPixel

PerfectPixel

【2】「Chromeに追加」をクリック

PerfectPixel

【3】ローカルファイルにもPerfectPixel使用できるように設定する

ブラウザ右上にPerfectPixelアイコンが出るので、右クリックして「拡張機能を管理」をクリック

PerfectPixel

画像赤枠をクリックして「ファイルのURLへのアクセスを許可する」をオンにする
PerfectPixel

これでPerfectPixelを使う準備が整いました!

次は実際に使ってみましょう。

PerfectPixelの使い方

ブラウザ右上のPerfectPixelアイコンを押します。

右上に以下の画像赤枠のエリアが出てきます。ここにデザインカンプ(jpg,png画像など)をドラッグ&ドロップします。

PerfectPixel

すると下の画像のようにwebページに画像が重なって表示されます。

右上のメニューの文字がズレています。

また当サイトのキャラまめしばくんも高さがズレてしまっていますね。。
PerfectPixel

以下の枠でコントロールできます。
目のマークで表示非表示を切り替え、鍵マークで画像を固定などが可能です。
PerfectPixel

以上、PerfectPixelの使い方でした。

PerfectPixelを使うことでデザインと完全一致したページを作ることも可能です。

ぜひ活用してみてください!

スポンサーリンク

-コーディング

© 2020 まめしばweb Powered by AFFINGER5