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;]
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 | 要素の重なり順序を指定する |