DHTML，CGI，スタイルシート

広島県立教育センター
ＤＨＴＭＬ，ＣＧＩ，スタイルシート
vol.1
ver1.0
広島県立教育センター
www.hiroshima-c.ed.jp
-0-
広島県立教育センター
第１部
拡張されるＨＴＭＬ，DynamicＨＴＭＬとは
前々回の講座でお配りしたＨＴＭＬ（バージョン3.2相当）の機能を活用したＷｅｂページは，
どちらかというと静的なイメージの画面構成となります。それと比較して，DynamicＨＴＭＬ（Ｄ
ＨＴＭＬ）の機能を活用したものは，動的なものとなります。最近のＷｅｂページにはこの機
能を活用したものが多く見られるようになりました。
「ＤＨＴＭＬは難しい」，「取っつきにくい」という話をよく聞きますが，確かにＤＨＴＭ
Ｌの機能を全て理解し，活用しようとしたら半端な努力では難しいでしょう。しかし，インタ
ーネット上や書籍の付録などには，無料で使用できるプログラムが多く存在します。それらを
活用することを通して，徐々に理解を深めていけばよいのではないでしょうか。
さて，ＤＨＴＭＬを使うとどんなことが可能となるのでしょう。
たとえば，ページに貼り込まれた画像や文字，ボタンやフォームなど，すべてのＨＴＭＬ要
素をレイヤー化して見えなくしたり，見えるようにしたり，位置を動かしたり，重なり合わせ
たりということが自由にでき，しかも，ピクセルなどの望みの絶対位置指定に従ってデザイン
できるようになります。
これらの機能を駆使することによってアプリケーションのようなＷｅｂページまでも作成す
ることができるでしょう。しかも，プラグインなどのヘルパーアプリケーションも必要ありま
せん。ＨＴＭＬを書くのと同様にフリーのエディタがあれば作成でき，普段使用しているブラ
ウザで見ることができるのです。
２大ブラウザ（InternetExplorer,NetscapeNavaigator）の互換問題
ＨＴＭＬやＷＷＷに関する規格は，http://www.w3.org/ を中心に作成され，２大ブラウザ
を中心に搭載されています。しかし，両社がブラウザのシェア争奪戦を繰り広げた結果，それ
ぞれが自社の優位性を明らかにするためにかなりの数の命令群が独自に拡張されました。その
結果，「ＤＨＴＭＬは互換性がないらしい」という誤解が広まってしまいました。
そこで，クロスブラウザＤＨＴＭＬという考えがユーザの間で草の根的に生まれてきました。
当然ながら，クロスブラウザＤＨＴＭＬの機能は両社のリファレンスには載っていません。
しかし，クロスブラウザを実現する方法は無数にあるといわれています。
ＤＨＴＭＬの基本構成
次に示す画面は，ＤＨＴＭＬを利用した簡単な作品例です。
ここをクリックしてください。をクリックすると，赤い文字で「押してくれてどうもありがと
う！（＾＾）」と表示されるものです。
この作品のソースを見てみましょう。
www.hiroshima-c.ed.jp
-1-
広島県立教育センター
<HTML>
<HEAD>
<META
HTTP-EQUIV="Content-Type"
CONTENT="text/html;charset=Shift_JIS">
JavaScript
<TITLE>dhtml</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showLAYER(layName){
← ＮＮ
用
if(document.layers)document.layers[layName].visibility='show'
if(document.all)document.all(layName).style.visibility='visible'
}
CSS
</SCRIPT>
<STYLE TYPE="text/css">
#test0
{ font-size:12pt;
color:red;
visibility:hidden }
#test1
{ font-family:Osaka,Arial;
font-size:12pt }
</STYLE>
HTML
</HEAD>
<BODY>
<DIV ID="test0">
<FONT>押してくれてどうもありがとう！(＾＾)</FONT>
</DIV>
この作品は大きく分けて３つのパートで構成されています。
１
JavaScript
ＣＳＳでPosition定義されたレイヤーをコントロールします。ここでは，レイヤーを見える
ようにするために，ＮＮとＩＥで互換のファンクションshowLAYER()を使っています。
なお，JavaScriptの命令は，ローカル上でも大文字小文字の区別をはっきりしながら使用し
ます。
www.hiroshima-c.ed.jp
-2-
広島県立教育センター
２
ＣＳＳ
スタイル（フォントや色，位置）を定義します。Positionを指定することでＨＴＭＬをレイ
ヤー化してスクリプトからのダイナミックな制御ができるようになります。
「#test0」の部分はセパレータと呼ばれ，#以下がID名を表します。セパレータは他に，ピリ
オド「.」を使ってたとえば，.className{color:green}というように記述します。このCLASS
の性質をＨＴＭＬ側で反映するにはタグの属性にCLASS=”className”を追加します。これで，そ
のCLASS名のついたタグ内の文字色は全て緑色になります。（ただし，CLASSよりIDが優先され
る）
他に，① タグ自体にＣＳＳ定義をする。（たとえば，P{color:#555555}など）
または，<div style=”color:red”>のように直接記述する。
② 外部ファイルに「.css」という拡張子を付けて記述し，<link rel=”stylesheet” hr
ef=”style.css”>などのように呼び出して使う。
などの方法があります。
３
ＨＴＭＬ
第１期の講座内容などのように，これまで親しんできた部分です。ここでは普通のＨＴＭＬ
と異なり，<DIV>タグにID名が指定されていて，その名前がＣＳＳのパートで#test0や#test1
という形で定義されています。これによって，たとえばID名test0のタグで囲まれた内容が，Ｃ
ＳＳで定義された性質を持つようになります。つまり，ID名test0の文字色は赤色になるわけで
す。
この部分のプログラムは，「ＣＳＳで見えないようにスタイル定義されたＨＴＭＬをJavaSc
riptで見えるようにさせる」ことで動きのある画面を実現しています。
<DIV>のかわりに<SPAN>タグも使われますが，<SPAN>タグは改行が入りませんので，直線的に
記述させたいときに使います。
これらの他にもＮＮとＩＥで共通にＣＳＳ定義の可能なタグはありますが，安定性の問題で，
<DIV>か<SPAN>で構成するのが無難です。
※ JavaScriptとJavaAppletについて
JavaScript
WWW上のクライアント側で実行されるプログラムを記述するための言語規格の1つ。ネットス
ケープ・コミュニケーションズ(Netscape Communications)社とサン・マイクロシステムズ(Sun
Microsystems)社が1995年12月4日に共同発表した初心者向けのUnicodeをベースにしたインタ
ーネット用オブジェクト指向プログラミング言語の名称である。
パソコンのOSに関係無くネットワーク経由で自由に画像を表示し，プログラムを動かして処
理できことからネットワークOSの一種として期待されている。
Javaの使用に際しては，htmlにプログラムを記述し実行させることになる。
JavaApplet
Java言語で記述されたクライアントで実行されるプログラムの単位，またはJava言語で書か
れた小型のプログラムの総称である。
Javaの使用に際しては，実行形式のため，htmlからそのプログラムを呼び出すことになる。
（つまり，htmlとは別にそのプログラムが必要ということ）
www.hiroshima-c.ed.jp
-3-
広島県立教育センター
JavaScriptを埋め込む①（BGMを流す）
例
NNとIEを自動判別して，"music.mid"という音楽(MIDI)ファイルを流す。
<HTML>
<Body>
<H1>BGMを流す。</H1>
<SCRIPT LANGUAGE="JavaScript">
<!-if (navigator.appName.indexOf("Internet Explorer") >= 0) {
document.write('<BGSOUND SRC="music.mid" LOOP=1>');
}
else {
document.write('<EMBED SRC="music.mid" AUTOSTART=true LOOP=false>');
}
// -->
</SCRIPT>
</Body>
</HTML>
LOOP=? : １・・・繰り返す回数を表す。無限・・・infinite (IEの場合)
LOOP=? : false・・・１回演奏する。無限・・・true (NNの場合)
音楽ファイル : MIDIデータ,AIFF形式,WAVE形式で再生可能
（ファイルサイズが大きくならないように）
JavaScriptを埋め込む②（画像をズームアップしながら表示）IEのみ
例
"zoom.gif"という画像をズームアップしながら表示させる。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-function zoomin() {
if ( title.style.pixelWidth < 400 ) {
title.style.pixelWidth += 10;
title.style.pixelHeight += 5;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="setInterval('zoomin()',10)">
<P STYLE="font-size:30pt; color:red;">Zoooooom Up</P>
<IMG SRC="zoom.gif" ID="title" STYLE="width: 0px; height: 0px">
</BODY>
</HTML>
pixelWidth < ? : 400・・・横方向を400ピクセルまで拡大を続ける。
pixelWidth += ? : 10・・・横方向を10ピクセルごとに拡大する。
pixelHeight += ? : 5・・・縦方向を５ピクセルごとに拡大する。
※ （これらの変数を変えて，縦横比が１：１でない画像に対応したり，ズーム速度を調節し
たりする。）
setInterval('zoomin()',?) : 10・・・1000分の10秒ごとにズームアップする。数を大きくす
ると速く段階的に，小さくするとスムーズにゆっくり
した動きになる。
ID="???" : ここで付けた名前を６行目から８行目にかけて使用する。
www.hiroshima-c.ed.jp
-4-
広島県立教育センター
JavaAppletを埋め込む
例
ある画像（picture.jpg）の上に，虹色の文字を流す。
※ 同じディレクトリに"RainbowString.class"という，虹色の文字を流すためのJavaAppletフ
ァイルが必要。（JavaAppletによって，PARAM NAMEなどのパラメータは異なる。）
<HTML>
<BODY BGCOLOR="#ffffff">
<CENTER>
<APPLET CODE="RainbowString.class" CODEBASE="./" WIDTH="600"HEIGHT="220" ALIGN="TOP">
<PARAM NAME="string" VALUE="----------ようこそ！こちらは○○学校です。">
<PARAM NAME="backImage" VALUE="picture.jpg">
<PARAM NAME="foreSpeedX" VALUE="8">
<PARAM NAME="foreSpeedY" VALUE="2">
<PARAM NAME="shadowWidth" VALUE="3">
<PARAM NAME="fontSize" VALUE="20">
</APPLET>
</CENTER>
</BODY>
</HTML>
WIDTH,HEIGHT・・・適当に変化させ，効果を見る。
PARAM NAME=・・・"string","backImage","foreSpeedX","foreSpeedY","shadowWidth",
"fontSize"等の変数を適当に変化させ，効果を見る。
動画を埋め込む(IEのみ）
<IMG DYNSRC="ムービーファイル名" option>
option
SRC="画像ファイル"（AVI形式のファイルを再生できないブラウザで，代わりに画像を表示
する）
WIDTH="ピクセル数"（動画の幅）
HEIGHT="ピクセル数"（動画の高さ）
ALIGN="left","center","right"
START="fileopen"（動画の転送が終わると即座に再生）
"mouseover"（マウスポインタが動画の表示領域に入ったら再生）
CONTROLS（動画の下にコントロールバーを表示したいときに指定）
LOOP="回数","infinite"（再生回数）
LOOPDELAY="1/1000秒単位"（再生が終わり，もう一度繰り返すまでの待ち時間）
ALT="文字列"
例・・・<IMG DYNSRC="movie.mpg">
プラグインのデータ（Shockwave，QuickTime等のファイル）を埋め込む
<EMBED SRC="データファイル名" option> ・・・・・</EMBED>
option
WIDTH="ピクセル数"（データの幅）
HIGHT="ピクセル数"（データの高さ）
その他，プラグインによって独自のオプションがある。
※ 再生するためには，プラグインという再生用プログラムをインストールしておく必要があ
る
ShockWave・・・マクロメディア社提供
QuickTime・・・アップル社提供
www.hiroshima-c.ed.jp
-5-
広島県立教育センター
例・・・<EMBED SRC="shock.dcr" width=176 height=140></EMBED>
スタイルシート①
例
見出しの書式を統一して，いろいろなページで利用する。
次のような書式を，"style.css"というファイルに保存しておき，必要なHTMLファイルから呼び
出して使用する。
<H1>タグの場合，青のデザイン縁取り付24ポイント文字になる。
<H2>タグの場合，背景が青で白抜きの文字になる。
<p>タグの場合，左側50ピクセル，右側10ピクセル分，インデントする。
書式ファイル："style.css"
body {
background: white;
}
h1{
border-style:outset;
border-color:blue;
border-width:0 0 6 16;
margin-left:5px;
margin-right:15px;
padding-left:10px;
font-size:24pt;
font-weight:bold;
}
h2{
background-color:"blue";
color:white;
border-width:none;
margin-left:5px;
margin-right:15px;
padding-left:0px;
font-size:18pt;
font-weight:bold;
}
p {
margin-left:50px;
margin-right:10px;
}
書式を呼び出しているHTMLファイル：??.html
<HTML>
<Head>
<LINK REL="stylesheet" TYPE="text/css" HREF=
"style.css">
</Head>
<Body>
<H1>2000年9月の日記</H1>
<H2>9月29日（金）</H2>
<H3>今日の天気: 晴れ</H3>
<P>
サンプル文書です。サンプル文書です。サンプル
文書です。サンプル文書です。サンプル文書です
。サンプル文書です。サンプル文書です。サンプ
ル文書です。
</P>
<H2>9月30日（土）</H2>
<H3>今日の天気: 雨</H3>
<P>
サンプル文書です。サンプル文書です。サンプル
文書です。サンプル文書です。サンプル文書です
。サンプル文書です。サンプル文書です。サンプ
ル文書です。
</P>
</Body>
</HTML>
画面表示例
H1 タグ使用部分
H2 タグ使用部分
www.hiroshima-c.ed.jp
-6-
広島県立教育センター
スタイルシート②（IE４以上）
<STYLE>・・・</STYLE> : 文字の書式などを一括宣言しておく。
例フォームの入力画面に"back.gif"という画像を貼り付ける。
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.syosiki {background-color:yellow;color:black;font:12pt'arial black'}
.txt {font:14pt'MS ゴシック'}
</STYLE>
</HEAD>
<BODY BGCOLOR="cyan">
<H1>お便りください！</H1><P>
<FORM ACTION="mailto:電子メールアドレス" METHOD="post" enctype=”text/plain”>
お名前 :<BR>
<INPUT TYPE="text" NAME="name" SIZE="30" CLASS="syosiki"><P>
メールアドレス :<BR>
<INPUT TYPE="text" NAME="address" SIZE="30" CLASS="syosiki"><P>
ご意見ご感想をお願いいたします :<BR>
<TEXTAREA NAME="comment" ROWS="13" COLS="40"
CLASS="txt" STYLE="background-image: url(back.gif)">
</TEXTAREA><P>
<INPUT TYPE="submit" VALUE="送信！" STYLE="background-image: url(back.gif)">
<INPUT TYPE="reset" VALUE="リセット？" STYLE="background-image: url(back.gif)">
</FORM>
</BODY>
</HTML>
.syosiki・・・12行め，14行めのCLASS="syosiki"に対応する。４行めで宣言したsyosikiを12
行め，14行めで使用する。
STYLE="background-image: url(back.gif)"・・・背景にback.gif（例）という画像を貼り付け
る。
www.hiroshima-c.ed.jp
-7-
広島県立教育センター
--------------------------注意
※
Microsoft®, Windows 98®,Windows 2000®,Windows NT®,Office,Internet Explorerは米国
Microsoft Corporation の米国およびその他の国における登録商標または商標です。
※
その他，本書に掲載したプログラム名，システム名，CPUなどは一般に各社の登録商標で
す。
※
本文中では，®マークは省略しました。また，一般に使われている名称を用いている場合
があります。
--------------------------平成１５年３月３１日
初版発行
発行
広島県立教育センター
〒739-0144
www.hiroshima-c.ed.jp
-8-
東広島市八本松南１丁目2-1

Download Report