要素を非表示にする方法は主に３種類

簡単に画面上から要素を非表示にする方法を紹介したいと思います。

1. display:none

display:noneは要素を消すことで、画面上から要素を見えなくすることができる。
表示する際には、displayの値をnone以外に設定することで、要素を表示することができる。
要素を消すことによって他の要素が詰まり、元のレイアウトと変わる可能性があるため、注意が必要。
要素を完全に消すため、実質HTMLで書いていないのと同じ扱いになる。

2. visibility:hidden

visibility:hiddenは要素を非表示にすることで、画面上から要素を見えなくすることができる。
画面上に表示する際には、visibilityの値をvisivleに変えると表示することができる。
visibility:hiddenは要素を非表示にする一方、display:noneと違って要素を消しているわけではため、レイアウト自体が崩れることはない。
要素を非表示にするため、要素自体が完全になくなっているわけではないが、クリックはできない。

3. opacity:0

opacity:0は要素を透明にすることで、画面上から要素を見えなくすることができる。
画面上に表示する際には、opacityの値を１にすることで表示できる。
また、opacityの値は0～1の値で設定することができ、数字によって透明度を変えることができる。
（0.5を値で指定すると、要素が半透明になる）
透明になっているだけのため、画面上では見えないものの、クリックはできる。

さいごに

画面上で動きをつける、デバイスによって画面の表示の仕方を変える際ために、要素の非表示を切り替えることは数多くあります。状況によって使い分けながら適切なプロパティを使用できるようにしましょう。