CSSで要素を消したい場合、幾つかの方法があります。
主なものはvisibility: hidden; , display:none; , opacity: 0; があります。
それぞれの違いと用途は下記になります。
１ visibility: hidden;
特徴: スペースは確保されたまま、要素の表示を非表示にします。非表示になりま
すが、他の要素の配置に影響を与えません。
用途: 要素を一時的に非表示にして、後で表示することができる場合に使用されます。
例えば、ドロップダウンメニューやモーダルの表示/非表示に利用されます。
２ display: none;
特徴: 要素を完全に非表示にし、スペースも確保されません。要素がレイアウトから除外
されます。
用途: 要素を完全に非表示にしたい場合に使用されます。例えば、ページロード時に非表
示の要素を表示するためにJavaScriptで制御する場合などに利用されます。
３ opacity: 0;:
特徴: 要素は表示されたままですが、透明になります。要素の透明度が設定され、見えな
いようになります。
用途: 要素を透明にし、レイアウトに影響を与えたくない場合に使用されます。例えば、
アニメーションやフェード効果を実装する際に利用されます。
今までは display:noneを使用するケースが多かったのですが、用途によってはvisibility: hidden; や opacity: 0;の方が良さそうです。比較することで曖昧になっていた類似のプロパティを整理することができました。
