サイトアイコン WEB-Geek-Site.com

visibility |CSSリファレンス


[ visibility ]

ボックスの表示(visible)・非表示(hidden)を指定。

非表示にした場合でもボックス自体が無くなってしまうわけではないので、表示・非表示を切り替えてもページのレイアウトは変わりません。
ボックス自体を無くしてしまいたい場合には、displayプロパティでnoneを指定。

テーブルの行や列にvisibility:collapseを指定した場合の表示は、ブラウザの種類やバージョンによって若干異なるので注意。


■値
visible ボックスを表示。
hidden ボックスを非表示。
collapse テーブルの行や列にこの値を指定すると、その部分を詰めて表示。


■使用例/CSS

.sample1 {visibility:hidden;}
.sample2 {visibility:visible;}
.sample3 {visibility:collapse;}

■見本

↓ 左の画像にvisibility:hidden、右の画像にvisibility:visibleを適用

↓ 元のテーブル

トマト(売り切れ) キャロット(売り切れ) キャベツ(売り切れ)
スイカ(売り切れ) パプリカ レタス

 

↓ 一部のセルにvisibility:collapseを適用

トマト(売り切れ) キャロット(売り切れ) キャベツ(売り切れ)
スイカ(売り切れ) パプリカ レタス
モバイルバージョンを終了