要素の可視性を制御するプロパティです。display: noneと違い、要素は非表示になりますが領域（スペース）は確保されたままになります。アニメーションやトランジションと組み合わせて使用されることが多いです。
visibility: visible | hidden | collapse/* 基本的な使い方 */
.hidden-element {
visibility: hidden;
}
.visible-element {
visibility: visible;
}基本的な表示・非表示の制御
/* display: noneとの比較 */
.visibility-hidden {
visibility: hidden; /* 領域は確保される */
}
.display-none {
display: none; /* 領域も削除される */
}display: noneとの違いを明確にした比較例
/* スムーズなフェードイン・アウト */
.fade-element {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.fade-element.show {
visibility: visible;
opacity: 1;
}opacityと組み合わせたスムーズなアニメーション
/* ツールチップの実装 */
.tooltip {
position: absolute;
background: #333;
color: white;
padding: 8px 12px;
border-radius: 4px;
visibility: hidden;
opacity: 0;
transition: all 0.2s;
pointer-events: none;
}
.tooltip-trigger:hover .tooltip {
visibility: visible;
opacity: 1;
pointer-events: auto;
}実用的なツールチップの表示制御
/* レスポンシブでの表示制御 */
.desktop-only {
visibility: visible;
}
@media (max-width: 768px) {
.desktop-only {
visibility: hidden;
}
}メディアクエリと組み合わせたレスポンシブ制御
/* JavaScript連携の例 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
transition: all 0.3s;
}
.modal-overlay.active {
visibility: visible;
opacity: 1;
}モーダルオーバーレイの表示制御
visibility: hiddenは要素を非表示にしつつ領域を保持するため、レイアウトが崩れない。opacityと組み合わせることでスムーズなアニメーションが可能。display: noneはアニメーションできないが、visibility: hiddenはアニメーション可能。
visibility: hiddenでも領域は確保されるため、完全に要素を除去したい場合はdisplay: noneを使用する。pointer-eventsと組み合わせないとクリックイベントが残る場合がある。
全ブラウザ対応