Webサイトを制作していると、身に覚えのない横スクロールが発生して、
右側に隙間ができてしまうことがありますよね。
この「謎の隙間」は、どこかの要素が親要素を突き破ってはみ出しているのが原因ですが、
透明なボックスは目に見えないため、原因を特定するのがとても大変です。
この記事では、CSSを1行追加するだけで、はみ出している犯人を一瞬で視覚化するデバッグ手法をご紹介します。
CSSのデバッグコードを用意する
まず最初に、原因を突き止めるための魔法のコードを用意します。使うのは以下の1行だけです。
CSS
* { outline: 1px solid red !important; }
CSSファイル（またはデベロッパーツール）に貼り付ける
次に、このコードを適用します。WordPressのテーマの「追加CSS」に貼り付けるか、
ブラウザのデベロッパーツール（検証モード）のスタイル欄に直接入力してみてください
要素の「はみ出し」を確認する
コードを適用すると、ページ上のすべての要素に赤い枠線が表示されます。
ここで注目すべきは、ブラウザの右端です。赤い枠線が画面の外に突き出している場所があれば、そこが「謎の隙間」を作っている犯人です！
border ではなく outline を使っているため、枠線のせいでレイアウトがさらに崩れる心配もありません。
原因を特定して修正する
「赤い枠」がはみ出している場所が見つかったら、その要素の width（幅）や margin（余白）の設定を確認しましょう。
特に、幅を 100% にしている要素に左右の余白を足していたり、固定幅の大きな画像が入り込んでいたりすることが多いです。
デバッグが終わったらコードを消去する
最後に、原因が解決したら先ほど追加した outline のコードを削除します。
これで、サイトの表示は元通りになり、謎の隙間も解消されているはずです
今回は、CSSを使ってレイアウト崩れの原因を視覚化するやり方をご紹介しました。
目に見えない要素の重なりを「見える化」することは、効率的なWeb制作において非常に重要です。
やり方はとても簡単なので、もし「右側に隙間ができて困った！」というときは、ぜひこの赤い枠線のデバッグ術を試してみてください。
