visibility(ビジビリティ)について

要素の表示・非表示の設定をするプロパティです。visibleはdisplay:none;の完全非表示とは違い、レイアウトスペースは残ります。

visibility(ビジビリティ)の概念図

visibleのブラウザ表示例

■CSS記述
.sample1 { visibility:visible; }
■XHTML記述
<p class="sample1">サンプル</p>

サンプル

hiddenのブラウザ表示例

■CSS記述
.sample2 { visibility:hidden; }
■XHTML記述
<p>サンプル</p>

<p class="sample2">サンプル</p>

<p >サンプル</p>

サンプル

サンプル

サンプル

visibility(ビジビリティ)の設定方法

visibility: (値);

visibility(ビジビリティ)の値

visible
要素を非表示にしますが、レイアウトスペースは残ります。
display:none;も要素を非表示にしますが、こちらは完全に消えます。
hidden
要素を表示する。