|
マーキータグを使えば、わざわざGIFアニメ素材を作らなくても、素材をひとつ用意するだけで
簡単に素材を動かすことができます。タグの組み合わせで上下・左右・斜めに動かすことがで
きるようになります。このページでは、その<マーキータグ>を紹介します。
<marquee>～</marquee> このタグの間に動かしたい素材や文字を記述します。
ここではGIF素材で紹介してますが、GIF素材の代わりに文字を使ってもＯＫです。
GIF素材と文字、両方組み合わせて使う事もできますよ。
動かし方を工夫したい場合は最初の<marquee>の所に動きや、その速さ、表示範囲を指定
したタグを記述するのがポイントです。
素材とタグの組み合わせを工夫すると、面白いのができますよ。
下にある見本を参考にしてあなたのページで動かしてください。
これは、一番簡単なパターン。
<marquee>～</marquee>だけで使えばページの右から左に動きます。
<marquee>
<img src="動かしたい（表示する）画像" width="画像の横幅" height="画像の高さ">
</marquee>
|
上の逆パターン、左から右。頭の<marquee>にdirection="right"を書き加えます。
<marquee direction="right">
<img src="動かしたい（表示する）画像" width="画像の横幅" height="画像の高さ">
</marquee>
|
スクロールの回数を指定する事もできます。loop="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>
|
はや～い！ Ｆ１なみです。上の速さの設定は、"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>
|
マーキータグを組み合わせ２
（右から左と上から下を速度調節した組み合わせです。）
<marquee direction="down" scrollAmount="3" height="表示する縦幅">
<marquee>
<img src="動かしたい（表示する）画像" width="画像の横幅" height="画像の高さ">
</marquee>
</marquee>
|
いかがです？ 面白いでしょ！ タグを組み合わせてオリジナルの動きを作って
あなたのＨＰで動かしてみませんか。
一部のブログなどマーキータグが使えない所もありますので、動かない、表示されないなど
問題があった場合は借りているブログ・サーバーのヘルプを確認してください。
下の解説ページもぜひ参考にしてくださいね！
|
私も利用しています。
