visibility 表示(可視)／非表示(不可視)を設定

visibility:(値)
・要素の表示(可視)／非表示(不可視)を設定する。継承されない。
・非表示になっても、不可視になるだけで要素自体は存在し、その部分はスペースが確保される。だからページのレイアウトは変わらない。
・(値)
　　hidden ･･･非表示(不可視)
　　visible ･･･(初期値）表示(可視)
　　inherit ･･･親要素の値が継承される

Sample

左右に同じ画像を配置。
左の画像には
　　visibility:hidden
が設定されている。
そのため見えません。

Scriptプロパティ＜visibility＞

上の左画像を

Sample Source......................................................................>>>

<img id="img" src="../../images/cut/umeuguisu.gif"
　　 style="visibility:hidden;float:left">
<p style="width:150px;border:1px solid navy;float:left;padding:6mm">
　　左右に同じ画像を配置。<br>左の画像には<br>
　　<u>visibility:hidden</u><br>が設定されている。<br>
　　そのため見えません。</p>
<img src="../../images/cut/umeuguisu.gif" style="float:right"> 

<p>上の左画像を
　<button onclick="img.style.visibility='visible'";>見えるようにする</button>
　<button onclick="img.style.visibility='hidden'";>隠す</button>
</p>