CSS3スタイル虎の巻

visibility

visibilityは、要素の表示・非表示を指定するスタイルです。

解説

非表示にしても、表示されていたエリアが空白になるだけでレイアウトは詰まりません。
レイアウトを詰めたい場合は、display:noneを使用してください。

構文

構文は以下になります。

visibility: 値;

visibilityには以下の値が指定できます。

説明
visible要素を表示する
(例)visibility:visible;
hidden要素を非表示にする
(例)visibility:hidden;

太字の値は初期値です。

サンプル

要素を表示する(デフォルト)


.sample01 {
  visibility:visible;
}

<div class="sample01">あいうえおかきくけこ</div>
あいうえおかきくけこ

要素を非表示にする


.sample02 {
  visibility:hidden;
}

<div class="sample02">あいうえおかきくけこ</div>
あいうえおかきくけこ

要素は非表示になりますが、表示スペースは詰まる事はなくそのままです。

備考

  • 表示するがデフォルト値なので、visibleの場合は特に指定不要です。

関連項目

  • display:ボックスの種類を指定する