きなこの　愉快な　楽天日記枠＆miniﾀｸﾞ講座

■マーキー

★文字＆画像を動かしてみましょう。NO１

☆文字＆画像を左にスクロールさせよう

< marquee > 　ここに文字＆画像 < /marquee >

ここに文字＆画像

・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:

★マーキーに色を付けてみる

< marquee bgcolor="#99ffff" > ここに文字＆画像 < /marquee > 

ここに文字＆画像

☆文字＆画像を右にスクロールさせよう

< marquee direction=right width=70% scrollamount=5 > 　ここに文字＆画像　 < /marquee >

ここに文字＆画像

・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:

★マーキーに色を付けてみる

< marquee direction=right bgcolor="#99ffff" width=70% scrollamount=5 > 　ここに文字＆画像　 < /marquee >

ここに文字＆画像

このタグには、幅指定と、速度指定が書き込まれています。
これと同じように他のタグにも、幅や、速度などを指定できます。
試してみてくださいね

幅と速度に関しては下のほうに説明をしてあります。

☆文字＆画像を左右にスクロールさせよう

< marquee behavior=alternate > 　ここに文字＆画像　 < /marquee >

ここに文字＆画像

・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:

★マーキーに色を付けてみる

< marquee behavior=alternate bgcolor="#99ffff" scrollamount="5" > 　ここに文字＆画像　 < /marquee >

ここに文字＆画像

このタグには、マーキーに色を付けて、書体、文字サイズ、文字色、速度を指定しました。
これと同じように他のタグにも、書体、サイズ、文字色などを指定できます。
試してみてくださいね

速度に関しては下のほうに説明をしてあります。

☆文字＆画像の大きさで高さを決めよう

< marquee bgcolor="#99ffff" width="300px" > < img src="http://画像アドレス" > < /marquee >

☆文字＆画像をターンさせよう

< marquee behavior="alternate" direction="right" scrollAmount="8" width="500px" height="100px" > < IMG SRC="http://画像アドレス" > < /marquee >

behavior="alternate" ・スクロールが端に行くたびに方向を反転します
direction="right" ・・・・・・・・・・・・・・・・・・・・・・・・・・スクロールの方向
scrollAmount="8" ・・・・スクロールの速度・数字が小さいほどゆっくり
width="100px" ・・・・・画像アドレスに表示されている数字より大きくする
height="100px" ・・・・・画像アドレスに表示されている数字より大きくする

☆文字＆画像を上にスクロールさせよう

< marquee direction="up" height="30%" scrollamount="10" > 　ここに文字＆画像　 < /marquee >

ここに文字＆画像

このタグには、高さと速度指定が書き込まれています。
これと同じように他のタグにも、高さや速度をなどを指定できます。
試してみてくださいね

高さや速度に関しては下のほうに説明をしてあります。

☆文字＆画像を下にスクロールさせよう

< marquee direction=down height=30% > 　ここに文字＆画像　 < /marquee >

ここに文字＆画像

☆文字＆画像を上下にスクロールさせよう

< marquee direction=up behavior=alternate > 　ここに文字＆画像　 < /marquee >

ここに文字＆画像

☆文字＆画像を右上から左下へスクロールさせよう

< marquee direction="down" > < marquee direction="left" > 　ここに文字＆画像　 < /marquee > < /marquee >

ここに文字＆画像

☆文字＆画像を左下から右上へスクロールさせよう

< marquee direction="up" > < marquee direction="right" > 　ここに文字＆画像　 < /marquee > < /marquee >

ここに文字＆画像

☆文字＆画像のスクロールを止めてしまおう

< marquee behavior="slide" > 　ここに文字＆画像　 < /marquee >

ここに文字＆画像

これを見る時には端っこで止まってる状態かも。。（笑）
ちゃんと動いていて左で止まるんですよ。

☆文字＆画像をループして消してみよう

< marquee loop="3" > 　ここに文字＆画像　 < /marquee >

ここに文字＆画像

★【loop="○"】で流す回数を指定します。
これは、３回ループすると消えます
ここを見た時には、文字＆画像は消えてしまってるかも
でも、ちゃんと３回スクロールして消えたんですよ（笑）

★決まりごと

凄く当たり前の事です・・。（笑）

上に動かす場合・・・UP
下に動かす場合・・・down
右から左・・・left
左から右は・・・right
direction　とは、方向を意味します。

★速度を変える

●動きの速度を変えるには [scrollamount] で指定します。

●[scrolldelay]でも構いません。
その時は、数字が大きいとユックリで少ないと速くなります。

< marquee scrollamount="1" > 移動ピクセル数を1にすると遅くなる < /marquee >

移動ピクセル数を1にすると遅くなる。

< marquee scrollamount="80" > 移動ピクセル数を80にすると早くなる < /marquee >

移動ピクセル数を80にすると早くなる

★横幅を変える

●横幅を変えるには[width]で指定します。

< marquee direction="right" width="200px" > 表示する横幅が200 < /marquee >

表示する横幅が200

★高さをを変える

●高さを変えるには[height]で指定します。

< marquee direction=down height=20% > 表示する高さが20% < /marquee >

表示する高さが20%

★文字＆画像を動きまわらせよう（おまけ）

< DIV align=center > < MARQUEE behavior=alternate direction=up height=100px width=90% > < MARQUEE behavior=alternate > ここに文字＆画像を ここに文字＆画像を < /MARQUEE > < /MARQUEE > < /DIV >

ここに文字＆画像を
ここに文字＆画像を

★左右点滅（おまけ）

< center > < MARQUEE behavior=alternate scrollAmount=800 width=90% > 左右点滅（文字＆画像） < /MARQUEE > < /center >

左右点滅（文字＆画像）

:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:

< center > < MARQUEE behavior=alternate scrollAmount=800 width=100% > < img src="http://画像アドレス" > B>>☆彡 < /MARQUEE > < /center >

☆彡

・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:

★おまけのおまけ★

< center > < MARQUEE behavior=alternate scrollAmount=200 width="100px" > < img src="http://画像アドレス" > ☆彡 < /MARQUEE > < /center >

☆彡

楽天ではジャバスクリプトが使えないので
点滅は作れません。
< marquee > タグを早く動かす事で、
点滅をしてるように見せています。
数値を変えて試してみてくださいね～。