ＤＨＴＭＬサンプル集第１回
DHTMLはJavaScript講座で説明しようと思っていたのですがあえて別々に説明したほうが良いと思い始め、開設しました。別々に分けた理由としてＤＨＴＭＬはあくまでHTMLとJavaScriptを習得した人を対象にしなければ難しいと思われるからです。とはいっても完全に習得していなくても、理解できるとはおもいます。ＤＨＴＭＬの難しいところは、
１．ＣＳＳ（カスケーディングスタイルシート）で記述しなければならない。
２．ＮｅｔＳｃａｐｅＮａｖｉｇａｔｏｒとＩｎｔｅｒｎｅｔＥｘｐｌｏｒｅｒで文法がかなり違う。
３．HTMLは必須
４．JavaScriptは必須
５．ブラウザのバグ
といったところでしょう。ｍａｍも上記は１週間ほどで覚えたのでかなりいい加減ですが一応使えますのであまり重く考える必要はないでしょう・・・。
このＨＰでは主にInternetExplorerでのＤＨＴＭＬについて説明していきたいと思います。
いきなりＤＨＴＭＬサンプルです。
<html>
<head>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=shift_jis">
<script language="javascript">
<!--
var timeout;
var x=10;
var xx=10;
var y=10;
var yy=10;
function start(){
sc();
}
function sc(){
timeout=setTimeout("sc()", 100);
x = x + xx;
y = y + yy;
if (x>=900||x<=10){
xx=-xx;
}
if (y>=500||y<=10){
yy=-yy;
}
if (document.all){ //ＩＥの場合
document.all("lay1").style.left = x;
document.all("lay1").style.top = y;
}
if (document.layers){ //NNの場合
document.layers["lay1"].left = x;
document.layers["lay1"].top = y;
}
}
function stop(){
clearTimeout(timeout);
}
//-->
</script>
</head>
<body onLoad="start()"
onUnload="stop()">
<div id="dummy"></div>
<div id="lay1"
style="position:absolute;left:10;top:10;color:#00FFFF;font-size:30pt">
<p>DHTMLテストページです。ダイナミックに動きます。</p>
</div>
<div id="lay2"
style="position:absolute;left:10;top:10;color:#00FF00">
<a href="java.htm">戻る</a></div>
</body>
</html>
解説
通常ＮＮでは<layer>タグを使い、ＩＥでは<div>タグを使いますが、ＮＮでも<div>タグを使用することができます。完全にＮＮとＩＥを分けるのはかなり面倒なので、<div>タグを使ってクロスブラウザを実現しています。但しＮＮの古いバージョン（3.xx）では、最初の<div>タグを認識しないというバグがありますので、上記サンプルではダミーの<div>タグを作っています。また、ＮＮとＩＥでは実行結果が少し違いますので、注意が必要です。
実はＩＥでは<div>タグを使わなくても既にダイナミックＨＴＭＬなのです。クロスブラウザにするために<div>を使うのが一般的です。
<div>タグの中にstyleという記述がありますが、これがスタイルシートの記述です。タグを使って指定する方法とかなり違うことに注意して下さい。但し、これからはタグを使ってスタイルを記述するのではなくスタイルシートにスタイルを定義することが推奨されています。この機会にタグではなくスタイルシートの記述に慣れておくことが望ましいと思われます。
次回もサンプルを紹介したいと思います。
back／next