visibility

Updated 2013.11.06 / Published 2007.02.02

visibilityプロパティは要素が生成するボックスの表示・非表示を指定します。ただし、要素を非表示に指定しても、その要素が生成するボックス分のスペースは残り、レイアウトにも影響します。要素の生成するボックスのスペースを前後に詰めて何もないものとしたい場合には、display : none ; を指定します。visibilityプロパティは、JavaScript と組み合わせて、ポインティングデバイスのボタンの押下に応じて画像を出現させるなどのダイナミックな演出をするのに使用されています。

値

visible
hidden
collapse
inherit

初期値

visible

適用対象

すべての要素

継承

する

メディア

visual

visibilityプロパティの値

visibilityプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

visible: 要素が生成するボックスを可視にする
hidden: 要素が生成するボックスを不可視（透明）にする
collapse: 表の行・行グループ・列・列グループ要素に指定した場合は行や列が隠され、表を詰めて表示する（display : none ;が指定されたような振る舞い）。なお表要素以外に指定すると、"hidden" と同じ効果をする

"collapse" は表の行・行グループ要素（tr要素, thead要素, tfoot要素, tbody要素）、列・列グループ要素（col要素, colgroup要素）に対して指定し、指定された範囲を取り除くことで、表全体を詰めて表示するために使用します。なお、表要素以外に "collapse" の値が指定された場合は、"hidden" が指定された場合とと同じように要素が生成するボックスを不可視（透明）にします。

visibilityプロパティの実装状況

IE: ◯：IE8より"collapse" の値をサポート
Firefox: ◯
Opera: ◯："collapse" の値が表の行・行グループ・列・列グループ要素に用いられても"hidden"と同じ振る舞いをする
Chrome: ◯："collapse" の値が表の行・行グループ・列・列グループ要素に用いられても"hidden"と同じ振る舞いをする
Safari: ◯："collapse" の値が表の行・行グループ・列・列グループ要素に用いられても"hidden"と同じ振る舞いをする
iOS: ◯："collapse" の値が表の行・行グループ・列・列グループ要素に用いられても"hidden"と同じ振る舞いをする
Android: ◯："collapse" の値が表の行・行グループ・列・列グループ要素に用いられても"hidden"と同じ振る舞いをする

visibility : collapse ;の仕様通りの振る舞いをするのは、IE8+とFirefoxのみです。

サンプル

<table>
　<tr>
　　<td>cell 1-1</td><td>cell 1-2</td><td>cell 1-3</td>
　</tr>
　<tr style=" visibility : collapse ;">
　　<td>cell 2-1</td><td>cell 2-2</td><td>cell 2-3</td>
　</tr>
　<tr>
　　<td>cell 3-1</td><td>cell 3-2</td><td>cell 3-3</td>
　</tr>
</table>

IE8+とFirefox以外では、中央列が非表示にはなりますが表示域が確保されたままの"hidden"のような表示になります。仕様通りの表示であれば、display : none ;が指定されたような振る舞いになります。