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

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


  マーキータグを使えば、わざわざGIFアニメを作らなくても、素材をひとつ用意するだけで
  簡単に素材を動かすことができます。タグの組み合わせで上下・左右・斜めに動かすことがで
  きるようになります。このページでは、その<マーキータグ>を紹介します。   

  <marquee>〜</marquee> このタグの間に動かしたい素材や文字を記述します。
  ここでは素材で紹介してますが、素材の代わりに文字を使ってもOKです。
  素材と文字、両方組み合わせて使う事もできますよ。
  動かし方を工夫したい場合は最初の<marquee>の所に動きや、その速さ、表示範囲を指定
  したタグを記述するのがポイントです。

  素材とタグの組み合わせを工夫すると、面白いのができますよ。
  下にある見本を参考にしてあなたのページで動かしてください。  


   これは、一番簡単なパターン。
   <marquee>〜</marquee>だけで使えばページの右から左に動きます。

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



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



   スクロールの回数を指定する事もできます。loop="2"の数字で回数を指定します。
   上の設定は2なので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で動かしてみませんか。
  一部のブログなどマーキータグが使えない所もありますので、動かない、表示されないなど
  問題があった場合は借りているブログ・サーバーのヘルプを確認してください。
  下の解説ページもぜひ参考にしてくださいね!










67×15 245b 




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