【　ひな形の応用編（４）　】

９．動く「ひな形」の作り方（１）

　　横画像ひな形、縦画像ひな形等で、アニメーション画像を使えば
　　動くひな形ですが下記からは、ＨＴＭＬ文での動くひな形の
　　作り方を解説します。（アニメーション画像も一部使用）

（１）　背景（海底）の上を画像（魚）が「左へ動くひな形」を作ります。
　　　　※　マーキー（ＭＡＲＱＵＥＥ）を使って動かします。
　　　　（下記の画像をクリックするとイメージを表示します。）



（２）　下記Ｈｔｍｌ文の赤枠様に＜ＭＡＲＱＵＥＥ　ｄｉｒｅｃｔｉｏｎ=ｌｅｆｔ＞と
　　　 指定し＜ＩＭＧ　ｓｒｃ="画像（例：ｆｉｓｈ１.gif）"＞を指定すると
　　　 指定の画像が左へ動きます。
　　　（その他　右：ｒｉｇｈｔ　上：ｕｐ　下：ｄｏｗｎ　の指定が可能です。）



（３）　上記の「ひな形」は下記の画像を使用しました。

　　　＜　背景：ｋａｉｔｅｉ.jpg　＞　　


　　　＜　動く画像：ｆｉsh2.gif　＞


（４）　背景（空）の上を画像（ふうせん）が「上へ動くひな形」を作ります。
　　　　※　マーキー（ＭＡＲＱＵＥＥ）を使って動かします。
　　　　（下記の画像をクリックするとイメージを表示します。）
　　　


（５）　Ｈｔｍｌ文の赤枠の＜ＭＡＲＱＵＥＥ　ｄｉｒｅｃｔｉｏｎ=ｕｐ・・・・・＞と
　　　 指定します。
　　　 ＜ＤＩＶ　ｓｔｙｌｅ　・・・・・ｌｅｆｔ：150px；　ｔｏｐ：30px；＞は、
　　　メッセージの位置です。画像の大きさにより調整します。　



（６）　上記の「ひな形」は下記の画像を使用しました。

　　　＜　背景：bsky.gif　＞　　　　　　　　　　　　　　　　＜　動く画像：fuusen2.gif　＞
　　



（７）　背景（星空）の上に動画像（スターアニメ）と文章を　　　
　　　 横に並べる「ひな形」を作ります。
　　　 ※　マーキー（ＭＡＲＱＵＥＥ）を使って動かします。
　　　（下記の画像をクリックするとイメージを表示します。）



（８）　下記Ｈｔｍｌ文の赤枠様に＜MARQUEE・・・・＞<IMG・・・＞、
　　　 文章を指定すると画像（例：スターアニメ）と文章（例：こんにちは）が
　　　 左から右へ動き、停止し横並びで表示されます。



（９）　上記の「ひな形」は下記の画像を使用しました。

　　　＜　背景：starsky.gif　＞　　　＜　画像：stara.gif　＞
　　　　　　　


（１０）　上下の横に画像を並べる「ひな形」を作ります。　　　　　　　
　　　　 上の画像（例：アヒル）左から右へ動き、停止し横並びで
　　　　 表示されます。
　　　　 ※　マーキー（ＭＡＲＱＵＥＥ）を使って動かします。
　　　　　（下記の画像をクリックするとイメージを表示します。）



（１１）　下横画像ひな形に上記の（８）〜（９）項の画像を
　　　　　横に並べるＨＴＭＬ文を組み合わせます。
　　　　　文字の位置（縦、横）は０ｐｘとします。
　　　　　尚、メールを作成する時のメッセージ作成画面で
　　　　　メールの１行目を削除して下さい。



　　上記の「ひな形」は下記の画像を使用しました。

　　　＜　上部画像：ahirugrp.gif　＞

　　　＜　下部画像（背景）：ahiru.gif　＞


　　ＨＴＭＬ文のサンプルは下記の（１２）項にあります。
　　　「ひな形の作り方２（Ｈｔｍｌ文の作成）」を参照して下さい。

　注意 ： 応用編（４）の動く「ひな形」は「ひな形として保存」では
　　　　 　保存できません。





　　　　　　　　　　　　　　　　　　　 　　　　　　　




（１２）　ＳＡＭＰＬＥ　　

　　　以下はメモ張に貼り付ける　Ｈｔｍｌ文　のサンプルです。

<<<　横動画像のＨｔｍｌ文　>>>

<! --- HMM〜Sige html Sample --- >
<HTML>
<HEAD>
<MARQUEE direction=left>
<IMG src="fish1.gif"></MARQUEE>
<STYLE>
BODY {
font-family:         ＭＳ ゴシック;
font-size:           12  pt;
color:               0000ff;
margin-left:         30  px;
margin-top:          30  px;
background-position: top left;
}
</STYLE>
</HEAD>
<BODY background="kaitei.jpg">
<BODY bgcolor="ffffff">
</BODY>
</HTML>



<<<　縦動画像のＨｔｍｌ文　>>>　

<! --- HMM〜Sige html Sample --- >
<HTML>
<HEAD>
<MARQUEE direction=up scrollAmount=3 
 style="HEIGHT: 300px">
<IMG src="fuusen2.gif"></MARQUEE>
<DIV style="position:absolute;left:150px; top:30px;">
<FONT color=#00ffff>　　　　　☆<BR><BR></FONT>
<BR><FONT color=#ff0099>
画像がＵＰする「ひな形」です。<BR>
☆と☆の間に文章を書いて下さい。
</FONT><BR><BR>
<FONT color=#00ffff>　　　　　☆<BR>
</FONT>
<BR></DIV>
<STYLE>
BODY {
font-family:         ＭＳ ゴシック;
font-size:           12  pt;
color:               0000ff;
margin-left:         30  px;
margin-top:          30  px;
background-position: top left;
}
</STYLE>
</HEAD>
<BODY background="bsky2.gif">
<BODY bgcolor="ffffff">
</BODY>
</HTML>



<<<　連続動画像のＨｔｍｌ文　>>>　　

<! --- HMM〜Sige html Sample --- >
<HTML>
<HEAD>
<MARQUEE behavior=slide><BR>
　<IMG src="stara.gif">
　<IMG src="stara.gif">
　＊＊　こんにちは！！　＊＊
  <IMG src="stara.gif">
　<IMG src="stara.gif">
</MARQUEE>
<STYLE>
BODY {
font-family:         ＭＳ ゴシック;
font-size:           12  pt;
color:               ffffff;
margin-left:         30  px;
margin-top:          10  px;
background-position: top left;
}
</STYLE>
</HEAD>
<BODY background="starsky.gif">
<BODY bgcolor="ffffff">
</BODY>
</HTML>

　　　　
<<<　上下横画像のＨｔｍｌ文　>>>　　


<! --- HMM〜Sige html Sample --- >
<HTML>
<HEAD>
<MARQUEE behavior=slide>
<IMG src="ahirugrp.gif">
</MARQUEE>
<STYLE>
BODY {
font-family:         ＭＳ ゴシック;
font-size:           12  pt;
color:               0000ff;
margin-left:         0  px;
margin-top:          0  px;
background-position: bottom left;
background-repeat:   repeat-x;
}
</STYLE>
</HEAD>
<BODY background="ahiru.gif">
<BODY bgcolor="ffffff">
</BODY>
</HTML>

　　　　　　　　　　　





　　　　　　　　　　　　 　　　　　　　　　　　　　

姉妹サイト＆おすすめページ