HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


要素の表示と非表示

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要素にクラス指定で要素の非表示を指定。また、テーブルの行列にも同じように非表示設定を サンプル