8－2　時間を決めて表示して時間を決めて消えるひな形

桂ちゃん　画像提供ありがとう　　おかけで　少し　ＴＩＭＥに触れることができました
次回までに　このＴＩＭＥやってみるわね　scriptを自分で作るのは大変だけど　このHTML+TIMEは
自分のオリジナルが出来るわね・・・エル

今回はHTML+TIMEを使ってのひな形でした。　　HTML+TIMEを使用するにあたって　HTML+TIMEひな形講座さんを参考にさせていただいております。　　ありがとうございました。　　この場をお借りしましてお礼申し上げます。　　・・・・　クッピー

桂ちゃんから画像を借りてTIMEを使ってのひな形いかがでしたか。　　桂ちゃんがこのたぬきを使って雛形を作ってくれました。　　【表示】→【ソース】を見てください。　　さらに詳しく説明してくれています。　　参考にして　あなたのオリジナル雛形を作ってみてくださいね

参考ひな形・・・　　たぬき　　かくれんぼ　　 10人のインディアン

('-'*)(,_,*)('-'*)(,_,*) ウンウン　なるほど　こういう風にしてＴＩＭＥを使ったひな形ができてくるのね。　　('-'*)(,_,*)('-'*)(,_,*) ウンウン　クッピーが教えてくれた通りにやったら　(o^-^o) ウフッ　とってもかわいいひな形ができたわよ　Ｖ(○⌒∇⌒○) ルンルン　　サンプル１

そうそう　それでは　お地蔵さんを消したところで　次は煙の画像を出してみましょう。

<IMG src="kemuri.gif" id="image2" class="time" begin="image1.end" end="8" style="Z-INDEX: 2; position: absolute; left: 170; top: 50">

ここで　先ほどのお地蔵さんのタグと違うところは　まず　id　image2ですね　どんなに同じ画像を使っても　ここは一つ一つ名前を持っているということを覚えておいて下さい。　　そしてbeginが　image1終了後始まる　そういう風に変わりましたね。　あと画像の配置が変わり終了時間が8秒となりました。
上のタグをコピーしてまた先ほどのタグの下において上書き保存をしてください。

同じようにして　次の画像女の子もやってみましょう。　　

<IMG src="onnanoko.gif" id="image3" class="time" begin="7" end="10" style="Z-INDEX: 3; position: absolute; left: 200; top: 100">

そして　つぎにまた　煙の画像です。

<IMG src="kemuri.gif" id="image4" class="time" begin="image3.end" end="12" style="Z-INDEX: 4; position: absolute; left: 170; top: 50">

同じ煙の画像使いましたが　idのなかは　image2ではなくimage4　であることにきづいてくださいね。　けして　同じ　ｉｄが来ることはありません。

最後にたぬきの画像も　置いて見ましょう。

<IMG src="tanuki.gif" id="image5" class="time" begin="image4.end" style="Z-INDEX: 5; position: absolute; left: 190; top: 150">

全部タグを入力してから　または　上のタグを全部コピーして貼り付けてから　上書き保存されてもかまいません。　　そして　tanuki.htmlを開いてみてください。　いかがですか。　　できていますよね。　最後の　tanukiの画像のタグを見ていただければ　おわかりになると思いますが　end="○○"　がありませんね。　　そのまま　画像が残ります。　　可愛い女の子はたぬきが化けたものだったのですね。　(o^-^o) ウフッ

次に　メッセージですね。　　メッセージのつけ方は　前回テーブルでやりましたね。

<TABLE class="time" id="t1" begin="14" border="1" style="Z-INDEX: 7; position: absolute; left: 450; top : 30;
width: 300; height: 300;">
<TBODY><TR><TD>
☆<BR><BR>
たぬきの画像を使っての<BR><BR>
HTML+TIMEでのひな形できましたでしょうか<BR><BR>
基本的な雛形を作ってみました<BR><BR><BR>
エル＆クッピー<BR><BR>
☆
</TD></TR></TBODY></TABLE>

