display:noneとvisibility:hiddenの違いを確認しよう

display:noneとvisibility:hiddenはどちらも要素を非表示にするプロパティですが、実際に中で起こっていることは異なっています。似ているようで似ていない2つのcssをサンプルを見ながら確認しましょう。

displayはブロック要素の表示形式を指定する際に使用します。 例を挙げるなら、inline、inline-block、block、tableなどなど。その中の1つに、noneがあり、noneで要素を非表示にします。

visibilityは要素の表示・非表示を指定する際に使用します。表示するならvisible、非表示ならhiddenです。

タイトルの通り、display:noneもvisibility:hiddenどちらも要素を非表示にできます。何が異なっているかというと、非表示にした時の要素の扱いが違うということです。

プロパティ 内容
display:none 要素すべてを非表示にする。(領域もなくなる)
visibility:hidden 要素のみ非表示にする。(領域は存在する)

サンプルページを表示

html

<!--基本となるソース-->
<ul>
<li class="red">1.RED</li>
<li class="green">2.GREEN</li>
<li class="blue">3.BLUE</li>
<li class="yellow">4.YELLOW</li>
</ul>

<!--3つめの要素をdisplay: noneで消す-->
<ul>
<li class="red">1.RED</li>
<li class="green">2.GREEN</li>
<li class="blue none">3.BLUE</li>
<li class="yellow">4.YELLOW</li>
</ul>

<!--3つめの要素をvisibility: hiddenで消す-->
<ul>
<li class="red">1.RED</li>
<li class="green">2.GREEN</li>
<li class="blue hidden">3.BLUE</li>
<li class="yellow">4.YELLOW</li>
</ul>
css

.none {
	display: none;
}
.hidden {
	visibility: hidden;
}

要素を非表示にするケースは多いですが、領域を残して消すというケースは状況としては少ないかもしれません。ただ非表示にするのではなく、非表示かつ領域を残すケースの時はvisibilityを使うなど使い分けをしましょう。

参考
displayとvisibilityの違い – Qiita
http://qiita.com/ma_me/items/a5249693c0b21836126b

PAGE TOP