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