Webサイトコーディングにおけるdisplay:noneとvisibility:hiddenの違い

Webサイト制作のコーディングにおいて、要素の表示を消したいということがしばしばある。

昨日の授業でRSS設置の際の表示項目をCSSで操作するということを行ったが、その際にdisplay:noneで不要な表示を消していた。

そこで、ふとvisibility:hiddenとの違いはなんだろうと思ったので、ここで確認しておく。

1．どちらの指定もない場合
以下、コード。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display:noneとvisibility:hiddenの違い</title>
<style>
body, div, p {
　margin: 0;
　padding: 0;
}
div {
　margin-left:10px;
　background: #CCC;
}
p {
　width: 400px;
　height: 16px;
　background: #F9C;
}
.one {
　width: 300px;
　height: 16px;
　background: #0f0;
}
</style>
</head>
<body>
<div>
<p>おはよう</p>
<p class="one">こんにちは</p>
<p>こんばんは</p>
</div>
</body>
</html>

以下、表示結果。
←クリックで拡大表示

2．display:noneを指定
以下、コード変更点。

.one {
　width: 300px;
　height: 16px;
　background: #0f0;  /* 緑 */
　display: none;
}

以下、表示結果。
←クリックで拡大表示
指定した要素の表示が消え、その分のスペースがなくなって（詰められて）いることが分かる。

以下、Firefoxでの要素の検証画面。
←クリックで拡大表示
画像ではややわかり難いが消えているタグがグレー色で表わされていることが分かる。

3．visibility:hiddenを指定
以下、コード変更点。

.one {
　width: 300px;
　height: 16px;
　background: #0f0;  /* 緑 */
　visibility: hidden;
}

以下、表示結果。
←クリックで拡大表示
指定した要素の表示は消えているが、その分のスペースは残っていることが分かる。

以下、Firefoxでの要素の検証画面。
←クリックで拡大表示
消えているタグがグレー色にはなっておらず、表示されているタグと同じように表わされていることが分かる。

以上のことから、以下のことが分かる。

display:noneはタグの領域と表示が消される。
visibility:hiddenはタグの領域は残したままで、「表示」だけを消す。

このことから、visibility:hiddenはナビでtext-indentを使わないでテキストのみを消したい場合などに向いていて、display:noneはRSSの設置で項目の存在そのものをないように見せたい場合に向いていると考えられる。