目次
visibility
CSSの書き方
visibility:値 ;
| CSSの詳細情報 | |||||
|---|---|---|---|---|---|
| プロパティ名 | visibility | 読み方 | ビジビリティ | ||
| 初期値 | visible | 意味 | 要素の表示と非表示の切り替え | ||
| 値 | visible/hidden/collapse | ||||
| 対象 | すべての要素 | ||||
| CSSレベル | CSSレベル2 | 対応ブラウザ | Windows | MAC | |
| 継承 | しない | IE 5.0以上（※）/FF1.0/NS7.1/OP8.0 | SF/IE5.0 | ||
解説
「visibility」プロパティは、要素をブラウザに表示させたり、非表示にするスタイルシートです。
「visibility:visible;」が初期値です。
値（hidden）
「visibility:hidden;」とすると、このプロパティを指定した要素は非表示になり、ブラウザから見えなくなります。
ただし、本来表示するの必要だったボックスのスペースは確保されます。
つまり、内容は消えますが、スペースは消えません。
値（collapse）
「visibility:collapse;」は、表の一部（行や列などのセル）を非表示するのに使います。
このプロパティが指定されたセルだけが消え、他のセルや表自体は残ります。
また、「visibility:hidden;」と同じように、内容が消えても、そのスペースは確保されます。
display:none;との違い
「display」プロパティでも同じように、指定した要素を非表示にすることができます。
ただし、「display:none;」とした要素は完全に非表示化され、内容も本来のスペースも消えます。
「visibility」プロパティとの違いに注意してください。
IEは完全に対応せず
InternetExplorer5.0/5.5/6.0では「visivility:collapse;」の値に今のところ未対応のようです。
CSS/HTMLサンプル
span.letter { visibility:hidden; }
.hidden { visibility:collapse; }
SPAN要素にクラス指定で要素の非表示を指定。
また、テーブルの行列にも同じように非表示設定を サンプル
