BINCHAN KAMISAN-実験室-

・‥…━━━☆　第１回おじゃる丸クイズ　☆━━━…‥・

クイズの進め方

Quiz Start ボタンを押すと、クイズが始まります（多分）。
各問題の、正解と思われる番号のボタン（モモボタン）を押して、クイズを進めてください。
カンニング（*.js fileをEditorで開くこと）はしないでください（笑）
全問正解すると・・・・

・‥…━━━☆　HTML　☆━━━…‥・

あるサイトのパロディ文書ですが、中身は大真面目です。

HTMLの基本

普通の文書と同じ

HTMLといっても、普通の文書があって、その文書を構成している、見出しやら段落やらを、特定のマーク、<h1></h1>や、<p></p>で囲み込むだけです。たったそれだけです。

構造は普通の文書と同じですし、どういった文書を書くかによって違ってきます。

HTMLが簡単か、それとも難しいか。これは、どういう文書を書くかによって決まるわけです。

論理的にオカシイ、妙な文書を書けば、それをHTML化するのは、すげー難しいですし、普通の構造をもった、普通の文書をHTML化するなら、簡単すぎるほど簡単になります。

HTML文書を最初に作る際、意味不明なタグを覚える必要は全くありません。

HTML文書を作ってみる

というわけで、メモ帖か何かで作成した飾りの無い普通の文書を、段階を経てHTML化していきましょう。

文書例

My HOMEPAGE

My HOMEPAGEにようこそ。このサイトは、オリジナル小説と文学批評を公開しています。

コンテンツ

このサイトについて
日記
オリジナル小説
文学批評
掲示板

更新履歴

10月2日 オリジナル小説第3章
8月9日 文学批評 山本有三

(C)1999-2001 田中一郎

まず、一番上の「My HOMEPAGE」はこの文書の最重要見出しです。最重要見出しは、<h1></h1>で括ります（マークアップといいます）。

<h1>My HOMEPAGE</h1>

3行目は、文章です。文章中のひとつの段落は、<p></p>でマークアップします。

<p>My HOMEPAGEにようこそ。このサイトは、オリジナル小説と文学批評を公開しています。</p>

5行目の、「コンテンツ」は、最重要見出しの次に大きな見出しです。これは<h2></h2>でマークアップします。

<h2>コンテンツ</h2>

次にでてくる、

このサイトについて
日記
オリジナル小説
文学批評
掲示板

は、リストです。リスト全体は、<ul></ul>でマークアップします。リストの各項目は、<li></li>でマークアップします。

<ul>
<li>このサイトについて</li>
<li>日記</li>
<li>オリジナル小説</li>
<li>文学批評</li>
<li>掲示板</li>
</ul>

更新履歴

10月2日 オリジナル小説第3章
8月9日 文学批評 山本有三

も、同様にマークアップすると次のようになります。

<h2>更新履歴</h2>

<ul>
<li>10月2日 オリジナル小説第3章</li>
<li>8月9日 文学批評 山本有三</li>
</ul>

さて、最後の行ですが、

(C)1999-2001 田中一郎

このような著作者の情報や連絡先などは、<address></address>でマークアップします。

<address>(C)1999-2001 田中一郎</address>

以上、まとめると、次のようになりました。

<h1>My HOMEPAGE</h1>

<p>My HOMEPAGEにようこそ。このサイトは、オリジナル小説と文学批評を公開しています。</p>

<h2>コンテンツ</h2>

<ul>
<li>このサイトについて</li>
<li>日記</li>
<li>オリジナル小説</li>
<li>文学批評</li>
<li>掲示板</li>
</ul>

<h2>更新履歴</h2>

<ul>
<li>10月2日 オリジナル小説第3章</li>
<li>8月9日 文学批評 山本有三</li>
</ul>

<address>(C)1999-2001 田中一郎</address>

さて、これで一通りマークアップが済みましたが、HTMLでは2点だけ、特殊な作業が必要です。

文書の名前を決め、<title></title>でマークアップする
文書型宣言をする

１．で決める文書の名前は、そのページをお気に入りに入れたときに、タイトルとして表示されたりします。

ここでは、文書の名前をMy HOMEPAGEにしてみます。これを文書の本文より上に記述します。ちなみに最重要見出しと同じである必要はありません。

<title>My HOMEPAGE</title>

<h1>My HOMEPAGE</h1>

