目次
display:none;
- 動作
-
要素を完全に非表示にします。ページのレイアウトからも削除されるため、その要素はDOMには存在しますが、表示もされず、スペースも取りません。
- 影響
-
その要素が持つ空間や寸法が消えるため、他の要素がその空間を埋めます。イベントハンドラも発火しません。
- 使用例
-
ナビゲーションメニューのトグル、タブコンテンツの切り替えなど。
opacity:0;
- 動作
-
要素の不透明度を0にして、完全に透明にします。要素は依然としてページレイアウトに存在し、そのスペースを占め続けます。
- 影響
-
その要素が持つ空間や寸法要素は見えませんが、他の要素の上に存在する場合はクリックやホバーなどのイベントハンドラが発火します。
- 使用例
-
アニメーションのフェードイン/フェードアウト効果など。
visibility: hidden;
- 動作
-
要素を非表示にしますが、ページレイアウトには影響しません。要素はスペースを占有し続けますが、視覚的には見えません。
- 影響
-
要素は視覚的に見えませんが、イベントハンドラは発火しません。DOMには存在します。
- 使用例
-
ツールチップやポップオーバーの表示/非表示、特定の要素を一時的に隠す場合など。
まとめ
| プロパティ | プロパティ | レイアウトスペース | イベントハンドラ |
|---|---|---|---|
| display: none; | 非表示 | 占めない | 発火しない |
| opacity: 0; | 透明 | 占める | 発火する |
| visibility: hidden; | 非表示 | 占める | 発火しない |
