HOME >> HTML > テキストをスクロールさせる

point テキストをスクロールさせる

<MARQUEE>〜</MARQUEE>
テキストをスクロールさせるには、<MARQUEE>タグでスクロールさせたいテキストを囲みます。このタグにはいろんな属性を指定できますが、何も指定しない場合は右から左にスクロールを繰り返します。<MARQUEE>タグはInternet Explorerのみしか使えませんでしたが、Netscape7.0やOpera7.0などのブラウザはこれに対応しています。なお、テキストだけでなく画像もスクロールさせることが出来ます。
注意点として、<MARQUEE>タグに未対応のブラウザで見た場合、テキストはスクロールしないで、止まったまま表示されます。
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

テキストがスクロールします

オヤジ

ソース

<MARQUEE>テキストがスクロールします</MARQUEE>

<MARQUEE><IMG src="oyaji.gif" alt="オヤジ"> </MARQUEE>

point スクロールのパターンと方向を指定する

<MARQUEE behavior="scroll">〜</MARQUEE>など
<MARQUEE direction="left">〜</MARQUEE>など
<MARQUEE>タグにbehavior属性をつけることで、スクロールのパターンを変える事が出来ます。
値に"scroll"を指定すれば、一方から他方へスクロールします。(右から左へなど・・・) 何も指定しない場合は、この"scroll"の動きになります。 次に、値に"slide"を指定すれば、一方からテキストが出てきて、他方で止まります。(右側から出てきて、左側で止まるなど) そして、値に"alternate"を指定すると、テキストが往復します。(左右を行ったり来たり)

また、<MARQUEE>タグに、direction属性を付けることで、スクロールする方向を指定することが出来ます。 テキストが向かう方向を、left(左),right(右),up(上),down(下)のいずれかで指定します。
なお、何も指定しない場合(デフォルト)は、leftとなります。

サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

テキストがスクロールします

テキストが左右に往復します

スクロールが左側で停止します

♦注意 slideの動きを見たい場合は更新ボタン を押して下さい。

ソース

<MARQUEE behavior="scroll">テキストがスクロールします</MARQUEE>

<MARQUEE behavior="alternate">テキストが左右に往復します</MARQUEE>

<MARQUEE behavior="slide">スクロールが左側で停止します</MARQUEE>

サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

左方向にスクロールします

右方向にスクロールします

下から上にスクロールします上から下へスクロールします
ソース

<MARQUEE direction="left">左方向にスクロールします</MARQUEE>

<MARQUEE direction="right">右方向にスクロールします</MARQUEE>

<MARQUEE direction="up">下から上にスクロールします</MARQUEE>

<MARQUEE direction="down">上から下へスクロールします</MARQUEE>

point スクロールの速さを指定する

<MARQUEE scrolldelay="時間">〜</MARQUEE>
<MARQUEE scrollamount="距離">〜</MARQUEE>
<MARQUEE>タグに、scrolldelay属性を付けることで、再描画までの時間を指定することが出来ます。 テキストがスクロールするという事は、テキストが一定方向に同じテンポで徐々に移動する、ということですよね。 そのテンポを指定するのが、scrolldelay属性です。

移動時間の指定は,1000分の1秒単位で設定します。 数値が小さいほど再描画までの時間が短いので、速くスクロールします。注意点として、数値を60未満にする場合はtruespeed属性を付けないと、数値を5に指定しても60で指定された場合と同じ速さになってしまいます。
なお、何も指定しない場合は85です。

そして、<MARQUEE>タグにscrollamount属性を付ければ、スクロールする距離を変えることが出来ます。数値はピクセルで指定します。ピクセル値を大きくすると移動する距離が長くなるので、速くスクロールします。何も指定しない場合は6となります。

サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

scrolldelay="85"です(標準)

scrolldelay="300"です

scrolldelay="10"です

scrollamount="6"です(標準)

scrollamount="1"です

scrollamount="30"です

ソース

<MARQUEE scrolldelay="85">scrolldelay="85"です(標準)</MARQUEE>

<MARQUEE scrolldelay="300">scrolldelay="300"です</MARQUEE>

<MARQUEE scrolldelay="10" truespeed>scrolldelay="10"です</MARQUEE>

<MARQUEE scrollamount="6">scrollamount="6"です(標準)</MARQUEE>

<MARQUEE scrollamount="1">scrollamount="1"です</MARQUEE>

<MARQUEE scrollamount="30">scrollamount="30"です</MARQUEE>

point スクロールの回数を指定するなど

<MARQUEE loop="回数">〜</MARQUEE>
<MARQUEE width="ピクセル値または%">〜</MARQUEE>など
loop属性をつけることで、スクロールの回数を指定することが出来ます。 何も設定しない場合は、無限にスクロールをします。この他にも<MARQUEE>タグに指定できる属性がありますが、下記の説明とサンプルをみて参考にして下さいね。
その他の属性について
width="ピクセル値、または%" スクロールする幅
height="ピクセル値、または%" スクロールする高さ
hspace="ピクセル値" スクロールする箇所の左右の余白
vspace="ピクセル値" スクロールする箇所の上下の余白
bgcolor="カラー名、またはRGB値" スクロールする箇所の背景色
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

テキストがスクロールします

テキストがスクロールします

ソース

<MARQUEE width="300" bgcolor="#ff9933">テキストがスクロールします</MARQUEE>

<MARQUEE width="300" height="100" bgcolor="#87cefa" direction="up" hspace="100" scrollamount="2">テキストがスクロールします</MARQUEE>

Copyright ©2001〜2016 まさぼ〜 All Right Reserved