| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {visibility: 値 } |
| 値 の形式 | visible，hidden，collapse |
| 初 期 値 | visible |
| 対応ブラウザー | C2+ / e4+ / N6+ / Fx1+ / Op4+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | する |
visibilityプロパティ は，ボックスの表示・非表示を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| visible | ボックスを普通に表示します。 （初期値） |
| hidden | ボックスを表示しません。 ただし，この要素があることによるレイアウトは変わりません。 また，visibilityプロパティ の値が visible である子孫要素は表示されます。 |
| collapse | table要素 の 構成要素の中で，tr要素，thead要素，tbody要素，tfoot要素，col要素，colgroup要素 では，非表示で折りたたみます。 それ以外の要素では，値： hidden 指定した場合と同様の効果があります 。 |
このプロパティの値： hidden で指定できるのは，ボックスの非表示のみです。 ボックスの表示領域は確保された形で表示されます。 ボックスの表示領域を確保せず， この部分を詰めて表示するには，さらに display プロパティ で値を none に設定する必要があります。
CSS2.1 までとは一部仕様が変更になっています。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css"> <!-- .vis1 { visibility: visible; background-color: #cc9999; } .vis2 { visibility: hidden; } .vis3 { visibility: collapse; } .vis4 { visibility: hidden; display: none; } --> </style> |
| HTML <body> ～ </body> |
<h5><b>div要素</b> （ブロック）</h5> <hr> <div class="vis1">表示１</div> <hr> <div class="vis2">非表示２</div> <hr> <div class="vis3">非表示３</div> <hr> <div class="vis4">非表示４</div> <hr> <div>表示５</div> <hr> <h5><b>span要素</b> （インライン）</h5> <div> [ <span class="vis1">表示１</span> | <span class="vis2">非表示２</span> | <span class="vis3">非表示３</span> | <span class="vis4">非表示４</span> | <span>表示５</span> ] </div> |
| ブラウザー 表示例 |
|---|
div要素 （ブロック）表示１
非表示２
非表示３
非表示４
表示５
span要素 （インライン）
[ 表示１
| 非表示２
| 非表示３
| 非表示４
| 表示５ ]
|
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
table.sample { border: 1px solid #006666; }
table.sample td { border: 1px solid #006666; }
.vis1 { visibility: visible; background-color: #cc9999; }
.vis2 { visibility: hidden; }
.vis3 { visibility: collapse; }
.vis4 { visibility: hidden; display: none; }
-->
</style> |
| HTML <body> ～ </body> |
<table class="sample" border="1">
<caption style="width:28em;">テーブルで一部の <b>tr要素</b>，
<b>td要素</b>に <b>visibility: collapse</b> を適用</caption>
<tr class="vis1">
<td>表示１１</td><td>表示１２</td>
<td>表示１３</td><td>表示１４</td><td>表示１５</td>
</tr>
<tr class="vis2">
<td>非表示２１</td><td>非表示２２</td>
<td>非表示２３</td><td>非表示２４</td><td>非表示２５</td>
</tr>
<tr class="vis3">
<td>非表示３１</td><td>非表示３２</td>
<td>非表示３３</td><td>非表示３４</td><td>非表示３５</td>
</tr>
<tr class="vis4">
<td>非表示４１</td><td>非表示４２</td>
<td>非表示４３</td><td>非表示４４</td><td>非表示４５</td>
</tr>
<tr>
<td class="vis1">表示５１</td><td class="vis2">非表示５２</td>
<td class="vis3">非表示５３</td><td class="vis4">非表示５４</td>
<td class="vis2"><span class="vis1">表示５５</span></td>
</tr>
</table> |
| ブラウザー 表示例 | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
第３行は visibilityプロパティ の値が collapse であるため，全く表示されません。
第４行や第５行４列は visibilityプロパティ の値が hidden で，かつ， display プロパティ の値が none であるため， この行やセルは表示されずに，次の行やセルの内容がそこに表示されています。
第５行５列は <td> の visibilityプロパティ の値は hidden ですが，子要素の <span> では visibilityプロパティ の値は visible ですので，この部分のみ表示されます。