CSS可視性プロパティ
例
<h2>要素を表示および非表示にします。
h2.a {
visibility: visible;
}
h2.b {
visibility: hidden;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このvisibility
プロパティは、要素を表示するかどうかを指定します。
ヒント:非表示の要素はページ上のスペースを占有します。displayプロパティを使用して 、ドキュメントレイアウトから要素を非表示にしたり削除したりします。
デフォルト値: | 見える |
---|---|
遺伝性の: | はい |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS2 |
JavaScript構文: | object .style.visibility = "hidden" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
visibility | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
CSS構文
visibility: visible|hidden|collapse|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
visible | Default value. The element is visible | |
hidden | The element is hidden (but still takes up space) | |
collapse | Only for table rows (<tr>), row groups (<tbody>), columns (<col>),
column groups (<colgroup>). This value removes a row or column,
but it does not affect the table layout. The space taken up by the row or column
will be available for other content. If collapse is used on other elements, it renders as "hidden" |
|
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
この例は、テーブル要素を折りたたむ方法を示しています。
tr.collapse {
visibility: collapse;
}
関連ページ
CSSチュートリアル:CSSの表示と可視性
HTML DOMリファレンス:可視性プロパティ