Index > CSS, display:none と visibility:hidden
Mon, June 1, 2009

CSS, display:none と visibility:hidden

JavaScriptなどで使用するデータをHTML中に普通に記述することがあります。 ただそれらはJavaScriptで処理するためにあって、 そのまま表示されたくはないので、非表示にしたい。 どうすればいいか?

css で非表示指定をする

display:none と visibility:hidden の二通りの記述方法があって、 ややこしい。

両方試してみると、visibility:hidden では、非表示になるものの その領域が空白のまま確保されていしまうため、今回の場合不都合。

結局、display:none で対処すると好都合ということがわかりました。

しかし、この振る舞いは、ブラウザごとにいろいろ?なんてことはないのか、 ちょっと心配だ。(試したのは、Firefox3)

javascript で削除する

本当はこれが一番確実かもしれない。 ただし、非表示にしたい該当要素をJavaScriptが発見する必要があるため そこにidなどを安易に設定できれば、全然OKなのだが、 そうしたくない場合には、話がややこしくなってくる。

 Twitter
follow me on Twitter
 Categories