>> HTML講座 >> 文字をいじってみよう!

4. |
文字をスクロールさせたい!  |
|
これも珍しい動的なタグだね。
文字をスクロールさせたい時は次のタグを使うんだ。
| <MARQUEE ■>〜</MARQUEE> |
・・・・・マーキー |
|
|
■・・・オプション
|
文字をスクロールさせる時、文字をマーキーというものの中で動かすんだ。
マーキーとは文字を動かす箱と考えてね。
←これがマーキーという箱
この中に文字を入れて、中で動かすんだ。
そして、この箱の大きさや、文字の動きを決定するためにたくさんのオプションがあるんだ。
〜〜オプション〜〜
↓まずこれでどのようなマーキー(箱)の中をスクロールさせるかを決めよう。
| 《マーキーの形を決定する》 ALIGN=top(上) , middle(真ん中) , bottom(下)
HEIGHT=ピクセル数または%
WIDTH=ピクセル数または%
HSPACE=ピクセル数
VSPACE=ピクセル数 |
マーキーの位置
マーキーの高さ
マーキーの幅
マーキーの左右の余白
マーキーの上下の余白 |
↓次はマーキーの中を文字がどのように動くかを決定しよう。
| 《動きを決定する》 BEHAVIOR=scroll , slide , alternate
DIRECTION=left , right |
マーキーの動き方
スクロールの方向 |
ここで少し動きに関しての説明をするね。
[BEHAVIOR]
scroll
・・・・ マーキーの片方から文字が出てきてページを横切っていく。反対側まで行くと再び反対側から文字が流れてくる。(デフォルト)
slide
・・・・ マーキーの片方から文字が出てきてページを横切っていく。反対側まで行くとそこで文字は停止する。
alternate
・・・・ マーキーの中を左右にゆれて動く。
[DIRECTION]
up
・・・・ 下から上にスクロール。
down
・・・・ 上から下に横切る。
left
・・・・ 右から左に横切る。(デフォルト)
right
・・・・ 左から右に横切る
↓次は文字の動く時間や回数を決定しよう。
| 《回数と時間を決定する》 LOOP=回数 , -1 , infinite
SCROLLDELAY=秒数
SCROLLAMOUNT=ピクセル数 |
マーキーの回数
再描画までの秒数(速さ)
再描画までの距離(速さ) |
ここで回数と時間に関しての説明をするね。
LOOP
・・・・ これは文字が流れる回数のことだね。3とすれば3回文字が流れるし、10とすれば10回文字が流れるね。では無限にずっと文字を流したい場合はどうしたらいいだろう。その時に-1やinfiniteを使うんだ。どちらを使っても一緒だよ。
SCROLLDELY
・・・・ これは再描画までの秒数を表わしてるんだ。といってもピンとこないかもしれない。文字を動かすとはどういうことかというと、パラパラ漫画と同じで、あるところに文字を書いて1度消して少しずらしてまた文字を書くんだね。これの繰り返しで文字が動いているように見えるんだ。右にかっこで”速さ”って書いてあるね。つまり、再描画までの秒数を決定する。結局文字の速さを決定していることになるんだ。秒数を大きくすると遅くなって、小さくすると速くなるよ。
SCROLLAMOUNT
・・・・ 上と同じで次は1度消してから次に描くところまでの距離を指定するんだ。1度消えて次に描かれるまでの距離が長いと一度でたくさん動くことになるよね。逆に1度消えて次に描かれるまでの距離が短いとあまり進まないね。このようにしてここでも速さを決定するんだ。距離を大きくすると速くなって、小さくすると遅くなるよ。
↓最後に背景の色を指定しよう。
| 《背景の色を決定する》 BGCOLOR=■
■・・・#RRGGBB法、色名指定 |
マーキーの背景色 |
これは今までの背景色指定法と同じだね。
これを指定しない場合は背景は透過(透き通る)される。 |
| SOURCE
|
<HTML>
<HEAD>
<TITLE>マーキー</TITLE>
</HEAD>
<BODY>
<MARQUEE ALIGN=top BEHAVIOR=scroll LOOP=-1 SCROLLDELY=10 SCROLLAMOUNT=5 BGCOLOR=aqua>
ほらね、このように文字がスクロールするよ。いろいろ変えて試してみよう!
</MARQUEE><P>
<MARQUEE DIRECTION="up" HEIGHT="50" WIDTH="200" ALIGN=top BEHAVIOR=scroll LOOP=-1 SCROLLDELY=20 SCROLLAMOUNT=1 BGCOLOR=aqua>
ほらね、このように文字が縦にもスクロールするよ。いろいろ変えて試してみよう!
</MARQUEE>
</BODY>
</HTML> |
オプションについてはたくさんあるんだ。
いろいろ組み合わせて自分の思った動きにしてやるといいね。
文字を点滅させたい!
改行しないで表示したい!
|