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

2024年8月14日 2024年8月14日山崎講師

山崎講師

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

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

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

.transparent {
    opacity: 0;
}

.hidden {
    visibility: hidden;
}

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

.hidden {
    visibility: hidden;
}

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

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。