visibility

要素を不可視にしてレイアウトから除去するには、 visibility を使用する代わりに display プロパティを none に設定してください。

/* キーワード値 */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* グローバル値 */
visibility: inherit;
visibility: initial;
visibility: unset;

visibility プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

visible

要素のボックスが可視になります。

hidden

要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は visibility が visible に設定されていれば可視になります。(タブ順で操作された時などに) 要素はフォーカスを受け取ることができません。

collapse

• <table> の行、列、列グループ、行グループでは、行や列が不可視になり、 (表の列や行に display: none が適用された場合のように) 占めていた領域も除去されます。しかし、他の行や列の寸法は、不可視になった行や列のセルが存在するときのように計算されます。この値は表全体の幅や高さを強制的に再計算することなく、すばやく行や列を不可視にすることができます。
• フレックス項目では、不可視になり、占めていた領域は削除されます。
• XUL 要素では、通常は寸法に影響するその他のスタイルに関わらず、要素の寸法が常にゼロと計算されますが、マージンは有効になります。
• その他の要素では、 collapse は hidden と同じと扱われます。

要素の visibility の値に hidden を使用すると、 アクセシビリティツリーから削除されます。これは要素及びその子孫要素が読み上げ技術でアナウンスされない結果になります。

visibility の値は可視及び不可視の間で補間可能です。従って、開始または終了の値の一つが visible でない限りは、補間は行われません。値は離散的なステップとして補間され、タイミング関数の 0 と 1 間の値が、 visible に対応し、タイミング関数の他の値 (トランジションの開始点または終了点でのみ、または [0、1] の外側の y 値を有する cubic-bezier() 関数の結果として) はより近い終了点に対応します。

• 現在の一部のブラウザーでは、 visibility:collapse の対応がないか、部分的に不正確です。表の行や列以外の要素に用いた場合、誤って visibility:hidden のように扱われることがあります。
• visibility:collapse を用いた表の、折り畳まれたセルに入れ子の表があると、入れ子の表で visibility:visible が明示的に指定されていない限りは、表のレイアウトが変わる可能性があります。

visibility = 
  visible   |
  hidden    |
  collapse  

HTML

<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p>

CSS

.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

HTML

<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

CSS

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

• display