【CSS】display:noneとvisibility:hiddenの違いと非表示にする際の注意点

CSSで要素非表示にする際の主な方法としてdisplay:none;とvisibility:hidden;があると思いますが、先日コーディングしていてふとこの二つの違いを知らないなーと思ったので調べてまとめました。

あまりvisibility:hiddenの方はdisplay:noneに比べて利用する機会が少なかったため、今まで違いを知らずにいたのですが、この二つの違いを理解して使うことで様々な要素の表示・非表示に対応できると思います。

display:none;

CSSプロパティのdisplayで指定できる値の一つ。他に指定できる値は「inline」とか「block」とかなどがありますが詳しい説明をご覧になりたい方は下記のURLが参考になりますのでどうぞご覧ください。

http://www.htmq.com/style/display.shtml

display:noneは文字通りディスプレイをなしにするので指定された要素は非表示になります。ただ*DOMからは消えないのでHTMLコード上では存在していることになります。ブラウザの開発者モードで確認してもらうと、HTMLコードの中にdisplay:noneをしたものが残っていると思います。

DOM:Document Object Modelの略。

visibility:hidden;

こちらもCSSプロパティのvisibilityで指定できる値の一つ。他には「visible」、「collapse」なども指定できます。ここではhiddenの値しか説明しませんので他のvisibilityの値について知りたい方は詳細は下記URLを参考にしてください。

http://www.htmq.com/style/visibility.shtml

visibility:hiddenもdisplay:noneと同様、要素を非表示にします。DOMにもちゃんと残ります。

display:none と visibility:hiddenの違い

・要素をなくすか非表示にだけするか

両方とも要素を非表示にできるCSSプロパティですが、「非表示にするだけ」か「要素自体をなくす」かの違いがあります。

visility:hidden サンプル

「visibility:hidden」は要素を非表示にするだけなので、上記サンプルを見てもらえばわかる通り、要素がしっかりと残っていて見えなくなっているだけです。

display:none サンプル

「display:none」は要素ごと消してしまう（DOMには残りますよ）ので、上記サンプルの通り要素がつまります。ですのでdisplay:noneを使用して表示・非表示を切り替える場合はレイアウトが少し変わる場合があります。

・子孫要素の表示・非表示

visibility:hidden サンプル

また、visibility:hiddenは子孫要素を表示することができます。
上記のコードのように、親要素にvisibility:hiddenを子要素にvisibility:visibleを指定してあげると親要素だけ非表示になり、子要素は表示されたままになります。

display:none サンプル

display:noneでは親要素にdisplay:noneを指定し、子孫要素でdisplay:blockなどを指定しても表示させてあげることができません。

まとめ

今まで感覚的につかっていたdisplay:noneとvisibility:hiddenですが上記の違い、特に子孫要素の箇所は全然知らなかったので今後親要素だけ非表示にしたいみたいなところがあったときにはvisibility:hiddenを使用していこうと思います。（そんな機会があるかはわかりませんが）

では。