表示されないようにする


display: none 　　その要素が無い状態にする
visibility: hidden 領域は確保するが見えない状態にする

これらの用法は、指定された要素が表示されないようにします。
「display: none」を指定するとボックスそのものが生成されなくなり、
あたかもその要素が無いような状態になります。
「visibility: hidden」を指定すると、その要素の表示領域は確保されますが、
見えない状態（その要素が透明になった様な状態）になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>CSS覚書</title>
<style type="text/css">
<!--
body {
color: #000000;
background: #ffffff
}
.none {
display: none;
color: #ff6600
}
.hidden {
visibility: hidden;
color: #ff6600
}
h1 {
text-align: center;
color: #ff6600
}
-->
</style>
</herd>
<body>
<h1>表示されないようにする</h1>
<center>
<p>
この段落のすぐ下に表示されない段落がひとつ有ります。<br>
「display: none」を指定していますので<br>
その要素自体が無いような状態になっています。<br>
</p>

<p class="none">
この段落は、「display: none」を指定して表示されないようにしています。
</p>

<table border="3" cellpadding="4">
<tr class="hidden">
<th>ヘッダ</th><th>ヘッダ</th><th>ヘッダ</th>
</tr>
<tr>
<td>データ</td><td>データ</td><td>データ</td>
</tr>
<tr class="hidden">
<td>データ</td><td>データ</td><td>データ</td>
</tr>
</table>

<p class="hidden">
この段落は、「visibility: hidden」を指定して<br>
表示されないようにしています。

<p>
この段落のすぐ上に表示されない段落がひとつ有ります。<br>
「visibility: hidden」を指定していますので、<br>
表示される場合と同じ領域が確保されます。
</p>
</center>
</body>
</html>