今までのテーブルと違うところは　テーブルの属性にclass="time" id="t1" begin="14"　がついたことですね　これが　もう画像のところで説明しましたからわかりますね。　　どう　エル　できた？

そうです　桂ちゃんが　ＴＩＭＥを使ってできる簡単な雛形を提供してくれました。　この画像サンプルを右クリックして　名前をつけて画像を保存　保存先を先ほど作ったフォルダー【hinagata】に保存してください。････画像サンプル

そしたら　先ほどのtanuki.html　を開いて　【表示】→【ソース】をクリックします。　次の部分に赤い部分を追記してください<BODY id="body1" bgcolor="#bdf876">上書き保存をして更新でみてみましょう。　いかがですか？　　先ほどの真っ白の背景がきれいな若草色になったでしょう。　　それではまず動かない画像を入れて見ましょう。　<BODY id="body1" bgcolor="#bdf876"> と　</body>の間に入力していきます。　　まずは　動かないお地蔵さんですね。

　<IMG src="jizou.gif" style="Z-INDEX: 1; position: absolute; left: 50; top: 100"> 　をコピーして　<BODY id="body1" bgcolor="#bdf876"> と　</body>の間に貼り付けしてください。

これは左から５０ピクセル上から１００ピクセルのところに　お地蔵さんの画像をおくということですね。　貼り付けましたら上書き保存して更新で見てください。　　いかがですか？　若草色の中にお地蔵さんが出てきたでしょう。

次からがTIMEです。　　

<IMG src="jizou.gif" id="image1" class="time" begin="0" end="5" style="Z-INDEX: 1; position: absolute; left: 200; top: 100">　上との違いを見てください。

画像は同じお地蔵さん　ちょっと　配置場所が変わりましたね。　　左から２００　上からは変わらず　　動かないお地蔵さんの　横に並べましたね。
gif　フィルの横に　id="image1" がつきましたよね。　これが　命令されるものの対象となります。　　忘れないでつけるようにしてくださいね。　そして　class="time" begin="0" end="5"　が追加されましたね。　　class="time"　これは文字通り　ｔｉｍｅというクラスに属すると覚えていてください。　次は　begin="0" end="5"ですね。　これも文字通り　０秒から始まって　５秒に終わるという意味ですね。　　それでは先ほどと同じように　tanuki.htmlのソースを開いて　動かない地蔵さんのタグの下の行に　上のタグをコピーして貼り付けてみてください。

