visibility

概要

CSS の visibility プロパティは2つの目的を持ちます:

1. hidden 値は要素を隠しますが、それが占めていた領域はそのままにします。

2. collapse 値は表の行か列を隠します。 XUL 要素も折り畳まれます。

構文

形式文法:  visible | hidden | collapse

visibility: visible
visibility: hidden
visibility: collapse

visibility: inherit

値

visible

デフォルト値。ボックスは可視です。

hidden

ボックスは不可視です（完全な透明で、何も描かれません）。ただしレイアウトには依然影響します。この要素の子孫要素が visibility:visible であれば不可視になります（これは バージョン 7 までの IE では動作しません）。

collapse

表の行、列、列グループ、行グループでは、行や列が隠されます。それらが占めていた領域も隠されます（display: none が表の列/行に用いられたかのように折り畳まれ、見えなくなります）。しかしながら、その他の行と列の大きさの計算は依然として、折り畳まれた行や列が存在するかのように行われます。この設計は、表のどの部分からも、幅や高さの再計算なしに行や列を素早く取り除くためのものです。XUL 要素では、通常その要素の大きさに影響する他のスタイルにかまわず、要素の計算値は常にゼロになりますが、マージンは依然効果を持ちます。他の要素では、collapse は hidden と同じように扱われます。

例

p        { visibility: hidden; }    /* 段落は不可視です */
p.showme { visibility: visible; }   /* クラス showme を持つ段落は可視です */
tr.col   { visibility: collapse; }  /* 表のクラス col を持つ列は折り畳まれます */

註

いくつかのモダンブラウザでは、 visibility:collapse のサポートがないか、部分的に不正確です。多くの場合正しく扱われず、「表の行や列」以外の要素に visibility:hidden を用いたときのようになるかもしれません。

visibility:collapse を用いた表の、折り畳まれたセルに入れ子の表があると、入れ子の表で visibility:visible が明示的に指定されていない限りは、表のレイアウトが変わる可能性があります。

仕様書

ブラウザ実装状況