概要
CSSプロパティ｢visibility｣は、要素の表示、非表示を指定することができます。また非表示にした場合は、要素が見えなくなるだけで、領域そのものは残っています。
<p>１行目です</p>
<p class="hidden">2行目です</p>
<p>3行目です</p>
<p>4行目です</p>
<style>
p {
border: 1px solid #000;
}
.hidden {
visibility: hidden;
}
</style>指定方法と値
以下のように指定します。
visibility: 表示方法;入れられる値はこちらです。
| 値 | 説明 |
|---|---|
| visible | ボックスを表示します |
| hidden | ボックスを非表示にします。要素の幅はそのまま確保されます |
| collapse | tableの行や列にこの値を指定すると、その部分を詰めるか非表示になります |
displayプロパティとの違い
要素の非表示を指定できるプロパティとして display があります。このプロパティに｢none｣ を指定すると同じように非表示にすることができますが、その違いを確認しておきましょう。
visibility: hidden ・・・非表示にしても領域は残る
display: none ・・・非表示にすると領域ごとなくなるどちらも、ボタンを押すと２つ目の要素が非表示になるサンプルです。実際にどうゆう挙動になるのか確認してみてください。
<button class="btn-hidden" onclick="document.getElementById('hidden').style.visibility='hidden'">visibility要素の2つ目を非表示にします。</button>
<ul>
<li>visibility要素</li>
<li id="hidden">visibility要素</li>
<li>visibility要素</li>
</ul>
<button class="btn-hidden" onclick="document.getElementById('none').style.display='none'">display要素の２つ目を非表示にします。</button>
<ul>
<li>display要素</li>
<li id="none">display要素</li>
<li>display要素</li>
</ul>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
background-color: #dee;
margin: 5px;
}
</style>使用例
クイズの答えをあらかじめ非表示にしておき、ボタンを押すと表示されるサンプルです。
<p>問題</p>
<p>１万円札に描かれている人物は？</p>
<ul>
<li>夏目漱石</li>
<li>樋口一葉</li>
<li>福沢諭吉</li>
</ul>
<button onclick="document.getElementById('visible').style.visibility='visible'">正解をみる</button>
<p id="visible" class="hidden">福沢諭吉</p>
<style>
.hidden {
visibility: hidden;
}
</style>