このアーカイブは同期化されません。 mixi の日記が更新されても、このアーカイブには反映されません。
CSS は、Web ブラウザに新たな可能性を生み出した。
それは、Dynamic HTML と呼ばれる仕組みである。
Dynamic HTML とは、JavaScript を使って、
要素の属性やスタイルを動的に操作するための基盤だ。
CSS では、HTML の要素に自由に装飾を施すことができ、
その指定によって、要素のデザインは百変化する。
CSS によるデザインを、固定的なものとせず
実行時に JavaScript のプログラムで変更できれば、
JavaScript のイベントハンドラと組み合わせると、
利用者の操作に対応して色々な表現が可能となる。
CSS は柔軟性を持つ大きな仕様であったため、
CSS を取り扱える各社の Web ブラウザは、
既に HTML を取り扱う高度な機能を持っていたため、
独自仕様として、JavaScript による拡張を追加した。
Netscape Navigator は、CSS と JavaScript を融合し、
JavaScript モデルによりスタイル指定を可能とした。
これは CSS の構文ではなく、JavaScript の構文を使って、
スタイルを自由に変化させることができる機能だ。
<STYLE TYPE="text/css">
P {
font-size: "18pt";
margin-left: 20%;
}
.TITLE {
text-align: center;
}
</STYLE>
上記の CSS は、JavaScript でも書くことができる。
<STYLE TYPE="text/javascript">
with (tags.P) {
fontSize = "18pt";
marginLeft = "20%";
}
classes.TITLE.textAlign: "center";
</STYLE>
そして、<LAYER> という独自拡張の要素を追加した。
<LAYER> は HTML の一部に自由に記述することができる。
<LAYER> は CSS によるデザインや位置等を指定可能な上、
この部分は独立したサブ文書として扱われるため、
document.write を使って HTML を動的に生成可能だ。
<LAYER ID="dynaContent">
<H1>Default Content</H1>
</LAYER>
<SCRIPT>
var content = '<H1>Dynamic Content!</H1>';
document.dynaContent.document.write(content);
document.dynaContent.document.close();
</SCRIPT>
これらに対し、Internet Explorer が導入した拡張は、
DHTML と呼ばれ、HTML の階層構造を
そのままオブジェクト構造として JavaScript に公開し、
要素（オブジェクト）のプロパティとして、
各種スタイルを動的に指定できるようにした。
<SCRIPT LANGUAGE="JScript">
var paras = document.all.tags("P");
if (paras != null) {
var i;
for (i = 0; i < paras.length; ++i) {
paras[i].style.fontSize = "18pt";
paras[i].style.marginLeft = "20%";
}
}
</SCRIPT>
また、任意の要素に対して、要素内容の変更が可能な
プロパティ innerHTML や outerHTML などを公開した。
<H1 id="dynTitle">Default Content</H1>
<SCRIPT>
document.dynTitle.innerText = 'Dynamic Content!';
</SCRIPT>
このように、JavaScript を拡張し、HTML に対して、
JavaScript から各種操作を可能にすることで、
Web サーバ側で処理をする手間をかけず、
Web ブラウザだけで高度な処理が可能となった。
両者共色々なサンプルを出していたが、
特に印象に残っているのは、
DHTML のデモとして Internet Explorer 4.0 が
公開していたシューティングゲーム「Asteroids」だ。
http://msdn.microsoft.com/library/en-us/dndude/html/asteroids.asp
最初に見たときは、これが HTML かとびっくりしたものだ。
これは、DHTML の機能を最大に生かしている。
Web システムとは全く異なる用途ではあったが、
Web ブラウザの表現力が増し、
将来開発基盤となることを強く感じさせる出来事であった。