Chrome拡張機能「Perfect Pixel」を使ってピクセルパーフェクトを実現させよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

デザインとコーディングが分業制の企業は最近多くなってきたと思います。分業制の場合、デザインがFixして、次にフロントエンド作業、実装チェックという工程で進行します。 この実装チェックまでに期間が空いてしまったり、自分が作ってないデザインだと、チェックしにくいなと思うこともしばしばあります。そんな憂うべき実装チェックの際に、よく使う便利なChromeの拡張機能をご紹介します。 perfect pixel まず、chromeの拡張機能をインストールしましょう。 下準備 まず、デザインカンプを書き出します。Retinaディスプレイ用に、2倍サイズで書き出します。今回は、本記事用にダミーのカンプ画像を用意してみました。Perfect Pixelを使って、検証してみましょう。 レイヤーを追加 まず、検証したいページを開きます。今回はこのページを使いました。 右上にPerfect Pixelのメニュー

[demAge]

ふふ…テキストオブジェクトの高さがなぜかline-heghtより小さかったり爆裂に大きかったりして四角オブジェクト新規で作ってマージン測ってる私には使いこなせないのだ…ふふ…ふ…（嗚咽）