はじめに
Webサイトやブログのコーディングをしている際、意図せず要素が画面の横幅からはみ出してしまい、不要な横スクロールが発生してしまうことがあります。
どの要素がはみ出しているのかを目視だけで探すのは非常に大変です。
そこで、全ての要素に赤い枠線を適用することで、どこからはみ出しているかを視覚的に特定しやすくします。
この記事では、この方法について説明します。
完成イメージ
実装手順
以下のコードをstyle.cssに追加します。
* {
outline: 1px solid #ff0000 !important;
}参考：HTMLタグの閉じ忘れも合わせてチェックする方法
要素のはみ出しだけでなく、HTMLタグの閉じ忘れや記述ミスが原因でレイアウトが崩れることも少なくありません。
Chrome拡張機能「HTML Tag Error Checker」を導入すると、HTMLタグの閉じ忘れをチェックでき便利です。
コーディングミスを検知できるため、あわせて活用すると効率よくデバッグを行えます。
さいごに
今回紹介した方法を使えば、画面からはみ出している要素を視覚的にすばやく特定し、レイアウト崩れの原因をスムーズに解決することができます。
ぜひ日々のコーディングやWebサイトのデバッグに活用してみてください。
