Webサイトを制作していると、身に覚えのない横スクロールが発生して、右側に隙間ができてしまうことがありますよね。 この「謎の隙間」は、どこかの要素が親要素を突き破ってはみ出しているのが原因ですが、透明なボックスは目に見えないため、原因を特定するのがとても大変です。 この記事では、CSSを1行追加するだけで、はみ出している犯人を一瞬で視覚化するデバッグ手法をご紹介します。 CSSのデバッグコードを用意する まず最初に、原因を突き止めるための魔法のコードを用意します。使うのは以下の1行だけです。 CSSファイ ...
