【CSS入門】visibilityで要素を消そう【display:noneとは違う】

この記事ではCSSのvisibilityプロパティについて解説します。

visibilityとは？

要素の表示・非表示を指定します。

visibilityの使い方

visibilityに指定できる値は以下の通りです。

visibility: visible;

visibilityの初期値がこれです。

要素を表示します。

visibility: hidden;

要素を非表示にします。

HTML

<div class="BOX-A">BOX-A</div>
<div class="BOX-B">BOX-B</div>
<div class="BOX-C">BOX-C</div>

CSS

.BOX-A,
.BOX-B,
.BOX-C{
  width: 300px;
  height: 300px;
}

.BOX-B{
  visibility: hidden;
}

visibility: hidden;とdisplay: none;の違い

要素を非表示にすると言えばvisibility: hidden;だけではなくdisplay: none;もありますが、この2つには違いがあります。

visibility: hidden;で非表示にしても、要素は表示されないだけで領域は確保されるのでレイアウトは崩れません。そのため要素自体を無くしたい場合はdisplay:none;を指定します。

visibility: collapse;

テーブルの行または列を非表示します。

非表示になった部分は詰めた状態になります。テーブル専用の値なので、他の要素に使うとhiddenと同じ結果となってしまいます。

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の1点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。