はじめに

コーディングしているとき、予期せぬ謎の余白ができたり、横スクロールが発生してしまうことありますよね 
例えば以下のようなときです

スマホ表示時に謎の余白がある
横スクロールが発生している

このようなとき、どこが原因なのか特定しにくいものです

この記事ではこの原因を一瞬で特定する方法をご紹介します

結論

たったこれだけ書けばOKです(色や太さはお好みでどうぞ)

* {
  outline: 2px solid blue;
}

ブラウザを確認してみると…

headerのwidthが原因だと特定できた

一瞬でわかりましたね^^

おわりに

ある程度コーディングが完成してサイトを検証しているときにこのような崩れが見つかった場合、どこが原因かすごく特定しにくく時間を消耗しがちです

しかし、今回紹介したたった1行のコードで瞬時に原因を特定できるようになるのでぜひ明日からのWEB制作に役立てていただければ幸いです