1−2.文字(動き編)

(補足)
いろいろ、付け加えて使ってね。また、赤い文字の部分には、文字の装飾のタグやリンクタグ、画像のタグ等、他のタグを書く事も可能です。
(例)「文字が右から左」のタグと画像のタグを組み合わせる
<marquee><img src="画像のURL"></marquee>

(注1)文字の移動範囲内での操作が対象です。他の説明を参考に、上から下、下から上のタグや速さを変えるタグ等、他のタグと組み合わせる事も出来ます。下の(表1)を参考にしてみて下さいね。
(注2)速さ(数字)を大きくすると、点滅しているように見えます。文字の移動範囲と同じ数字以上の指定から、点滅しているように、見えます。
(注3)流れる回数は、往復ではなく、画面の端までで、1回に、カウントされます。なので、例えば、「2」と指定した場合は、1往復となります。
(注4)文字色を指定して、枠色を指定しないと、文字色と、枠色が同じ色に、枠色のみの指定の場合は、文字色は黒になります。
(注5) behavior="alternate" を削ると、すり抜けます。
(注6) 全ての応用に、枠を付けたい場合は、
<font style="border-style:枠の形;border-color:#枠の色;border-width:枠の太さ;height:1">全ての応用のタグ</font>
と書いてくださいね。(つまり、3−5.枠付き文字の応用です。)


枠の形をここから選んでね。
実線    :solid
二重線   :double
丸い点線  :dotted
四角い点線 :dashed
内沈み線  :inset
内浮き出し線:outset
山線    :ridge
谷線    :groove

(表1)
操作動く(タグ)止まる(タグ)
触れるonmouseover="this.start()"onmouseover="this.stop()"
離れるonmouseout="this.start()"onmouseout="this.stop()"
クリックonclick="this.start()"onclick="this.stop()"
ダブルクリックondblclick="this.start()"ondblclick="this.stop()"

赤い文字の部分を変更してコピー貼り付けで使ってね!
文字が右から左<marquee>文字</marquee>
文字が左から右<marquee direction="right">文字</marquee>
文字が右から出て左右に<marquee behavior="alternate">文字</marquee>
文字が左から出て左右に<marquee direction="right" behavior="alternate">文字</marquee>
文字が右から出て左端に止まる<marquee behavior="slide">文字</marquee>
文字が左から出て右端に止まる<marquee direction="right" behavior="slide">文字</marquee>
文字が上から下に<marquee direction="down">文字</marquee>
文字が下から上に<marquee direction="up">文字</marquee>
文字が上から出て上下に<marquee direction="down" behavior="alternate">文字</marquee>
文字が下から出て上下に<marquee direction="up" behavior="alternate">文字</marquee>
文字が上から出て下で止まる<marquee direction="down" behavior="slide">文字</marquee>
文字が下から出て上で止まる<marquee direction="up" behavior="slide">文字</marquee>
文字の移動範囲を変える(右→左)<marquee width="文字の移動範囲">文字</marquee>
文字の移動範囲を変える(左→右)<marquee direction="right" width="文字の移動範囲">文字</marquee>
文字の移動範囲を変える(上→下)<marquee direction="down" height="文字の移動範囲">文字</marquee>
文字の移動範囲を変える(下→上)<marquee direction="up" height="文字の移動範囲">文字</marquee>
クリックで文字の動きが止まる(右→左)(注1)<marquee width="文字の移動範囲" onclick="this.stop()">文字</marquee>
クリックで文字の動きが止まる(左→右)(注1)<marquee direction="right" width="文字の移動範囲" onclick="this.stop()">文字</marquee>
クリックで動きが止まり、ダブルクリックで動く(右→左)(注1)<marquee width="文字の移動範囲" onclick="this.stop()" ondblclick="this.start()">文字</marquee>
クリックで動きが止まり、ダブルクリックで動く(左→右)(注1)<marquee direction="right" width="文字の移動範囲" onclick="this.stop()" ondblclick="this.start()">文字</marquee>
カーソルが触れて文字の動きが止まる(右→左)(注1)<marquee width="文字の移動範囲" onmouseover="this.stop()">文字</marquee>
カーソルが触れて文字の動きが止まる(左→右)(注1)<marquee direction="right" width="文字の移動範囲" onmouseover="this.stop()">文字</marquee>
カーソルが触れて動きが止まり、離れて動く(右→左)(注1)<marquee width="文字の移動範囲" onmouseover="this.stop()" onmouseout="this.start()">文字</marquee>
カーソルが触れて動きが止まり、離れて動く(左→右)(注1)<marquee direction="right" width="文字の移動範囲" onmouseover="this.stop()" onmouseout="this.start()">文字</marquee>
カーソルが触れて文字の動きが止まり、クリックで動く(右→左)(注1)<marquee width="文字の移動範囲" onmouseover="this.stop()" onclick="this.start()">文字</marquee>
カーソルが触れて文字の動きが止まり、クリックで動く(左→右)(注1)<marquee direction="right" width="文字の移動範囲" onmouseover="this.stop()" onclick="this.start()">文字</marquee>
速さを変える(右→左)<marquee scrollamount="数字">文字</marquee>
速さを変える(左→右)<marquee direction="right" scrollamount="数字">文字</marquee>
往復の速さを変える(右から、出る)(注2)<marquee behavior="alternate" scrollamount="速さ" width="文字の移動範囲" style="color:#文字の色">文字</marquee>
往復の速さを変える(左から、出る)(注2)<marquee direction="right" behavior="alternate" scrollamount="速さ" width="文字の移動範囲" style="color:#文字の色">文字</marquee>
文字が右から左に?回流れて文字が消える<marquee loop="流れる回数">文字</marquee>
文字が右から左に?回流れて文字が止まる<marquee loop="流れる回数" behavior="slide">文字</marquee>
文字が右左に?回流れて文字が止まる(注3)<marquee loop="流れる回数" behavior="alternate">文字</marquee>
背景色を変える<marquee bgcolor="#背景色">文字</marquee>
背景色と文字色を変える<marquee bgcolor="#背景色" style="color:#文字の色">文字</marquee>
さらに、枠を付ける(注4)<marquee bgcolor="#背景色" style="color:#文字の色;border-style:枠の形">文字</marquee>
さらに、枠に色を付ける(注4)<marquee bgcolor="#背景色" style="color:#文字の色;border-style:枠の形;border-color:#枠色">文字</marquee>
文字動く全ての応用(左右編)(注4.5)<marquee bgcolor="#背景色" width="横幅" behavior="alternate" scrollamount="動く速さ" style="color:#文字の色;border-style:枠の形;border-color:#枠色">文字</marquee>
文字動く全ての応用(上下編)(注4.5)<marquee bgcolor="#背景色" height="縦幅" width="横幅" direction="up" behavior="alternate" scrollamount="動く速さ" style="color:#文字の色;border-style:枠の形;border-color:#枠色">文字</marquee>
文字動く全ての応用(上下左右編)(注5.6)<marquee bgcolor="#背景色" height="縦幅" width="横幅" direction="up OR down" behavior="alternate" scrollamount="上下の動く速さ"><marquee direction="left OR right" behavior="alternate" scrollamount="左右の動く速さ" style="color:#文字の色">文字</marquee></marquee>



HTMLタグに戻る