CSS visibility 可視性
この記事では、CSS の visibility プロパティについて詳しく解説し、要素の可視性を制御する方法と、display プロパティとの比較分析を行います。
一、visibility プロパティ値の詳細
visibility プロパティは、要素を表示するか非表示にするかを制御します。以下の値を取ることができます。
- visible: 要素はデフォルトで表示されます。
- hidden: 要素は非表示になりますが、要素が本来占有するスペースはそのまま残ります。レイアウトには影響しません。
- collapse: 主にテーブル要素に使用され、行または列を非表示にし、周囲の要素を調整してスペースを埋めます。他の要素に対しては、
hiddenと同じ効果があります。 - inherit: 親要素から
visibilityプロパティの値を継承します。
二、visibility と display の違い
visibility と display はどちらも要素の表示状態を制御しますが、重要な違いがあります。
visibility: hiddenは要素を非表示にしますが、要素が本来占有するスペースはそのまま残ります。ページのレイアウトには影響しません。display: noneは要素を非表示にし、要素が本来占有するスペースもなくなります。ページのレイアウトに影響します。
| 特性 | visibility: hidden | display: none |
|---|---|---|
| 表示/非表示 | 非表示 | 非表示 |
| スペースの占有 | 占有する | 占有しない |
| レイアウトへの影響 | 影響しない | 影響する |
三、使用シーン
visibility プロパティは、以下のような場合に使用できます。
- 要素を非表示にしつつレイアウトを保持する場合: 例えば、条件に応じてコンテンツの一部を表示/非表示にする場合、スペースを保持したままにすることができます。
- ドロップダウンメニューの作成: デフォルトではドロップダウンメニューを非表示にし、マウスホバー時に表示するようにできます。
- アニメーション効果:
transitionプロパティと組み合わせて、要素のフェードイン/フェードアウト効果を実現できます。
四、サンプルコード
<style>
/* 要素を非表示にしつつスペースを保持 */
.hidden-element {
visibility: hidden;
}
/* マウスホバー時にドロップダウンメニューを表示 */
.dropdown:hover .dropdown-content {
visibility: visible;
}
/* フェードイン/フェードアウト効果 */
.fade-in {
visibility: visible;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.fade-out {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.5s, opacity 0.5s ease-in-out;
}
</style>
五、まとめ
visibility プロパティは、要素の可視性を柔軟に制御する方法を提供します。display プロパティとは異なり、要素のスペースを保持するため、ページレイアウトが崩れるのを防ぐことができます。visibility プロパティの使い方を習得することで、よりリッチなウェブページのインタラクション効果を作成することができます。
関連QA
Q1: visibility: hidden と opacity: 0 の違いは何ですか？
A1: どちらも要素を非表示にしますが、visibility: hidden は要素が本来占有するスペースはそのまま残ります。一方、opacity: 0 は要素の透明度を0にするだけで、要素はスペースを占有したままになります。また、opacity: 0 の要素はマウスイベントに反応しますが、visibility: hidden の要素は反応しません。
Q2: visibility プロパティは transition でアニメーションできますか？
A2: はい、visibility プロパティは transition プロパティと組み合わせてアニメーションできます。ただし、visibility: visible から visibility: hidden への遷移はアニメーションされません。visibility: hidden から visibility: visible への遷移のみアニメーションされます。
Q3: visibility プロパティの使い道として、他にどのようなものがありますか？
A3: 以下は、visibility プロパティのその他の使用例です。
- 印刷レイアウトの制御: 画面では表示したくない要素を印刷時にのみ表示する。
- 画像の遅延読み込み: 初期表示時には画像を非表示にし、ページの読み込みが完了した後表示する。