【 ひな形の応用編(4) 】

9.動く「ひな形」の作り方(1)

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


(1) 背景(海底)の上を画像(魚)が「左へ動くひな形」を作ります。
    ※ マーキー(MARQUEE)を使って動かします。
    (下記の画像をクリックするとイメージを表示します。)



(2) 下記Html文の赤枠様に<MARQUEE direction=left>と
    指定し<IMG src="画像(例:fish1.gif)">を指定すると
    指定の画像が左へ動きます。
   (その他 右:right 上:up 下:down の指定が可能です。)



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

   < 背景:kaitei.jpg >  


   < 動く画像:fish2.gif >


(4) 背景(空)の上を画像(ふうせん)が「上へ動くひな形」を作ります。
    ※ マーキー(MARQUEE)を使って動かします。
    (下記の画像をクリックするとイメージを表示します。)
   


(5) Html文の赤枠の<MARQUEE direction=up・・・・・>と
    指定します。
    <DIV style ・・・・・left:150px; top:30px;>は、
   メッセージの位置です。画像の大きさにより調整します。 



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

   < 背景:bsky.gif >                < 動く画像:fuusen2.gif >
  



(7) 背景(星空)の上に動画像(スターアニメ)と文章を   
    横に並べる「ひな形」を作ります。
    ※ マーキー(MARQUEE)を使って動かします。
   (下記の画像をクリックするとイメージを表示します。)



(8) 下記Html文の赤枠様に<MARQUEE・・・・><IMG・・・>、
    文章を指定すると画像(例:スターアニメ)と文章(例:こんにちは)が
    左から右へ動き、停止し横並びで表示されます。



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

   < 背景:starsky.gif >   < 画像:stara.gif >
       


(10) 上下の横に画像を並べる「ひな形」を作ります。       
     上の画像(例:アヒル)左から右へ動き、停止し横並びで
     表示されます。
     ※ マーキー(MARQUEE)を使って動かします。
     (下記の画像をクリックするとイメージを表示します。)



(11) 下横画像ひな形に上記の(8)〜(9)項の画像を
     横に並べるHTML文を組み合わせます。
     文字の位置(縦、横)は0pxとします。
     尚、メールを作成する時のメッセージ作成画面で
     メールの1行目を削除して下さい。



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

   < 上部画像:ahirugrp.gif >

   < 下部画像(背景):ahiru.gif >


 
 HTML文のサンプルは下記の(12)項にあります。
   「ひな形の作り方2(Html文の作成)」を参照して下さい。

 注意 : 応用編(4)の動く「ひな形」は「ひな形として保存」では
      保存できません。





                           




(12) SAMPLE  

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

<<< 横動画像のHtml文 >>>

<! --- HMM〜Sige html Sample --- >
<HTML>
<HEAD>
<MARQUEE direction=left>
<IMG src="fish1.gif"></MARQUEE>
<STYLE>
BODY {
font-family:         MS ゴシック;
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>



<<< 縦動画像の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>
画像がUPする「ひな形」です。<BR>
☆と☆の間に文章を書いて下さい。
</FONT><BR><BR>
<FONT color=#00ffff>     ☆<BR>
</FONT>
<BR></DIV>
<STYLE>
BODY {
font-family:         MS ゴシック;
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>



<<< 連続動画像の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:         MS ゴシック;
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>

    
<<< 上下横画像のHtml文 >>>  


<! --- HMM〜Sige html Sample --- >
<HTML>
<HEAD>
<MARQUEE behavior=slide>
<IMG src="ahirugrp.gif">
</MARQUEE>
<STYLE>
BODY {
font-family:         MS ゴシック;
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>

           





                          

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