【HTML】要素の表示・非表示を制御する「visibility」プロパティ

要素の表示/非表示指定の時に使われます。「visibility」は「display」プロパティと一見似ているように見えますが、以下の点が違います。

「visibility: hidden;」値で要素を非表示に設定しても要素自体がなくなるわけではく、ただ目に見えないだけでページのレイアウト(空間)は空白となり、そのまま存在します。

一方「display: none;」の場合は、要素が完全消えてレイアウト(空間)もなくなります。「visibility」プロパティはJavaScriptや:hover擬似クラスに使って要素を表示・非表示にすることでアニメーション効果で利用できます。

overflowプロパティの値

セレクタ { visibility: 値; }
visible	要素を表示する（初期値）
hidden	要素を非表示にする
collapse	表(テーブル)の行・列、行列グループを消すときに指定する。表以外で使った場合はhidden値と同様な効果になる。

マウスポインタの動きで画像を表示/非表示に指定する

ここにマウスポインタを当ててみてください

上記のサンプルはimg要素に「 visibilityプロパティを使ってマウスオーバーした時に画像が現れるように設定した一例です。

visibility:hidden;＆visibility:visible;

 <style>
 li.visible {
　background-color:#e3e3e3;
　border:1px dotted #aaaaaa;
　}
 img {
　position:absolute;
　visibility:hidden;
　border-style:dotted;}

 a:hover {background-color:#666;}
 a:hover img {
	visibility:visible;
	 }
 </style>

上記CSSのように、li要素を使ってリストに子要素としてimg要素を入れています。まずimg要素に「visibility:hidden;」値を指定して通常は画像を非表示にしときます。

次にhover擬似クラスで、リストにマウスオーバーした際に背景色が「#666」で、消えていた画像が見えるよう「visibility:visible;」値を指定しました。

そしてHTMLのbody要素には下記のhtmlタグを記述します。結果、上記のサンプルのような効果が出てきます。

HTML

<body>
　<ul>
　<li class="visible">
　<a href="#">ここにマウスポインタを当ててみてください　<img class="win10" src="../images/windows10main_small.jpg"></a>
　</li>
 </ul>
</body>