visibility
Home>CSS>プロパティリファレンス>visibility
visibilityプロパティの役割
visibilityプロパティは、その領域の見た目の表示・非表示を切り替えます。
領域自体は確保されたままで、見た目にその内容を表示したり、非表示にしたりするため、レイアウト上は、変化はありません。
領域自体を削除したり確保したりするには、displayプロパティを使います。
visibilityプロパティに設定できる値
collapse | 表の行・列を詰める。 |
hidden | 非表示にする。 |
visible | 表示する。初期値。 |
collapseは、行(tr要素)・行グループ(thead要素、tfoot要素、tbody要素)または列(td要素、col要素、th要素)・列グループ(colgroup要素)に指定すると、指定した行又は列のみ非表示になります。table要素に指定すると、hiddenと同じ結果を返します。
visibilityプロパティの使い方
<table style="visibility:visible" border="1">
<tr><td>サンプルテーブル</td><td>visibleの場合</td></tr>
</table>
<table style="visibility:hidden" border="1">
<tr><td>サンプルテーブル</td><td>hiddenの場合</td></tr>
</table>
<table border="1">
<tr style="visibility:collapse"><td>サンプルテーブル</td><td>collapseの場合</td></tr>
<tr><td>サンプル2</td><td>collapseを指定しない行</td></tr>
</table>
サンプルテーブル | visibleの場合 |
サンプルテーブル | collapseの場合 |
サンプル2 | collapseを指定しない行 |
visibilityプロパティは、CSSのhover疑似クラスやJavaScriptを使って表示・非表示を切り替えたいときに使います。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-10-21