<p>My HOMEPAGEにようこそ。このサイトは、オリジナル小説と文学批評を公開しています。</p>

<h2>コンテンツ</h2>

<ul>
<li>このサイトについて</li>
<li>日記</li>
<li>オリジナル小説</li>
<li>文学批評</li>
<li>掲示板</li>
</ul>

<h2>更新履歴</h2>

<ul>
<li>10月2日 オリジナル小説第3章</li>
<li>8月9日 文学批評 山本有三</li>
</ul>

<address>(C)1999-2001 田中一郎</address>

２．で宣言する、文書型宣言は、数あるHTMLの書式のうち、どれに基づいて書いたかを明示するものです。必ず、文書の先頭に記述します。ここで解説しているのは、正しい書式のHTMLですから、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
を宣言しましょう。

＜完成されたHTML文書＞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>My HOMEPAGE</title>

<h1>My HOMEPAGE</h1>

<p>My HOMEPAGEにようこそ。このサイトは、オリジナル小説と文学批評を公開しています。</p>

<h2>コンテンツ</h2>

<ul>
<li>このサイトについて</li>
<li>日記</li>
<li>オリジナル小説</li>
<li>文学批評</li>
<li>掲示板</li>
</ul>

<h2>更新履歴</h2>

<ul>
<li>10月2日 オリジナル小説第3章</li>
<li>8月9日 文学批評 山本有三</li>
</ul>

<address>(C)1999-2001 田中一郎</address>

これで、完成です。よく耳にする<html></html>、<head></head>や、<body></body>は、省略可能です。

もう一度書きますが、

HTMLは、文書を構成している、見出しやら段落やらを、特定のマーク、<h1></h1>や、<p></p>で囲み込むだけのものです。

2点だけ例外がありましたが、基本的にこう考えたほうが気楽にHTML文書を作ることができます。

しかし、何故省略しても良いのかが分からない場合、省略をすべきではありません。というわけで一応完成されたHTML文書ですが、省略しない記述に直してみます。

まず、文書の本文の部分を、<body></body>でマークアップします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>My HOMEPAGE</title>

<body>

<h1>My HOMEPAGE</h1>

<p>My HOMEPAGEにようこそ。このサイトは、オリジナル小説と文学批評を公開しています。</p>

<h2>コンテンツ</h2>

<ul>
<li>このサイトについて</li>
<li>日記</li>
<li>オリジナル小説</li>
<li>文学批評</li>
<li>掲示板</li>
</ul>

<h2>更新履歴</h2>

<ul>
<li>10月2日 オリジナル小説第3章</li>
<li>8月9日 文学批評 山本有三</li>
</ul>

<address>(C)1999-2001 田中一郎</address>

</body>

次に、その文書自身の情報の部分を、<head></head>でマークアップします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<head>

<title>My HOMEPAGE</title>

</head>

最後に、文書型宣言以外の部分全体を、<html></html>でマークアップして終了です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<title>My HOMEPAGE</title>

</head>

<body>

<h1>My HOMEPAGE</h1>

<p>My HOMEPAGEにようこそ。このサイトは、オリジナル小説と文学批評を公開しています。</p>

<h2>コンテンツ</h2>

<ul>
<li>このサイトについて</li>
<li>日記</li>
<li>オリジナル小説</li>
<li>文学批評</li>
<li>掲示板</li>
</ul>

<h2>更新履歴</h2>

<ul>
<li>10月2日 オリジナル小説第3章</li>
<li>8月9日 文学批評 山本有三</li>
</ul>

<address>(C)1999-2001 田中一郎</address>

</body>

</html>

このように、文書全体がhtmlという要素になっていることを示すわけです。

まず最初に完成した文書があり、それをマークアップすることでHTML文書となるのですから、以上のような手順でHTML化をするのが自然です。

画像を表示できない、あるいは表示させていない環境への配慮です。この属性を記述しておかないと、a要素の中身が空っぽになってしまいます。つまり画像を表示できないブラウザはリンク先に移動することができなくなります。また、よく間違えられていますが、alt属性に記述するのは、画像の説明ではなく、画像が表示されない時にそれと同じだけの情報を持った文字列です。alt属性をポップアップしてくれるのは、一部のブラウザの仕様に過ぎません。

