CSSデバッグ術：ボーダー（境界線）を使ってレイアウトの問題を高速に発見する方法

CSSでシンプルな記事ページ以上の複雑なWebサイトレイアウトをスタイリングすると、あっという間にコードが散らかってしまうことがあります。その結果、さまざまなレイアウトの問題が発生しがちです。

CSSでよく発生する代表的なレイアウトの問題には、次のようなものがあります。

• 要素同士の重なり（多くの場合はオーバーフローが原因）
• 要素の崩れ・潰れ（多くの場合はマージンが原因）
• 余分な空白（原因はさまざま）

ユニバーサルセレクタ「*」で全要素にボーダーを付ける

レイアウトの問題を即座に視覚的に把握したいときは、CSSのユニバーサルセレクタ「*」を使って、すべてのHTML要素にボーダー（境界線）を追加するのが効果的です。

スタイルシートの先頭に以下のコードを追加してみてください。

* { 
    border: 1px solid red; 
}

実際に試してみた結果

私自身のサイトでもこの方法を試したところ、レイアウトに修正が必要な箇所がすぐに判明しました。赤いボーダーが各要素の範囲を可視化してくれるため、どの部分に余計な余白があるのか、どこで要素が重なっているのかが一目瞭然になります。

仮に現時点でレイアウトに見た目上の問題がなくても、このボーダーテクニックは将来トラブルにつながりそうな箇所（意図しない余白や不自然な要素サイズなど）を事前に発見するのに役立ちます。

補足：outlineプロパティという選択肢

同じことはborderプロパティの代わりにoutlineプロパティでも実現できます。

* { 
    outline: 1px solid red; 
}

outlineは要素のスペースを占有しないため、ボーダーを付けたことでレイアウト自体がズレてしまう心配がありません。より正確な状態を確認したい場合は、こちらの方法をおすすめします。