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プロパティ
| 要素の表示や配置方法 | |
|---|---|
| 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に従って要素を配置する際に、右辺からの距離を指定する |
| vertical-align | ボックス内のインライン要素に縦位置を揃える基準を指定する |
| visibility | 要素の領域を残したまま表示・非表示を指定する |
| z-index | 要素の重なり順序を指定する |
| zoom | 要素の表示倍率（拡大・縮小）を指定する |