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

<marquee>〜</marquee>

テキストをスクロールさせるには、<marquee>タグでスクロールさせたいテキストを囲みます。

このタグにはいろんな属性を指定できますが、何も指定しない場合は右から左にスクロールを繰り返します。<marquee>タグはInternet Explorerのみしか使えませんでしたが、Netscape7.0やOpera7.0などのブラウザはこれに対応しています。

なお、テキストだけでなく画像もスクロールさせることが出来ます。
注意点として、<marquee>タグに未対応のブラウザで見た場合、テキストはスクロールしないで、止まったまま表示されます。

サンプル - Microsoft Internet Explorer

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

オヤジ

HTML

<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

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

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

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

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

HTML

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

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

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

サンプル - Microsoft Internet Explorer

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

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

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

HTML

<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

scrolldelay="85"です(標準)

scrolldelay="300"です

scrolldelay="10"です

scrollamount="6"です(標準)

scrollamount="1"です

scrollamount="30"です

HTML

<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

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

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

HTML

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

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

スポンサード・リンク