width属性と、height属性は必須ではありませんが、これを記述しないと、ブラウザが画像の情報を全て読み込むまで、文書を整形できなくなるため表示が遅くなります。

別ウィンドウで文書を開かせる

a要素の属性に、target="_blank" を追加するだけですが、これをやってしまうと、閲覧者に強制的に別ウィンドウを開かせることになってしまいます。そして閲覧者は別ウィンドウを開きたくない時に、かなり面倒な作業をしなくてはならなくなります。

一方、閲覧者は、別ウィンドウを開きたい時には自分の意志でそれを行うことが可能です。特に、InternetExplorerの使用者なら、Shiftキーを押しながらリンクをクリックすることで、簡単に別ウィンドウで開くことが可能です。target属性はHTML4.01の厳格な仕様では破棄されました。次世代規格XHTMLでも当然使えません。閲覧者の自由を奪って楽しいですか？

表（テーブル）を整形する

例

次のような表を作ってみましょう。

商品名	商品番号	価格
ウクレレ	No.001	￥1,5000
サックス	No.002	￥7,8000

まず、中身のセルを定義しましょう

HTMLでは中身が大事です。中身から徐々に表を完成させていきましょう。最初から、自分でも良く分からない枠組みなるものを作っておくのはオススメできません。

表は、複数の四角いセルで構成されていますが、通常の表のセルは2種類あります。見出しのセルと、中身のセルです。見出しのセルは、<th></th>で括り、中身のセルは、<td></td>で括ります。

<th>商品名</th><th>商品番号</th><th>価格</th>
<th>ウクレレ</th><td>No.001</td><td>￥1,5000</td>
<th>サックス</th><td>No.002</td><td>￥7,8000</td>

さて、上の例では、商品名という見出しは下方向に有効なように記述されています。このとき、thタグの属性に、scope="col" と記述します。

また、ウクレレという見出しは、横方向に有効なように記述されています。このときは、thタグの属性に、scope="row" と記述します。

これらの属性は、目の不自由な方が使う、音声読み上げブラウザの助けになるだけでなく、表のデータ的価値を高めます。

<th scope="col">商品名</th><th scope="col">商品番号</th><th scope="col">価格</th>
<th scope="row">ウクレレ</th><td>No.001</td><td>￥1,5000</td>
<th scope="row">サックス</th><td>No.002</td><td>￥7,8000</td>

これで大体中身の記述が終わりました。

次に、行を明示しましょう

HTMLでは、横方向の行を明示する必要があります。各々の行を、<tr></tr>で括ります。

<tr><th scope="col">商品名</th><th scope="col">商品番号</th><th scope="col">価格</th></tr>
<tr><th scope="row">ウクレレ</th><td>No.001</td><td>￥1,5000</td></tr>
<tr><th scope="row">サックス</th><td>No.002</td><td>￥7,8000</td></tr>

さらに、行の種類を区別しましょう

この例では、一行目が見出しの行となっています。見出しの行は、<thead></thead>で括ります。

二行目と三行目は本体ですから、これらの列をまとめて、<tbody></tbody>で括ります。

<thead>
<tr><th scope="col">商品名</th><th scope="col">商品番号</th><th scope="col">価格</th></tr>
</thead>
<tbody>
<tr><th scope="row">ウクレレ</th><td>No.001</td><td>￥1,5000</td></tr>
<tr><th scope="row">サックス</th><td>No.002</td><td>￥7,8000</td></tr>
</tbody>

これで、行の区別（グループ化）が終わりました。

最後に表であることを明示しましょう

全体を、<table></table>で括ります。

<table>
<thead>
<tr><th scope="col">商品名</th><th scope="col">商品番号</th><th scope="col">価格</th></tr>
</thead>
<tbody>
<tr><th scope="row">ウクレレ</th><td>No.001</td><td>￥1,5000</td></tr>
<tr><th scope="row">サックス</th><td>No.002</td><td>￥7,8000</td></tr>
</tbody>
</table>

これで終わりではありません。最後に表の説明を、tableタグのsummary属性に記述します。

<table summary="各商品の商品番号、価格の表です">
<thead>
<tr><th scope="col">商品名</th><th scope="col">商品番号</th><th scope="col">価格</th></tr>
</thead>
<tbody>
<tr><th scope="row">ウクレレ</th><td>No.001</td><td>￥1,5000</td></tr>
<tr><th scope="row">サックス</th><td>No.002</td><td>￥7,8000</td></tr>
</tbody>
</table>

