visibilityプロパティは、ボックスの表示（visible）・非表示（hidden）を指定する際に使用します。
非表示にした場合にも、ボックス自体が無くなってしまうわけではなく、表示・非表示を切り替えてもページのレイアウトは変わりません。
ボックス自体を無くしてしまいたい場合には、displayプロパティでnoneを指定します。
テーブル（表）の行や列にvisibility:collapseを指定した場合の表示は、ブラウザの種類やバージョンによって若干異なるので注意してください。
■値
- visible
- ボックスを表示します。
- hidden
- ボックスを非表示にします。
- collapse
- テーブル（表）の行や列にこの値を指定すると、その部分を詰めて表示します。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
.sample1 {visibility:hidden;}
.sample2 {visibility:visible;}
.sample3 {visibility:collapse;}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<h3>左の画像にvisibility:hidden、右の画像にvisibility:visibleを適用</h3>
<p>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/kaeru.gif” class=”sample1″>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/kaeru.gif” class=”sample2″>
</p>
<h3>一部のセルにvisibility:collapseを適用</h3>
<table border=”1″>
<tr class=”sample3″>
<td>しゃこ（売り切れ）</td>
<td>えび（売り切れ）</td>
<td>こはだ（売り切れ）</td>
</tr>
<tr>
<td class=”sample3″>いくら（売り切れ）</td>
<td>うに</td>
<td>とろ</td>
</tr>
</table>
</body>
</html>
ブラウザ上の表示
左の画像にvisibility:hidden、右の画像にvisibility:visibleを適用
一部のセルにvisibility:collapseを適用
| しゃこ（売り切れ） | えび（売り切れ） | こはだ（売り切れ） |
| いくら（売り切れ） | うに | とろ |
■関連項目
overflow-x …… はみ出た内容の表示方法を指定する（IE独自の仕様）
overflow-y …… はみ出た内容の表示方法を指定する（IE独自の仕様）
position …… ボックスの配置方法（基準位置）を指定する
top …… 上からの配置位置（距離）を指定する
bottom …… 下からの配置位置（距離）を指定する
left …… 左からの配置位置（距離）を指定する
right …… 右からの配置位置（距離）を指定する
display …… 要素の表示形式（ブロック・インライン・フレックス等）を指定する
float …… 左または右に寄せて配置する
clear …… 回り込みを解除する
z-index …… 重なりの順序を指定する
visibility …… ボックスの表示・非表示を指定する
clip …… ボックスを切り抜き表示（クリッピング）する
direction …… 文字表記の方向（左右）を指定する
unicode-bidi …… Unicodeの文字表記の方向を上書きする
writing-mode …… 文字表記の方向（縦横）を指定する（IE独自の仕様）
