デザイン崩れの見つけ方

多くのエンジニア案件でデザイン崩れはつきものです。しかし崩れの原因が見つけられず、作業が止まってしまいがちです。今回はそういった場合に崩れの原因を可視化する方法をまとめていきます。

1. CSSで見つける方法

CSSの全称セレクタを利用してoutlineを表示させる。

* {
	outline: 1px solid magenta;
}

たったこれだけで全要素のアウトラインを確認できます。

これで一目瞭然です。

2. JavaScriptで見つける方法

ブラウザのデベロッパーツールのConsole機能を使います。
使用するコードは以下。

$$("*").forEach(v => v.style.outline = '1px solid magenta');

結果は同じですがこちらの方が簡単ですね。

まとめ

今回はデザイン崩れの見つけ方をCSSとJavaScriptの2通りで紹介しました。
どちらも同じ結果ですが、JavaScriptの方が使い勝手良いのでそちらをお勧めします。
座学ではなかなか教えてくれない内容ですが、現場仕事ではものすごく重宝する小技です。ぜひご活用ください。