(ノ゜ρ゜)ノォォォ・・ォ・・ォ・・・・　((((((( *ノノ) ｷｬｰ　できた！！！！！　私にも　ＴＩＭＥができたわ　ちゃんと　現れて　消えた！！　クッピー　ありがとう。　　難しいと思っていたＴＩＭＥが　光が見えてきたわ！！　　じゃあ　このたぬきと　女の子と煙も同じように時間を設定すれば出来るのかしら？？？

メモ帳に先のソースを貼り付けましたら、　【名前をつけて保存）をクリックして　ファイルの種類を　下記のように　【すべてのファイル】にしてください。　　そしてファイル名を　何でもよろしいのですが、　今日は桂ちゃんの画像を使いますので　tanukiとして　そのあとに　.ｈｔｍｌ　をつけてください。　tanuki.htmlですね。　　tanukiのあとに　ドット　（ピリオド）を忘れないで下さいね。

そして　先ほどマイドキュメントに作成したhinagataのフォルダーに保存してくださいね。　　メモ帳を閉じて先ほどのフォルダーの中に
インターネットのマークのファイル　tanuki　が出来ているでしょう。　　開いてみてください。　　真っ白ですよね。　　はい　=*^-^*=にこっ♪　それでいいのです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
<STYLE type="text/css">

</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>

<BODY id="body1">

</BODY>
</HTML>

('-'*)(,_,*)('-'*)(,_,*) ウンウン　出来たわ！！　一瞬　真っ白だったから
たぬきに化かされたのかと思ってしまった。　　(;^_^A アセアセ・・・

そうか　桂ちゃんが画像提供してくれたのね。　(((o(^。^")o)))ワクワク

じゃあ　実践してみましょう。　　【スタート】ボタンから　→　【プログラムファイル】　→　【アクセサリー】　→　【メモ帳】を立ち上げてください。　　立ち上がりましたね。　　そしたら　HTML+TIMEひな形講座さんのサイトに行って　まずは　そのサイトを読んでくださいね。　　そして　メモ帳に　次のソースをコピーして貼り付けてください。

('-'*)(,_,*)('-'*)(,_,*) ウンウン　なるほど　私は拡張子はすでに出ているから　フォルダーだけ作ればいいわね。　　右クリック　新規作成　フォルダー　。。。o(゜^ ゜)ウーン　名前はなんとしようかな・・・・・　(*^.^*)エヘッ　クッピーと同じ　hinagataにするわ。　　よし　これでいいわ　　o((=゜ェ^=))o''ワクワク♪

8－１　前準備をする

それから　HTML+TIMEで雛形を作るんだったら　HTML+TIMEひな形講座のサイトを参考にして作ってくださいね。
それから　今まではＯＥで画像差し替えをしたり　scriptを貼り付けたりしましたが　HTML+TIMEはｓｃｒｉｐｔと違ってセキュリティーの設定が不要であることや、初心者でも簡単に動くひな形が作れる事など。。。　html+timeで作るひな形は　それだけで充分価値があります。 TIMEをやるんでしたら　メモ帳で作っていったほうが　わかりやすいし　また　作りやすいと思いますのでメモ帳でhtmlファイルの作り方を少し説明しますね。　

それでは　まず作る前の　準備として　①拡張子をファイルにつけたほうがわかりやすいかも　拡張子とは　例えば　画像ファイルですね
yama.gif とか　kawa.jpg　とか　ファイル名の種類ですね　gif　とか　jpg　を拡張子といいます。　テキストファイルだったら　ｔxｔ　ですね。　　どうやってつけるかというと【スタート】→【設定】→【フォルダーオプション】→【表示】→【登録されて　いるファイルの拡張子を表示しない】のチェックをはずして　【ＯＫ】です。
すでに拡張子がついている方は不要な説明です。　　また　ＸＰのかたはコントロールパネルの　ツール　フォルダーオプションのところにありますので同じように行ってくださいね。

次の準備として②　マイドキュメントの中にフォルダーを作っておきましょう。　　本当にこれは　初心者のために説明していますから
すでに　HTML+TIMEを使って雛形を作ってらっしゃる方はご自分のやりやすい方法で作ってくださいね。　　私自身はホームページビルダーで作成しています。　　フォルダーの作り方ですが　右クリックして　【新規作成】　→　【フォルダー】をクリック　そして　新しいフォルダーというのが出ましたね。　　それを　何でもいいです。　　さしあたり　【hinagata】としておきましょう。　　エル　そこまではできたわね。
　　　　

クッピー　こんにちは　ねねね　最近　HTML+TIMEを使ったひな形　配信でも多いでしょう。　　クッピー　私もあれ　やってみたいのだけど、私にも出来るかしら？　

(゜ー゜)(。_。)ウンウン　私もね　そんなに　HTML+TIMEを使ってのひな形　わかっているわけじゃないのよ　　でも　私がわかる範囲だったら　エルにも教えることができるかな　　だから　そんなに期待しないで　参考程度に聞いてくださればいいかな
それに　メンバーの桂ちゃんも　また　難しくなったら　mairryさんも　協力してくれるそうだから　エル　私と一緒に　TIME　覚えていこう。

第8章　HTML+TIMEを使ってのひな形