Embedded Files
visibility属性
visibility属性
オブジェクトの表示・非表示（隠す）を設定
JavaScriptと合わせて使うことでとても有効なスタイル。
hidden：非表示
visible：表示
＊display：none 非表示
非表示（隠す）
ｾﾚｸﾀ{
visibility: hidden;
}
【変更前（スタイル非付加）】
【変更後（スタイル付加）】
HELLO
ソース↓
<head>
<script>
img{
visibility: hidden;
}
</script>
</head>
<body>
<img src="app.jpg">
<br>
HELLO
</body>
（右欄には非表示をとりあげました）
表示させる
ｾﾚｸﾀ{
visibility: visible;
}
JavaScriptで表示の切り替えに
使われることが多いみたい
hidden を使っていなければ、
visibleを使うことは、無いと思う。
何も指定しなければvisible状態
（表示されてる）だからね。
りんごの画像が消えました。
→
消えたというより、
「見えなくなっている」という状態。
なのでHELLOは同じ場所に表示されてます。
今回は<br>タグで改行してあります。
HELLO
ソース↓
<body>
<img src="app.jpg">
<br>
HELLO
</body>
その他の非表示方法
ｾﾚｸﾀ{
display: none;
}
上段の『visibility』のように、
オブジェクトを非表示にする
もう１つのスタイル。
違いは、右欄の例と解説を読んで
ね。
【変更前（スタイル非付加）】
【変更後（スタイル付加）】
HELLO
ソース↓
<head>
<script>
img{
display: none;
}
</script>
</head>
<body>
<img src="app.jpg">
<br>
HELLO
</body>
HELLO
ソース↓
<body>
<img src="app.jpg">
<br>
HELLO
</body>
りんごの画像が消えました。
→
HELLOは画像があった場所に
繰り上がって表示されてます。
今回も<br>タグで改行してあります。
=メモ=
visibilityもdisplay: noneもCSS で指定しただけでは、
指定した要素が単に「見える」か「見えない」というだけ。
これを JavaScript で制御すると・・・
<html>
<head>
<script language='JavaScript'>
function showLAYER(idName){
document.getElementById(idName).style.visibility
= 'visible'
}
</script>
</head>
<body>
<a href="javascript:showLAYER('test0')">
クリックすると隠してる部分が出てくるよ</a>
<!--↓このレイヤ－が現れる-->
<div id = "test0"
style="font-size : 24pt;
visibility : hidden;
/* 最初は ↑hidden で見えなくなってる */
">
ほらね
</div>
<!--↑このレイヤ－が現れる-->
</body>
</html>
クリックすると隠してる部分が
出てくるよ
クリックすると↓
クリックすると隠してる部分が
出てくるよ
ほらね
↑ クリックすると、ソース上では記述されていた
けど、表示されていなかった『ほらね』が、
表示されます。
JavaScriptがこのサイトでは使えないので
上の例は、ブラウザ上で表示されるように
作ってあります。
左欄のソースをコピーして
試してみて下さい。
Page updated
Google Sites
Report abuse