Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

visibility

visibility は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。このプロパティは <table> の行や列を隠すこともできます。

表示制御レイアウト維持

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
visibility
1
12
1
1
18
1
collapse
1
12
1
1.3
18
1
hidden
1
12
1
1
18
1
visible
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
実装メモ
  • Chrome 62 より前では、「visibility: Collapse」は、「<tr>」、「<thead>」、「<tbody>」、および「<tfoot>」要素、フレックス項目、および Ruby 注釈に対して「hidden」と同じ効果があり、空白のギャップが残ります。 `<col>` 要素と `<colgroup>` 要素には影響しません。
  • Chrome 92 より前では、「visibility:collapse」は `<tr>`、`<thead>`、`<tbody>`、および `<tfoot>` 要素をサポートしていました。 フレックス項目とルビ注釈の場合、「非表示」と同じ効果があり、空白のギャップが残ります。 `<col>` 要素と `<colgroup>` 要素には影響しません。
  • Chrome 92 以降、`visibility:collapse` は `<tr>`、`<thead>`、`<tbody>`、`<tfoot>`、`<col>`、および `<colgroup>` 要素をサポートします。 フレックス項目とルビ注釈の場合、「非表示」と同じ効果があり、空白のギャップが残ります。
注釈 2件
実装メモ
  • Edge 79 から Edge 91 では、「visibility: Collapse」は `<tr>`、`<thead>`、`<tbody>`、および `<tfoot>` 要素をサポートします。 フレックス項目とルビ注釈の場合、「非表示」と同じ効果があり、空白のギャップが残ります。 `<col>` 要素と `<colgroup>` 要素には影響しません。
  • Edge 92 以降、`visibility:collapse` は `<tr>`、`<thead>`、`<tbody>`、`<tfoot>`、`<col>`、および `<colgroup>` 要素をサポートします。 フレックス項目とルビ注釈の場合、「非表示」と同じ効果があり、空白のギャップが残ります。
注釈 2件
実装メモ
  • `border-collapse: Collapse` が設定されている場合、Firefox は `<col>` 要素と `<colgroup>` 要素を非表示にしても境界線を非表示にしません。
  • Firefox 88 より前では、「collapse」は Ruby アノテーションではサポートされていません。
注釈 2件
実装メモ
  • Safari は「表示: 折りたたみ」を「非表示」のように扱い、白いギャップを残します。
  • Safari は、`<tr>`、`<thead>`、`<tbody>`、および `<tfoot>` でのみ折りたたみ値をサポートしますが、`<col>` および `<colgroup>` 要素ではサポートしません。
注釈 3件
実装メモ
  • Chrome Android 62 より前では、「visibility: Collapse」は、「<tr>」、「<thead>」、「<tbody>」、および「<tfoot>」要素、フレックス項目、および Ruby 注釈に対して「hidden」と同じ効果があり、空白のギャップが残ります。 `<col>` 要素と `<colgroup>` 要素には影響しません。
  • Chrome Android 92 より前では、「visibility: Collapse」は `<tr>`、`<thead>`、`<tbody>`、および `<tfoot>` 要素をサポートしていました。 フレックス項目とルビ注釈の場合、「非表示」と同じ効果があり、空白のギャップが残ります。 `<col>` 要素と `<colgroup>` 要素には影響しません。
  • Chrome Android 92 以降、`visibility:collapse` は `<tr>`、`<thead>`、`<tbody>`、`<tfoot>`、`<col>`、および `<colgroup>` 要素をサポートします。 フレックス項目とルビ注釈の場合、「非表示」と同じ効果があり、空白のギャップが残ります。
注釈 2件
実装メモ
  • iOS 上の Safari は、「表示: 折りたたみ」を「非表示」のように扱い、白いギャップを残します。
  • iOS の Safari は、`<tr>`、`<thead>`、`<tbody>`、および `<tfoot>` でのみ折りたたみ値をサポートしますが、`<col>` および `<colgroup>` 要素ではサポートしません。

基本構文

CSS 
.hidden {
  visibility: hidden;
}
.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}

ライブデモ

visibility: visible

CSS Visibility: visible demo.

プレビュー全画面表示

visibility: hidden

CSS Visibility: hidden demo.

プレビュー全画面表示

Display:none and. Comparison

CSS Display:none and. comparison demo.

プレビュー全画面表示

実務での使いどころ

  • レイアウトを維持した非表示

    要素を非表示にしつつレイアウトのジャンプを防ぎ、トランジションで滑らかに表示を切り替えます。

注意点

  • visibility: hidden の要素はクリックイベントを受け取りませんが、レイアウトスペースは占有し続けるため、意図しない空白が生じることがあります。

アクセシビリティ

  • visibility: hidden はスクリーンリーダーからもコンテンツを隠します。視覚的にのみ隠したい場合は sr-only パターンを使用してください。

参考リンク