CSS の visibility プロパティは、文書のレイアウトに影響を与えずに要素を可視にしたり不可視にしたりすることができます (つまり、可視かどうかにかかわらず、要素のための領域が作成されます)。このプロパティは <table> の行や列を隠すこともできます。

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

構文

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

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

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

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

構文

visible | hidden | collapse

補間

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

基本的な例

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;
}

アクセシビリティの考慮事項

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

メモ

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

仕様書

仕様書 状態 備考
CSS Flexible Box Layout Module
visibility の定義
勧告候補 Defines the collapse value as it applies to flex items.
CSS Basic Box Model
visibility の定義
草案 変更なし。
CSS Transitions
visibility の定義
草案 visibility をアニメーション可能として定義。
CSS Level 2 (Revision 1)
visibility の定義
勧告 初回定義。

初期値visible
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類visibility
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112141 241
collapse623 412 あり5 あり あり6 あり7 8
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応118 あり461 あり
collapse なし あり3 4 あり あり5 あり6 あり7 8 あり

1. Internet Explorer doesn't support visibility: initial.

2. Up to Internet Explorer 7, descendants of hidden elements will still be invisible even if they have visibility set to visible.

3. Chrome treats visibility: collapse like hidden, leaving a white gap.

4. Chrome supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.

5. Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.

6. In Opera, visibility: collapse works on table elements, but doesn't hide a <tfoot> if it is adjacent to a visible <tbody>.

7. Safari treats visibility: collapse like hidden, leaving a white gap.

8. Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.