エフェクト

visibility

表示・非表示を設定します

valuedescription
visible (default)表示する
hidden非表示にする

Demo

visible
item A
item B
item C
hidden
item A
item B
item C
<div class="wrapper">
  <div class="box">
    <code class="code">visible</code>
    <div class="list">
      <div class="item item-a">
        item A
      </div>
      <div class="item item-b">
        item B
      </div>
      <div class="item item-c">
        item C
      </div>
    </div>
  </div>
  <div class="box">
    <code class="code">hidden</code>
    <div class="list">
      <div class="item item-a">
        item A
      </div>
      <div class="item item-b item-hidden">
        item B
      </div>
      <div class="item item-c">
        item C
      </div>
    </div>
  </div>
</div>
.item-hidden {
  visibility: hidden;
}

.item-a {
  background: rgb(226, 84, 84);
}
.item-b {
  background: rgb(62, 172, 58);
}
.item-c {
  background: rgb(2, 132, 199);
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.list {
  display: flex;
}
.item {
  flex: 1;
  padding: 12px;
  margin-right: 12px;
  border-radius: 4px;
}
.code {
  font-size: 12px;
}

概要

要素を非表示にします。

非表示ですが、その要素が表示される領域は確保されます。 Demo では、itemB がhiddenになったとしても、itemB があったスペースは確保されています。 これはつまり、要素が完全に削除されるわけではなく、「スペースは確保されるが描画はされない」状態であると言えます。

関連

参照