Webデザインにおいて、要素の表示・非表示を制御する方法はいくつかありますが、その中の一つがvisibilityプロパティです。このプロパティを活用すると、要素を非表示にしつつ、レイアウトへの影響を最小限に抑えることができます。本記事では、visibilityの基本的な使い方と、関連するdisplayやopacityとの違いについて詳しく解説します。
Contents
visibilityプロパティとは？
visibilityは、要素の表示・非表示を制御するプロパティで、要素自体はDOMに残るが、表示されなくなります。
使用例
div {
visibility: hidden; /* 要素を非表示にする */
background-color: lightblue;
}動作:
- 要素は非表示になるが、レイアウト上のスペースはそのまま保持される。
visibilityの主要な値
以下の3つがあります。
- visible
- hidden
- collapse
visible（デフォルト）
div {
visibility: visible;
}➡ 要素は通常通り表示される
hidden（非表示）
div {
visibility: hidden;
}➡ 要素は見えなくなるが、スペースは維持される
collapse（表の行や列を隠す）
tr {
visibility: collapse;
}➡ 表の行・列を非表示にし、レイアウトから削除（table要素のみ有効）
visibilityとdisplay: noneの違い
visibility: hidden; は要素を非表示にするが、スペースはそのまま残ります。一方、display: none; は要素自体を完全に削除し、レイアウトにも影響を与えます。
比較例
div.hidden {
visibility: hidden; /* 非表示だが、スペースは残る */
}
div.none {
display: none; /* 要素ごと削除される */
}| プロパティ | 要素は表示されるか？ | スペースは保持されるか？ |
|---|---|---|
visibility: visible; | ✅ 表示される | ✅ スペースあり |
visibility: hidden; | ❌ 非表示 | ✅ スペースあり |
display: none; | ❌ 非表示 | ❌ スペースなし |
- スペースを残しつつ非表示にしたい場合 →
visibility: hidden; - 要素ごと削除したい場合 →
display: none;
visibilityとopacityの違い
opacityも要素の透明度を変更できますが、visibilityとは挙動が異なります。
比較例
div.transparent {
opacity: 0; /* 完全に透明だが、要素はクリック可能 */
}| プロパティ | 要素は表示されるか？ | クリックできるか？ |
visibility: hidden; | ❌ 非表示 | ❌ クリック不可 |
opacity: 0; | ❌ 非表示（透明） | ✅ クリック可能 |
- クリックを無効化したい場合 →
visibility: hidden; - 要素は見えなくするが、動作は残したい場合 →
opacity: 0;
visibilityの活用例
アニメーションで要素をフェードイン・フェードアウト
.fade {
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.fade.show {
visibility: visible;
opacity: 1;
}➡ visibilityとopacityを組み合わせると、スムーズなアニメーションが可能。
以下のコードをHTMLのbodyタグの中に入れてみてください。
hmtl
<button onclick="toggleFade()">クリックして表示 / 非表示</button>
<div id="fadeElement" class="fade">フェードイン・アウトする要素</div>
<script>
function toggleFade() {
const element = document.getElementById('fadeElement');
element.classList.toggle('show'); // show クラスのON/OFFを切り替える
}
</script>
<style>
.fade {
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.fade.show {
visibility: visible;
opacity: 1;
}
</style>
0.5秒かけて文字が現れます。
ツールチップの表示・非表示
.tooltip {
visibility: hidden;
position: absolute;
background: black;
color: white;
padding: 5px;
}
.tooltip:hover {
visibility: visible;
}➡ ホバー時にvisibilityを変更し、ツールチップを表示。
カーソルをボタンを上にもってくるとツールチップ（マウスをホバーすると表示される、小さな説明用のポップアップ）が表示されます。
まとめ
visibilityは要素を非表示にするが、スペースは残るdisplay: none;は要素ごと削除し、スペースもなくなるopacity: 0;は要素を透明にするが、クリックや動作は可能visibility: hidden;を**opacityやtransitionと組み合わせると、滑らかなアニメーションが作れる**
visibilityを適切に活用し、より使いやすいUIをデザインしましょう！
コメント