要素を消すプロパティを集めてみる

HTML要素をCSSで消したいときに使用するプロパティはいくつかあります。
今回集めてみたプロパティはこちら。

display:none;
visibility:hidden;
opacity:0;

これら３つの違いについて見ていきたい。

display: none;

要素が画面に表示されず、レイアウト上でも存在しない状態になります。
つまり、その要素がまるで「消えた」ように振る舞います。

<div style="display: none;">このテキストは見えません</div>
<div>これは表示されるテキストです</div>

「このテキストは見えません」は画面に全く表示されず、「これは表示されるテキストです」は他の要素に影響されずに表示されます。

visibility: hidden;

要素が表示されませんが、レイアウト上には存在する状態です。
つまり、スペースは確保されていますが、内容が見えない状態です。

<div style="visibility: hidden;">このテキストは見えません</div>
<div>これは表示されるテキストです</div>

「このテキストは見えません」は見えませんが、その位置にスペースが確保されています。そのため、「これは表示されるテキストです」の位置が変わりません。

opacity: 0;

要素が透明になり、目には見えなくなりますが、要素自体は完全に存在しており、クリックなどのイベントも発生する状態です。

<div style="opacity: 0;">このテキストは透明です</div>
<div>これは表示されるテキストです</div>

「このテキストは透明です」は完全に透明ですが、要素自体は存在しており、スペースも確保されています。また、透明な部分をクリックすると「透明なテキスト」がクリックされたと判定されます。