13×13 240b  私も利用しています。  13×13 240b
≪ カツのGIFアニメ HOME   サイトマップ

   ■ 手軽に画像を動かす方法! <marquee> マーキータグ


  マーキータグを使えば、わざわざGIFアニメを作らなくても、画像をひとつ用意するだけで
  手軽に動かすことができます。ここでは、その<マーキータグ>を紹介しますので、参考に
  してみてください。
  画像を工夫すると、面白いのができますよ。

  <marquee>〜</marquee> このタグの間に動かしたい画像や文字を記述します。
  ここでは画像で紹介してますが、画像の代わりに文字を使ってもOKです。画像と文字、
  両方使う事もできますよ。
  そして<marquee 〜>の所に動きや、その速さ、表示範囲を指定したタグを記述します。

  下にある見本を参考にしてください。  


   これは、スタンダードなパターン。右から左に動きます。

<marquee>
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>



   上の逆パターン、左から右。
<marquee direction="right">
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>



   スクロールの回数を指定できます。上の設定は2回、見えない時はページを更新
   してみてください。2回走って居なくなっちゃいます。
   行ったり来たりにも使えます。指定回数動いた後、居なくならずに止まります。
<marquee loop="2" >
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>



   表示させる範囲を指定して。上の範囲設定は、"200" です。
<marquee width="表示させる範囲">
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>

<marquee width="幅">を<marquee direction="right" width="幅">にすると、 画像が左から右に動きます。



   行ったり来たり!
<marquee behavior="alternate">
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>



   行ったり来たりの範囲指定バージョン。上の範囲設定は、"200" です。
<marquee behavior="alternate" width="表示させる範囲">
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>



   はや〜い! F1なみです。上の速さの設定は、"30" です
<marquee scrollAmount="速さ(数字)">
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>



   下から上へ。 この上昇速度の設定は、"5" です。
<marquee direction="up" scrollAmount="上昇する速度(数字)" width="表示する横幅" height="表示する縦幅">
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>

direction="up"の所を、direction="down"にすると、上から下に変わります。



   上下に行ったり来たり!
<marquee direction="up" behavior="alternate" width="表示する横幅" height="表示する縦幅">
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>



   背景色も指定できます。
<marquee bgcolor="色コード">
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>



   マウスを乗せると、止まります。
<marquee onmouseover=this.stop() onmouseout=this.start()>
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>



   マーキータグを組み合わせると?
   (右から左と上下に行ったり来たりの組み合わせです。)
<marquee behavior="alternate" direction="up" height="表示する縦幅">
<marquee>
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>
</marquee>



  

   マーキータグを組み合わせ2
   (右から左と上から下を速度調節した組み合わせです。)
<marquee direction="down" scrollAmount="3" height="表示する縦幅">
<marquee>
<img src="動かしたい(表示する)画像" width="画像の横幅" height="画像の高さ">
</marquee>
</marquee>



   いかがですか? 面白いでしょ! タグを組み合わせてオリジナルの動きを作って
   あなたのHPで動かしてみませんか。下のページも参考にしてくださいね!

                   カツ流〜 素材の貼り付け方!@
                   カツ流〜 素材の貼り付け方!A
                   カツ流〜 素材(GIFアニメ)の作り方! 








67×15 245b 




51×44 642b HP・メール素材 カツのGIFアニメ
KATU`S GIF ANIMATION
Copyright©2004 katu All right reserved.