CSS visibility

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 プロパティの使い方を習得することで、よりリッチなウェブページのインタラクション効果を作成することができます。

CSS visibility 可視性

一、visibility プロパティ値の詳細

二、visibility と display の違い

三、使用シーン

四、サンプルコード

五、まとめ

関連QA

Q1: visibility: hidden と opacity: 0 の違いは何ですか？

Q2: visibility プロパティは transition でアニメーションできますか？

Q3: visibility プロパティの使い道として、他にどのようなものがありますか？