CSS visibility: hidden プロパティ詳解 - 要素を非表示にしつつスペースを保持する
Webデザインでは、ページ上の特定の要素を非表示にしたい場合がありますが、同時に、ページレイアウトがその影響を受けてほしくない場合があります。 このような場合に役立つのが、`visibility: hidden` プロパティです。 このプロパティは、要素を非表示にしますが、要素が本来占めていたスペースは保持されます。 まるで要素がまだ存在しているかのように動作します。
1. visibility: hidden の役割
- 要素を非表示状態に設定します。
- `display: none` とは異なり、要素を非表示にしても、ページレイアウトにおける要素の占めるスペースは保持されます。
2. visibility プロパティの値
| 値 | 説明 |
|---|---|
visible |
デフォルト値。要素は表示されます。 |
hidden |
要素は非表示になりますが、スペースは保持されます。 |
collapse |
テーブル要素に適用された場合、行または列を1つの境界線に縮小します。 その他の要素に対しては、hidden と同じ動作をします。 |
inherit |
親要素から visibility プロパティの値を継承します。 |
3. visibility: hidden と display: none の違い
visibility: hiddenは要素を非表示にしますが、要素のスペースは保持されます。display: noneは要素を非表示にし、要素のスペースも削除されるため、ページレイアウトが変更されます。visibility: hiddenの要素は、クリックなどのユーザーインタラクションイベントに応答しません。display: noneの要素は、ドキュメントフローから完全に削除されるため、いかなるイベントにも応答しません。
4. 使用シーン
- 要素を一時的に非表示にする必要があるが、後で表示するためにスペースを保持しておきたい場合。
- ドロップダウンメニューなどのインタラクティブな効果を作成し、初期状態ではメニューの内容を非表示にする場合。
- ページレイアウトをデバッグする際に、
visibility: hiddenを使用して要素を非表示にすることで、レイアウトの変化をより簡単に確認できます。
5. サンプルコード
<style>
.hidden-element {
visibility: hidden;
}
</style>
<div class="hidden-element">この要素は非表示ですが、スペースは保持されています。</div>
まとめ
visibility: hidden は、非常に便利なCSSプロパティです。 要素を非表示にしつつスペースを保持できるため、Webデザインに大きな柔軟性と制御性をもたらします。
Q&A
Q1: visibility: hidden を適用した要素の子要素も非表示になりますか？
はい、visibility: hidden を適用した要素の子要素も非表示になります。 ただし、子要素に visibility: visible を設定することで、子要素のみを表示することも可能です。
Q2: JavaScriptで visibility の値を変更できますか？
はい、JavaScriptの style プロパティを使用して visibility の値を変更できます。 例えば、要素のIDが "myElement" の場合、以下のコードで visibility を hidden に変更できます。
document.getElementById("myElement").style.visibility = "hidden";
Q3: visibility: hidden と opacity: 0 の違いは何ですか？
どちらも要素を非表示にすることができますが、opacity: 0 は要素の透明度を0にするだけで、要素自体はクリックなどのイベントに反応します。 一方、visibility: hidden は要素を完全に非表示にするため、イベントにも反応しません。