２
4.0以上６ |
表示 |
２ |
オブジェクトの表示/非表示Part2 4.0以上 |
表示/非表示についてもう１つやってみよう。
今回の命令でも働きは、あるオブジェクト（文字や画像）を表示させるか表示させないかということを指定するんだ。
まず、命令を見てみよう。
■にはblockかnoneのどちらかが入るんだ。
前回と入る単語は違うけれど意味は一緒だよ。
blockにした時は表示が見える状態になる、またnoneにすると表示が見えない状態になるんだ。
前回と違うところは、前回は表示されていないときでも本来表示されるときのスペースが空いたままだったね。
今回は文字が非表示のときはその分のスペースは無くなってしまうんだ。
つまり必要なときはスペースを作って文字や画像を表示する。
その時、周りの文字や画像は下や右に動かされてしまうんだ。
| block （見える状態） |
こんにちわヨッシーです。これからもよろしく！ |
| none （見えない状態） |
こんにちわ。これからもよろしく！ |
このようにヨッシーですの部分があるときとないときでは、無い時はヨッシーですがなくなってしかもスペースも消えてしまっているね。
前回のhiddenで同じようにすると、
こんにちわ 。これからもよろしく！
のように、真ん中にスペースが残ったままになってしまうんだよ。
前回と今回の働きの違いをキチンと理解しておこうね。
この命令を使うとどんなことができるか。
じつはこれを使うと、普段慣れ親しんでいる（？）ようなツリー構造のリンクが簡単に出来てしまうんだ。
じゃあ、このプログラムを簡単に作ってみよう。
| <SPAN onclick="com.style.display='block'"> ←クリックするとcom.style.display='block'で表示させる ヨッシーの”ホームページを作ろう！” </SPAN> <BR> <FONT color="green" id="com" style={display:none;}> ←はじめはdisplay:noneで非表示にしておく ┣ HTML講座<BR> ┣ CSS講座<BR> ┣ JavaScript講座<BR> ┗ DHTML講座<BR> </FONT> <SPAN onclick="com1.style.display='block'"> ←上に同じ ヨッシーのホームページ </SPAN> <BR> <FONT color="green" id="com1" style={display:none;}> ←上に同じ ┣ プロフィール<BR> ┣ 日記<BR> ┣ 掲示板<BR> ┗ メール<BR> </FONT> |
これを実行すると、
|
ヨッシーの”ホームページを作ろう！”
┣ HTML講座 ┣ CSS講座 ┣ JavaScript講座 ┗ DHTML講座 ヨッシーのホームページ ┣ プロフィール ┣ 日記 ┣ 掲示板 ┗ メール ↑マウスでクリックすると中のツリーがあらわれる。（簡易版なのでそのあと元に戻すことは出来ない） |
（※display:none;についてはスタイルシート講座でもまだ講義していないので今はdisplay:none;とdisplay:block;を覚えておこう。）
オブジェクトの表示/非表示 Part1
好きな文字列を入れたいPart1