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

適用対象 全ての要素
継承 しない

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プロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left 位置指定で配置された要素の左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align ボックス内のインライン要素に縦位置を揃える基準を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する