Chrome DevToolsの「変更」を使ったら、 ピクセルパーフェクト調整がかなり楽になった話
カンプからコーディングをしていると、Chrome拡張の Pixel Perfect を使って、デザインカンプと実装画面を重ねながら調整することがあると思います。
私も普段、Pixel Perfectを使いながら、DevToolsで margin や padding などを調整していました。
ただ、今まではこんな流れで作業していました。
Pixel Perfectでズレを確認する
↓
DevToolsで対象箇所を探す
↓
marginやpaddingなどの値を調整する
↓
見た目が合ったらエディタに戻る
↓
該当箇所を探して同じ値に修正する
このやり方自体は普通だと思うのですが、
DevToolsで調整したあとに、エディタ側で該当箇所を探しに行く作業 が地味に面倒でした。
普通に調整する場合
例えば、DevTools上で対象のCSSを見つけて、値を調整します。
今回は、SP時の .works-detail__content の margin-top を調整しました。
調整すると、見た目はだいたい合ってきます。
ただ、このあとエディタに戻って、該当するCSSを探して修正する必要があります。
これが毎回少し面倒でした。
特にCSSが長くなっていたり、SCSSでファイルが分かれていたりすると、
「これどこに書いてたっけ？」となることがあります。
本題：Chrome DevToolsの「変更」が便利だった
そこで便利だったのが、Chrome DevToolsの 「変更」 機能です。
この機能を使うと、
DevTools上で変更した内容を差分として表示 してくれます。
つまり、DevToolsでどこをどう変えたのかを、あとから一覧で確認できます。
「変更」の開き方
まずDevToolsを開いて、右上の三点メニューをクリックします。
次に、その他のツール を開きます。
その中にある 変更 をクリックします。
すると、DevTools内に「変更」タブが開きます。
この時点では、まだDevTools上で変更していなければ何も表示されません。
DevToolsで修正すると差分が表示される
「変更」タブを開いた状態で、再度DevTools上でCSSを修正します。
例えば、先ほどと同じように margin-top を変更すると、以下のように差分が表示されます。
こんな感じで、
- margin-top: 49px;
- margin-top: 42px;
のように、
変更前と変更後の値を差分で確認できます。
これがかなり便利でした。
AIツールに貼るとさらに楽
さらに今なら、この差分をそのままAIツールに貼ることもできます。
Cursor、Claude Code、Codexなど、自分が使っているAIツールに対して、
以下はChrome DevToolsの「変更」で確認した差分です。
該当するCSSファイルを探して、この修正を反映してください。
今回はSP時の修正なので、
@media screen and (max-width: 768px) 内の該当箇所だけ修正してください。
PC側には影響しないようにしてください。
のように指示すれば、該当箇所を探して修正してもらえます。
これによって、
DevToolsで調整した内容を、エディタ側で自分で探し直す手間 がかなり減りました。
複数箇所の修正にも対応できる
この「変更」機能は、1箇所だけでなく、複数箇所の修正にも対応できます。
例えば、同じページ内でいくつかの margin-top を調整した場合も、以下のようにまとめて差分が表示されます。
なので、ある程度まとめてページ内を調整してから、
その差分をAIツールに渡して一気に反映することもできます。
これはかなり便利でした。
使ってみて感じた注意点
実際に使ってみて、いくつか注意点もありました。
1. ページをリロードすると変更が消える
DevTools上の変更なので、ページをリロードすると変更内容が消えてしまいます。
特にリンク付近を調整しているときに、間違ってクリックしてページ遷移してしまうと、
それまで調整していた内容が消える可能性があります。
複数箇所まとめて修正できるとはいえ、
こまめに差分をコピーして反映する 方が安全だと思いました。
2. コピーするときは必要な範囲だけでもよさそう
「変更」タブの右上にあるコピー機能を使うと、差分全体がコピーされるようでした。
もちろんそれでも使えるのですが、AIツールに読ませる場合は、
必要な部分だけ手動で選択してコピーした方が分かりやすい場面もありました。
3. SP修正なのかPC修正なのかを明示した方がいい
AIツールに差分を貼るときは、
どのブレイクポイントの修正なのか を明示した方がいいです。
例えばSP時の修正なのに何も言わないと、PC側のCSSまで修正される可能性があります。
なので、
今回はSP時の修正です。
@media screen and (max-width: 768px) 内の該当箇所だけ修正してください。
PC側には影響しないようにしてください。
のように伝えると安全です。
逆にPC時の修正なら、PC側だけ修正するように伝えるとよさそうです。
まとめ
Pixel Perfectを使ったピクセルパーフェクト調整では、
DevToolsで見た目を合わせたあとに、エディタ側で該当箇所を探して修正する作業が発生しがちです。
Chrome DevToolsの 「変更」 を使うと、
DevTools上で変更した内容を差分として確認できます。
さらに、その差分をCursorなどのAIツールに貼れば、
該当箇所への反映もかなり楽になります。
DevToolsで調整
↓
「変更」で差分を確認
↓
AIツールに貼る
↓
該当CSSに反映してもらう
という流れにできるので、
ピクセルパーフェクト調整の手間をかなり減らせると感じました。
カンプからのコーディングでPixel Perfectを使っている方は、
一度試してみると便利だと思います。