ウェブランサー

visibility - 要素の表示・非表示を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素
継承 しない

visibilityプロパティは、要素の表示・非表示を指定する際に使用します。非表示にした場合でも、要素の領域は確保されるのでレイアウトが崩れる事はありません。

visibilityに与えられる値

visibility: visible;
指定された要素を表示します。
visibility: hidden;
指定された要素を非表示にします。
visibility: collapse;
テーブル(表)の行や列にこの値を指定すると、その部分を詰めて表示します。

visibilityの使用サンプル

CSS
.sample01 {
 visibility: visible;
 background: #DDDDDD;
}
.sample02 {
 visibility: hidden;
 background: #DDDDDD;
}
XHTML
<div class="sample01">
sample01 [visibility: visible;]
</div>
<div class="sample02">
sample02 [visibility: hidden;]
</div>
表示確認
sample01 [visibility: visible;]
sample02 [visibility: hidden;]

visibilityに関連するCSSプロパティ

要素の表示や配置方法
alignment-adjust 要素の水平位置を揃える基準を指定する
alignment-baseline 要素の水平位置を揃える際に親要素との相対関係に基いて指定する
bottom positionに従って要素を配置する際に、底辺からの距離を指定する
clear 要素の回り込み(float)を解除する
clip 要素の回り込み(float)を解除する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left positionに従って要素を配置する際に、左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-style 要素からはみ出した内容の表示スタイルを指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right positionに従って要素を配置する際に、右辺からの距離を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する
zoom 要素の表示倍率(拡大・縮小)を指定する