CSS ビジビリティ（可见性）

Visibility属性は、要素が可視か非表示かを指定します。

要素の可視性を指定

visibility属性を使用して、要素が可視かどうかを指定できます。この属性は以下の値のいずれかを取ることができます：

visibility: collapse;ですが、内部のテーブル要素は削除されますが、テーブルのレイアウトには影響しません。テーブル要素が通常占める空間は、その後の同級要素によって埋まります。

CSS Visibility vs Display

CSS displayとvisibility属性は見た目は同じように見えますが、実際には全く異なり、Web開発の新機能に対してよく混乱させます。

• visibility: hidden;を使用すると、要素を非表示にしますが、レイアウト内の空間は占めます。非表示のボックスの子要素の可視性が「可視」と設定されている場合、それらは可視になります。

• display: none;を使用すると、表示をオフにし、ドキュメントから完全に要素を削除します。HTMLコード上にHTMLが残っている場合でも、空間を占めません。すべての子要素の表示属性がnoneに設定されている場合でも、表示をオフにします。

Visibility属性の使用法

visibility:　visible
/*　要素は可視です。デフォルトの値　*/
visibility:　hidden
/*　要素は不可視ですが、そのための空間を確保されています　*/
visibility:　collapse
/*　table オブジェクトに対してのみ効果があり、行や列を削除できますが、テーブルのレイアウトには影響しません。この値が table 以外のオブジェクトに使用された場合、hidden として表現されます。　*/
visibility: inherit
/*　上位要素の visibility 値を継承します。　*/

Display 属性の使用方法

Display 属性の利用可能な値は多くありますが、ここではその中のいくつかのみに注目します：block、none、inline

display: none
/*　要素は不可視であり、その相当する位置を保持しません　*/
display: block
/*　ブロックレベル要素として表現されます（一般的には一つの行を独占します）　*/
display: inline
/*　行レベル要素として表現されます（一般的には一つの行を独占しません）　*/

以上から、Visibility と Display 属性はどちらも要素を隠すことができますが、違いは visibility: hidden が要素を隠す際にページ上にその要素が必要なスペースを保持すること、display: none が要素をページから削除したかのように見えることです。
また、display: block と display: inline の違いは、block 要素がページで一つの行を独占するのに対し、inline 要素は行を独占しないことです。一部のオブジェクトはデフォルトで block 要素であり、他のオブジェクトはデフォルトで inline 要素です。使用時に同じ属性の重複定義を避けるようにしてください。

Visibility または Display 属性の使用時期