CSS

【CSS】横並びリストで高さを持たない<ul>に高さをつけよう

  • このエントリーをはてなブックマークに追加
【CSS】横並びリストで高さを持たない<ul>に高さをつけよう

グローバルナビや、メニューで、横並びリストをCSSで書くときに

で横並びにする人、多いかと思います。

これは正しいのですが、
困ったことに親要素のulタグが高さ0になってしまうこと、
ありませんか?

▼ 個々のリスト要素は高さがあるのに
リストで高さが0になってしまう

▼ 親要素のulタグの高さが0になってしまう
リストで高さが0になってしまう

これは非常によくあるあるCSSで、マークアップをやっていく段階で
必ずといっても過言でないほど、当たる壁です。

【回避策 その1】親要素にoverflowを指定する

手っ取り早く高さを出すには、親要素のulタグに、overflow: hidden;を
指定してあげます。

本来、overflow: hidden; は、
「要素(ボックス)からはみ出たコンテンツをカットして表示しない」
という意味があるのですが、このような回り込みに適用すると、親要素に高さを与えることができます。

親要素にoverflowを指定する

「【回避策 その1】親要素にoverflowを指定する」の場合のCSSソースコード例

【回避策 その2】:before, :after を利用する

ulにoverflow: hidden;を使用してもよいのですが、
例えばマウスオーバーで子要素、孫要素のサブメニューが開くような場合、
overflow: hidden;により表示されなくなってしまう場合があります。

そうなると回避策 その1は利用できなくなるため、別の回避策として
疑似要素を利用します。

具体的には次のサンプルコードの通りです。

ul本体には何も指定せず、
ul: before と、ul: after に
空の要素を置いてあげます。

空の要素の指定方法にも様々ありますが、ここでは、
・中身が空(content: “”;)で、
・回り込みを解除(clear: both;)し、
・ブロック要素、つまり横幅100%(display: block;)の
要素を空要素としています。

そうすることで、なんということでしょう

overflowを指定することなく、高さを持たせることができました。

  • このエントリーをはてなブックマークに追加

Leave a Reply