さあ、これで例のような表（テーブル）が完成しました。

商品名	商品番号	価格
ウクレレ	No.001	￥1,5000
サックス	No.002	￥7,8000

枠線の種類とか、セルの背景色だとか、表の幅、高さなどは、CSSで別途指定します。例えば、CSSで

th{
  color:white;
  background-color:blue;
}

と指定すれば、見出しのセルの文字色は白、背景色は青色に統一されます。htmlのfontタグ、bgcolor属性で、セルひとつずつに指定してもいいのですが、そのような面倒なことはオススメできません。見栄えに関する情報をHTMLに記述すると、あとで非常に見づらくなって直したりするのが大変です。

NetscapeCommunicatorでは枠線や背景色が表示されない？・・それは、NC4.xのバグです。NC4.xはこの他にもCSSに様々なバグを持っています。わざわざバグを抱えたブラウザを使ってらっしゃるわけですから、見栄えが寂しいくらいは我慢してもらいましょう。表などのデータは特に、中身が伝わることの方が大事です。

フレーム

フレームの弊害

まず、フレームを解釈できないブラウザには、情報を伝えることができません。noframes要素を使ってフレーム未対応ブラウザ用に別途情報を提供する必要があります。これは面倒です。

つぎに、情報価値の低下を招きます。検索エンジンでフレーム内の文書に移動した場合、フレームの一部分だけが表示されて、閲覧者は混乱するかも知れません。特に、フレームを使わないと情報が未完全となる場合、意味が全く分からないこともあります。フレーム使用者は、これを避けるために、ロボットに情報を拾わせないよう工夫するかも知れません。これはロボット型検索エンジンの利便性を損ねます。

さらに、フレームを使うことで、サイト製作者は、サイトの入口なるものを明確に意識することになります。インターネットに公開されている全ての文書は、それぞれ独立した一個のリソース（資源）です。その意味で、本質的にサイトの入口なるものは存在しません。各々のリソースには、自由にリンクを張って、これを利用できることは、インターネットを魅力的にしている大きな要素ですが、これを否定してしまうことになります。

ついでに言えば、フレーム内文書にブックマークをするのが面倒になったり、解像度の低い環境では（場合によっては）横スクロールが現れたりして見づらくなることがあります。ソースを隠すためにフレームを使っているサイトをたまに見かけますが、そもそもブラウザはソースを解釈しなければ画面に表示させることができないので、ソースを見る方法はいくらでもあります。

余談ですが、HTMLの次世代規格XHTML1.1では、frame要素は破棄されました。

フレームの利便性

JavaScriptとCSSを勉強すればフレームの利便性はほとんど再現可能です。フレームを使う必要はほとんどないといっていいでしょう。

CSS

あるサイトのパロディ文書ですが、中身は大真面目です。

まずはじめに・・

CSSは、HTML文書の２つの概念、１．ブロックレベル要素、２．テキストレベル要素（インライン要素）を理解していないとさっぱり意味不明で、理解の無いまま使用しても、フォントタグの延長または、小手先の技のようにしか思えないことでしょう。

別に、小手先の技を使うなとは言いませんが、それがいかにもCSSの本質かのように宣伝するのは害悪といえば害悪ですので控えていただきたいところです。

CSSとは

Cascading Style Sheetsの略で、HTML文書を整形するスタイルシートの一種です。Cascadeとは「滝のように落とす」の意味です。基本的に子要素のスタイルは、親要素のスタイルを継承する形で適用されることからこう名づけられたのでしょう。

何度も書きますが、スタイルシートとはブラウザが文書を整形する時に適用されるシートで、スタイルシートが無ければ文書は画面に表示されません。CSSを使用していないhtml文書の見出しを太字にして文字サイズを大きくしたり、リストにマークを付けたりするのは、全てスタイルシートの仕業です（仕業って・・）

CSSによるスタイルの指定

基本

スタイルを指定するには、基本的に次のように記述します。

要素名{ スタイル名 : 適用値 }

a要素（要素名）の、文字色スタイル（スタイル名）を、赤（適用値）に指定したいなら、こう書きます。

a{ color : red }

これで、aタグで挟んだ部分が赤色になることでしょう。

ちなみに、正しい専門用語で置き換えると、こう表現されます。

