【CSS】DOM要素の非表示に関するTips

Categories:CSS

CSSには、DOM要素を非表示にする方法がいくつかあります。ここではその方法とそれぞれの違いをTipsとしてまとめます。

display / visibility / opacity

はじめにまとめてしまいますが、DOMの非表示のために用いることができるCSSのプロパティはdisplay / visibility / opacityの3つです。

それぞれは、以下のように実装することでDOMの非表示を実現することができます。

display: none;

visibility: hidden;

opacity: 0

こうした実装によって見た目上は何もないように見えるようになります。では、これら3つの方法の違いは何なのでしょうか?

ここでポイントとなるのが「領域を確保するかどうか」「クリックイベントを許容するかどうか」の2点です。

領域を確保するかどうか

領域の確保とは、非表示になっている部分がそのDOMのエリアだと見なされるかどうか、ということです。先に挙げた3つの中では、display: noneのみが領域の確保を行いません。

つまり、visibility: hiddenとopacity: 0に関しては非表示であっても、そこに対するマウスオーバーのイベントなどを受け付けることができます。

クリックイベントを許容するかどうか

クリックイベント、すなわちその領域をマウスでクリックした時のイベント発火を許容するかどうかという点にも、3つの違いがあります。

まず、クリックイベントを発火させるにはそのDOMの領域が確保されている必要があるので、display: noneは原理的にクリックイベントを許容できません(領域を確保しないため)。

また、visibility: hiddenについても、クリックイベントを許容しないという仕様になっています。

したがって、もし非表示DOM領域ながらクリックイベントは許容したいという場合は、opacity: 0 を利用するという1択になります(そもそも、こんなケースがあるかわかりませんが)。

まとめ

今回はCSSでDOM要素を非表示にする方法と、それぞれの違いについてまとめてみました。主にこちらで知ったことそのまんまですが、参考になれば嬉しいです。またこの記事にはわかりやすい表も載っていますのでそちらもぜひご覧ください。

参考

CSS | 要素を非表示にする3つの方法

返信がありません

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です