資料の一覧へ

文字を動かす−marquee

marqueeについて

<marquee> </marquee>を利用すると、間に挟まれた文字(画像)が動いて表示されます。

例:<marquee>文字を動かす</marquee>
文字を動かす

文字だけでなく、画像を間に挟むことも可能です。
例えば、(tree1_04.gif)を挟んで
<marquee><img src="tree1_04.gif"></marquee> と記述すると、↓のようになります。

注意事項

オプションの指定

 オプション内容開始タグサンプル
動き方behavior scroll
(初期設定)
端に着いたら元に戻って移動を繰り返す<marquee behavior="scroll">
slide端に着いたら停止する<marquee behavior="slide">
alternate端に着いたら反対に向かって移動を繰り返す<marquee behavior="alternate">
背景色bgcolor="色名"移動する背景に色をつける<marquee bgcolor="green">
方向direction left
(初期設定)
左→右<marquee direction="left">
right右→左<marquee direction="right">
down上→下<marquee direction="doown">
up下→上<marquee direction="up">
高さheight=数値移動範囲の高さを指定
(文字の大きさは変わらない)
<marquee height=70>
(縦方向の高さの調整に利用)
回数loop=数値移動する回数を指定(注)<marquee loop=5>
scroll…移動後文字が表示されなくなる
alternateまたはslide…移動後文字が停止した状態で表示される。
速度scrollamount=数値移動の速さを指定<marquee scrollamount=1>
<marquee scrollamount=50>
余白hspace=数値移動範囲の横に余白をつける<marquee hspace=20>
vspace=数値移動範囲の縦に余白をつける<marquee vspace=20>

組み合わせで、このような動きも可能です。
この例は、上への動き+往復を指定したmarqueeに、左への動きを指定したmarqueeを組み合わせています。
<marquee behavior="alternate" direction="up"><marquee direction="left"><img src="tree1_04.gif"></marquee></marquee>