visibility / display の使い分け
たまに間違って説明している人とか、テーブル行がウマく消えずに苦しんでる人を見かけるので、説明しようとするのだけど、いつも忘れているのでちゃんとまとめておく。
| CSS属性 | 効果 |
|---|---|
| display:none | エレメントが表示エリアから消える。DOMとしては存在するが描画されない |
| visiblity:hidden | エレメントは描画されない。しかし表示エリアは「残る」。おおざっぱに言えば、背景色で塗りつぶした感じ |
では実例をお見せする。
日付のところに注目。3行あります。
全部が表示されている状態
visibility : hidden でエレメントを非表示にした場合
display : none でBlock要素を非ブロック要素にした場合
ま、一目瞭然だわな。
参考エントリ
要素の表示/非表示プロパティ。表示/非表示だけだとdisplayプロパティも同じような感じですね。でも両者には違いがあって、visibilityプロパティは見えなくなるだけでスペースはなくならないんですよ。何いってるかわけわからんと思った人は、目で見た方が早いかな。
http://d.hatena.ne.jp/sandai/20100321/p1
visibilityプロパティは、要素を表示するかしないかを指定するプロパティです。
http://css-happylifezero.com/property/visibility.shtml
hiddenの指定をした場合、display: none;のように要素自体を無かったかのようにする訳ではなく、見えなくなるだけなのでレイアウトには影響します。
