CSS visibility ジェネレーター

CSS visibilityプロパティを生成。visible/hidden/collapseの違いを視覚的に理解できます。

visibility値

生成されたCSS

visibility: visible;

display: none との比較を表示

プレビュー

要素A (通常表示)

要素 A

要素B (visibility: visible)

要素 B

要素C (通常表示)

要素 C

要素Bは通常表示されています

display: none との比較

要素A (通常表示)

要素 A

要素B (display: none)

要素C (通常表示)

要素 C

display: none はスペースも削除されます

collapseを選択すると行2が折りたたまれます

visibility プロパティについて

CSSの visibility プロパティは、要素の表示/非表示を制御します。display: none とは異なり、レイアウトスペースは保持されます。