CSSリファレンス
実践向けCSSリファレンス

要素の表示、非表示を設定する

CSS - visibility

概要

CSSプロパティ「visibility」は、要素の表示、非表示を指定することができます。また非表示にした場合は、要素が見えなくなるだけで、領域そのものは残っています。

<p>1行目です</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ボックスを非表示にします。要素の幅はそのまま確保されます
collapsetableの行や列にこの値を指定すると、その部分を詰めるか非表示になります

displayプロパティとの違い

要素の非表示を指定できるプロパティとして display があります。このプロパティに「none」 を指定すると同じように非表示にすることができますが、その違いを確認しておきましょう。

visibility: hidden ・・・非表示にしても領域は残る
display: none ・・・非表示にすると領域ごとなくなる

どちらも、ボタンを押すと2つ目の要素が非表示になるサンプルです。実際にどうゆう挙動になるのか確認してみてください。

<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要素の2つ目を非表示にします。</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>1万円札に描かれている人物は?</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>

仕様書

関連CSSプロパティ

閉じる