セレクタ{ プロパティ : 値 }

プロパティは、color、background-color、border-color、width、height など様々ありますが、直感的で分かりやすい名前ばかりです。

a要素の背景色を黄色にして、文字色を赤にする、など、複数指定したいときには、次のようにセミコロンで区切ります

a{ color : red  ;  background-color : yellow }

これで、このスタイルシートが適用されたHTML文書のなかのa要素は、すべて文字色が赤、背景色が黄色になります。

複数の要素に同じ指定をする時には、次のように記述することができます。

a,em{ color : red }

これで、a要素とem要素の文字色が赤に指定されました。

応用１～classを使う～

HTMLのタグに、class属性を指定しておけば、CSSでそのclassを持った要素にだけスタイルを指定できます。

例えば、emタグで強調部分であることを明示する時、年度という意味で強調したいなら、emタグのclass属性の値（class名）をyearと指定しておきます。

<em class="year">2001年</em>

class名yearを持ったem要素の文字色を緑に変えたいなら、CSSにて次のように指定します。

em.year { color : green }

セレクタ.class名{ プロパティ : 値 }

このように、クラス名の前に.（ドット）を付けるだけです。

応用２～idを使う～

classと似ていますが、HTMLのタグに、id属性を指定しておくと、CSSでそのidを持った要素にだけスタイルを指定できます。class名がその要素の特徴を表すのに対して、id名はその要素の名前を表します。

classと、idの違い

人で例えてみると分かりやすいでしょう。その人の説明として、20歳、学生、180cm等はその人固有のものではありません。これはclassにあたります。一方、名前は、田中太郎等という固有のものです。classがその要素の属性を説明するのに対して、idは、その要素に名前を付ける働きをします。そして、その名前のついた要素に、CSSなり、Javascriptなりで色々な指定ができるわけです。

ですから、当然同じid名を持った要素は１つだけということになります。

id名LastUpDateを持った、p要素の文字サイズを1.5倍に指定してみます。

――HTMLの記述――
<p id="LastUpDate">最終更新日は、10月20日です。</p>

――CSSの記述――
p#LastUpDate{ font-size : 150% }

このように、id名の前に#（シャープ）を付けるだけです。

応用その３～擬似クラスを使う～

擬似クラスとは、CSSで予め決められたクラスで、代表的なものに、:hover擬似クラスがあります。これはマウスポインターを載せた時のみに、スタイル指定を限定します。HTMLでclass属性を記述する必要がありません。IEでは、href属性を持ったa要素以外には無効ですが、本来はどの要素にも適用できます。

a:hover{ color : yellow }

これで、リンクにポインターを置いた時に文字が黄色になります。

応用その４～子孫セレクタを使う～

子孫セレクタは、その要素へのスタイル指定を、特定の親要素を持つ場合に限定する時に使います。

親セレクタ セレクタ{ プロパティ : 値 }

のように指定します。親セレクタとセレクタの間には、半角スペースをひとつ入れます。

li a{ color : black }

これで、li要素の中に含まれるa要素にのみ、文字色を黒にする指定をしたことになります。

更に、いくらでも階層を深くすることもできます。

dl li em a{ color : black }

上の指定は、dl要素に含まれる、li要素に含まれる、em要素に含まれる、a要素の文字色を黒にしろ、という意味を持ちます。

classや、idをもった要素を親要素にすることも可能です。例えば・・・

p#LastUpDate a{ color : silver }

とすると、id名LastUpDateのp要素に含まれる、a要素の文字色をsilver（灰色っぽい色）にしろ、という指定になります。

この他にも、セレクタの指定の仕方は沢山あるのですが、シェアの最も高いIEが実装していないので省略します。

うーん・・予想はしてたけど、CSSについて書き出すと止まらないぞ、これは・・（汗。パロディどころじゃなくなって来た・・・

様々なプロパティの説明（執筆中）

背景に関するプロパティ

background-color: 背景色です
background-image: 背景画像です。値には、url(*)の、*に、画像の絶対URI、あるいはCSSファイルから見た相対URIを記述します。; 例：p{ background-image : url(../images/photo.gif) }
background-repeat: 背景画像のタイリング方法です。値には、repeat（縦、横に敷き詰める）、repeat-x（縦方向に敷き詰める）、repeat-y（横方向に敷き詰める）、no-repeat（繰り返さない）の何れかを指定できます。
background-attachment: 背景画像とスクロールとの関係です。値には、fixed（スクロールを無視して固定位置に）、scroll（スクロールと共に移動）の何れかを指定できます。
background-position: 背景画像の位置です。

