ピクセル単位でWeb制作が可能になるChrome拡張機能 『Perfect Pixel』

ピクセル単位でWeb制作が可能になる

最終のブラウザ表示テスト等に便利な

Chrome拡張機能「Perfect Pixel」

レイヤーを重ねて表示のブラウザの違いを視覚化。

Chrome拡張機能 Perfect Pixel

インストール

上記リンク先ページをChromeで開き

「Chromeに追加」をクリックします。

拡張機能を追加でインストールが完了します。

使用時はアイコンをクリックするので

ピン留めしておくと便利です。

レビュー

アイコンをクリックするとこんなパネルが表示されます。

レイヤー部分に別のブラウザなどのスクリーンショット画像を

読み込ませます。

Web制作時に最終ブラウザ間での表示が少し違ったり

CSSを書き換えたりする場合がありますが、

そういう表示の違いをレイヤーを重ねて表示することで

差が分かるようになります。

レイヤーの配置の上下左右ボタンで表示位置を調整したら

鍵のマークをクリックしてロックします。

この時に見やすく透明度も調整しておきます。

あとは位置調整などをCSSで調整していきます。

とりあえずはChromeのデベロッパー機能で

調整して完了したらCSSへ書き込みという

作業をしていくことでブラウザ間での

表示の違いをピクセル単位で修正が可能です。

差を表示するモードもあり

少しの違いも一目で分かります。

最近はIEも無くなりそこまで大きな違いは

無くなってきましたが、フォントサイズだったりと

ブラウザで違う場合もあるので

レイヤーで重ねて修正できればとても便利です。

各種ショートカットも使えるので

使い慣れると手放せなくなりそうです。

主にWeb制作の最終ブラウザ間での

表示チェックに役立つ便利なChrome拡張機能です。