visibility

Home>CSS>プロパティリファレンス>visibility

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

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の場合
サンプルテーブルhiddenの場合
サンプルテーブルcollapseの場合
サンプル2collapseを指定しない行

visibilityプロパティは、CSSのhover疑似クラスやJavaScriptを使って表示・非表示を切り替えたいときに使います。

関連リンク

よく読まれている記事

UpDate:2010-10-21