opacity: 0;、visibility: hidden;、display: none; の使い分け

opacity: 0;、visibility: hidden;、およびdisplay: none;は、いずれもHTML要素を見えなくするためのCSSプロパティですが、それぞれ異なる動作をします。

基本はこの順番でHTML要素の存在が無くなる（希薄になる）と考えてください。

1. opacity: 0;

• 概要: 要素の透明度を設定します。opacity: 0;は、要素を完全に透明にし、目に見えなくしますが、要素自体はDOM上に存在し、レイアウトにも影響を与えます。
• 特徴:
  • 要素は画面上には表示されませんが、スペースは保持されます。
  • ユーザーがマウスを使って要素と対話（クリックなど）できます。
• 使用例:

.transparent {
    opacity: 0;
}

1. visibility: hidden;

• 概要: 要素を非表示にしますが、要素が占有しているスペースはそのまま残ります。
• 特徴:
  • 要素は画面上に表示されませんが、レイアウト上には存在し、スペースは保持されます。
  • ユーザーは要素と対話（クリックなど）できません。
• 使用例:

.hidden {
    visibility: hidden;
}

1. display: none;

• 概要: 要素を完全に非表示にし、要素が占有しているスペースも取り除きます。ページレイアウトからも要素は完全に消えます。
• 特徴:
  • 要素は画面上に表示されず、レイアウトにも影響を与えません。
  • DOMには残りますが、他の要素のレイアウトには影響しません。
  • ユーザーは要素と対話（クリックなど）できません。
• 使用例:

.hidden {
    visibility: hidden;
}

• opacity: 0;は要素を透明にするだけで、レイアウトに影響を与えません。
• visibility: hidden;は要素を非表示にしますが、レイアウトにスペースは保持されます。
• display: none;は要素を完全に隠し、レイアウトからも要素が消えます。

この違いを理解することで、要素の非表示に対してどのプロパティを使用するべきかを適切に選択できます。