・‥…━━━☆　javascriptリンク集　☆━━━…‥・

はじめに

なぜか javascript で調べてBinchan Kamisanにたどり着いてしまった方へ捧げるリンク集です。

ご利用の前に、お調べになった検索エンジンを疑いましょう。なぜなら、BinchanKamisanは、javascriptとはほとんど無縁の単なるおじゃる丸ファンページだからです。尚、私は紹介文にjavascriptという単語を含めた覚えはありません。

あなたは javascript に何を求めていますか？もしページ装飾の目的で使おうとしているなら、やめておいた方がいいでしょう。ページに星が降ってきたりする javascriptは、そのページの可読性を損なわせるばかりでなく、PCに余計な負担をかけます。閲覧者の利便性を高める目的以外のjavascriptは、ほとんどの場合、（ヘビーユーザを中心に）非常に嫌われています。javascriptに限らず、どのようなものが嫌われるかは、ダサページというサイトを熟読すれば理解できると思います。

検索方法

Yahoo!などの大手検索エンジンに載っているサイトは、もうご存知かと思います。個性的なjavascriptのサンプルを手に入れるには、個人運営の大穴サイトを見つけるに限ります。

データベースが人の手で作られたものを、ディレクトリ型、ロボットによって作られたものを、ロボット型といいます。まずはディレクトリ型検索エンジンで調べましょう。

JOY

個人運営サイトに的を絞り、申請すればほとんど登録される情報価値の高い検索エンジンです。javascript関連のリンク数はディレクトリ型の中では恐らく最も豊富です。

JOYでjavascriptを検索すると、キーワード：javascript の文字の下にまずカテゴリへのリンクがあり、その下に検索結果３０件までが表示されます。すべて見るには、カテゴリへのリンクをクリックします。javascriptは、java/javascript というカテゴリに収録されています。尚、多くの人に誤解されていることですが、JAVA と javascriptは全く別物ですので注意してください。

以下執筆中です。というか、消滅するかも知れません。

・‥…━━━☆　メモ　☆━━━…‥・

このサイトのカラクリ

なんだか作ってて自分でもわけ分からなくなりそうなので、メモっときます。どうせ半年後には何をどうやったかすっかり忘れてそうだし。

非表示にする方法

ページ内のあるブロックを非表示にしているのは、すべてスタイルシートの display プロパティで行っています。

表示させる方法

それを表示(非表示)させるのに使っているJavascriptの関数は３種類用意しています。

reveal()
revealAll()
hideAll()

要素を特定するための方法は３種類使っています。

getElementById メソッド
document.all オブジェクト
getElementsByTagNmae メソッド

従って、これらのメソッド、オブジェクトが定義されていない NetscapeNavigator などでは表示できないため、非表示を制御しているスタイルシートファイルを、これらのメソッドが定義されているかどうかで条件分岐させて、読み込ませるか、読み込ませないかを制御しています。

スタイルシート非対応環境への配慮

完全に非対応のUAについては、そもそも display プロパティは適用されないので、問題ありません。

スタイルシートの解釈に問題がありそうなUAについては、@media screen{ } を使って読み込ませないようにしています。この辺がちょっと怪しいです・・

JavaScript非対応環境への配慮

displayプロパティを記述したスタイルシートを、JavaScriptの document.write メソッドを使って読み込ませているので、問題ありません。

reveal()関数

id 名で要素を取得し、document.all(id名).style または document.getElementById(id名).style の値を、block に切り替えます。なお、display プロパティは、すべてクラス名で指定しているので、id と class を併記しています。

revealAll()関数

クラス名 nodisplay の div 要素すべてについて、display プロパティの値を block に切り替えます。

正確には、それらの div 要素の数だけ繰り返し上記の作業を行います。

hideAll()関数

クラス名 nodisplay の div 要素すべてについて、display プロパティの値を none に切り替えます。

☆実験室メニュー☆

第一回おじゃる丸クイズ

HTML

CSS

javascriptリンク集

メモ

・‥…━━━☆ 第１回おじゃる丸クイズ ☆━━━…‥・

・‥…━━━☆ HTML ☆━━━…‥・