【CSS】visibility - 要素の可視・不可視
CSSのvisibilityプロパティをご紹介します。
visibility
visibilityは要素の可視・不可視を示すプロパティです。
不可視は要素の領域は適用されます。
基本構文
visibility: 値;値
一般的な値は次の通りです。
| 値 | 意味 |
|---|---|
| visible | 可視化 |
| hidden | 不可視化 |
サンプル
visible
<style>
div {
display: flex;
justify-content: center;
}
p {
flex: 1;
margin: 10px;
border: 1px solid black;
text-align: center;
}
.target {
visibility: visible;
}
</style>
<div>
<p>TEXT</p>
<p class="target">TEXT</p>
<p>TEXT</p>
</div>hidden
<style>
div {
display: flex;
justify-content: center;
}
p {
flex: 1;
margin: 10px;
border: 1px solid black;
text-align: center;
}
.target {
visibility: hidden;
}
</style>
<div>
<p>TEXT</p>
<p class="target">TEXT</p>
<p>TEXT</p>
</div>
