リスト

CSS

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

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

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

で横並びにする人、多いかと思います。 これは正しいのですが、 困ったことに親要素のulタグが高さ0になってしまうこと、 ありませんか? ▼ 個々のリスト要素は高さがあるのに ▼ 親要素のulタグの高さが0になってしまう これは非常によくあるあるCSSで、マークアップをやっていく段階で 必ずといっても過言でないほど、当たる壁です。 【回避策 その1】親要素にoverflowを指定する 手っ取り早く高さを出すには、親要素のulタグに、overflow: hidden;を 指定してあげます。

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

【回避策 その2】:before, :after を利用する ulにoverflow: hidden;を使用してもよいのですが、 例えばマウスオーバーで子要素、孫要素のサブメニューが開くような場合、 overflow: hidden;により表示されなくなってしまう場合があります。 そうなると回避策 その1は利用できなくなるため、別の回避策として 疑似要素を利用します。 具体的には次のサンプルコードの通りです。

ul本体には何も指定せず、 ul: before と、ul: after に 空の要素を置いてあげます。 空の要素の指定方法にも様々ありますが、ここでは、 ・中身が空(content: “”;)で、 ・回り込みを解除(clear: both;)し、 ・ブロック要素、つまり横幅100%(display: block;)の 要素を空要素としています。 そうすることで、なんということでしょう […]