エフェクト
visibility
表示・非表示を設定します
value | description |
---|---|
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 があったスペースは確保されています。
これはつまり、要素が完全に削除されるわけではなく、「スペースは確保されるが描画はされない」状態であると言えます。