CSS:枠線が表示されない場合は要素が重なっていないか疑ってみよう！

スタイルシートを使用して要素の枠線を装飾することは良く行いますよね。
その時に、枠線が表示されない現象に遭遇することがあります。

以前紹介した現象
　→ span要素に設定した枠線が右側だけ消える現象。原因はbrだった


その一つの原因として要素が重なっていないかチェックしてみましょう。

例

正常に表示

HTML

div 要素を使用して、青枠と赤枠の二つの要素を作成します。

<div style="background-color:#ffffff;border-style:solid;border-width:3px;border-color:#0000ff;">
<br />
Element 1<br />
<br />
</div>

<div style="background-color:#ffffff;border-style:solid;border-width:3px;border-color:#ff0000;">
<br />
Element 2<br />
<br />
</div>

結果

通常の状態では、二つの div 要素は重ならず、枠線はそれぞれ表示されています。

div 要素が重なっていない場合

要素が重なることで枠線が表示されない（見えない）

HTML

上記の HTML のスタイルを修正し、一つ目の div 要素に margin:0px 0px -10px 0px; を追加し、下側に 10px 分次の要素に被せます。

<div style="background-color:#ffffff;border-style:solid;border-width:3px;border-color:#0000ff;margin:0px 0px -10px 0px;">
<br />
Element 1<br />
<br />
</div>

<div style="background-color:#ffffff;border-style:solid;border-width:3px;border-color:#ff0000;">
<br />
Element 2<br />
<br />
</div>

結果

すると、一つ目の要素の上に、二つ目の要素が重なり、一つ目の要素の下の枠線が表示されなく（見えなく）なります。

div 要素が重なっている場合

まとめ

スタイルシートで指定した枠線が表示されない場合、要素が重なっていないか疑ってみることは有意義です。

特に、ブログサービスなどを利用していて、自分が作成したスタイルシートのほかに、デフォルトで読み込まれるスタイルシートがある場合には、知らず知らずのうちに要素を重ねてしまっている可能性もあります。