CSSには、DOM要素を非表示にする方法がいくつかあります。ここではその方法とそれぞれの違いをTipsとしてまとめます。
Contents
display / visibility / opacity
はじめにまとめてしまいますが、DOMの非表示のために用いることができるCSSのプロパティはdisplay / visibility / opacityの３つです。
それぞれは、以下のように実装することでDOMの非表示を実現することができます。
display: none;visibility: hidden;opacity: 0こうした実装によって見た目上は何もないように見えるようになります。では、これら３つの方法の違いは何なのでしょうか？
ここでポイントとなるのが「領域を確保するかどうか」「クリックイベントを許容するかどうか」の２点です。
領域を確保するかどうか
領域の確保とは、非表示になっている部分がそのDOMのエリアだと見なされるかどうか、ということです。先に挙げた３つの中では、display: noneのみが領域の確保を行いません。
つまり、visibility: hiddenとopacity: 0に関しては非表示であっても、そこに対するマウスオーバーのイベントなどを受け付けることができます。
クリックイベントを許容するかどうか
クリックイベント、すなわちその領域をマウスでクリックした時のイベント発火を許容するかどうかという点にも、３つの違いがあります。
まず、クリックイベントを発火させるにはそのDOMの領域が確保されている必要があるので、display: noneは原理的にクリックイベントを許容できません（領域を確保しないため）。
また、visibility: hiddenについても、クリックイベントを許容しないという仕様になっています。
したがって、もし非表示DOM領域ながらクリックイベントは許容したいという場合は、opacity: 0 を利用するという１択になります（そもそも、こんなケースがあるかわかりませんが）。
まとめ
今回はCSSでDOM要素を非表示にする方法と、それぞれの違いについてまとめてみました。主にこちらで知ったことそのまんまですが、参考になれば嬉しいです。またこの記事にはわかりやすい表も載っていますのでそちらもぜひご覧ください。
