WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > visibility
visibility  表示方法 

ボックスの表示・非表示を指定する。

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

ボックス自体を無くしてしたい場合は、displayプロパティでnoneを指定。

存在が消えるわけではなく、あくまで非表示の状態になります。たJavaScriptと組み合わせて動的な表示・非表示を行ったりします。

パラメーター

visible　…ボックスを表示す。
hidden　…ボックスを非表示す。
collapse　…詰めて表示（テーブルの行・列）。表示はブラウザによります。

サンプルコード

<div style="background-color:#f0f0ff;visibility:visible;">visibility:visible;</div>
<div style="background-color:#f0f0ff;visibility:hidden;">visibility:hidden;</div>
<div style="background-color:#f0f0ff;visibility:collapse;">visibility:collapse;</div>

visibility:visible;
visibility:hidden;
visibility:collapse;

<table>
<tr><td>あ</td><td style="visibility:collapse">い</td><td>う</td></tr>
<tr style="visibility:collapse"><td>え</td><td>お</td><td>か</td></tr>
<tr><td>き</td><td>く</td><td>け</td></tr>
</table>
あいう
えおか
きくけ