<MARQUEE>文字をスクロール(流れ)させる

<MARQUEE>タグはIEが独自に追加したタグで、文字を好きな方向へスクロール(流れ)させる事ができます。 <MARQUEE>~</MARQUEE>で囲んだ文字は、デフォルトの状態では右から左へスクロールし、属性を指定する事でスクロールの方向、速度、繰返しなどを細かく設定することができます。

また文字だけでなくIE4.0以降では画像のスクロールも可能です。 ただし<MARQUEE>に対応してないブラウザではスクロールされることはなく、囲んだ文字が左または右に寄せられ表示されます。 ちなみパソコン向けのサイトでは現在ほとんど利用されていません。

<MARQUEE>と同様のスクロールをさせたい場合は「jQuery」を利用することが多いようです。

使用した時の例

<marquee>デフォルト(設定なし)</marquee>
<marquee direction="left">右から左(初期値)</marquee>
<marquee direction="right">左から右</marquee>
<marquee direction="up">左から右へ</marquee>
<marquee behavior="scroll">スクロール(初期値)</marquee>
<marquee behavior="slide">端で停止</marquee>
<marquee behavior="alternate">端から端まで往復</marquee>
<marquee scrollamount="9">スクロールの速さ</marquee>
<marquee scrolldelay="110">遅延時間</marquee>
<marquee width="50%">スクロール幅(50%)</marquee>
<marquee bgcolor="#D2CAEC">背景色</marquee>
<marquee bgcolor="#D2CAEC" direction="down">複数の属性を設定</marquee>

ブラウザ上の表示例

デフォルト(設定なし) 右から左(初期値) 左から右 左から右へ スクロール(初期値) 端で停止 端から端まで往復 スクロールの速さ 遅延時間 スクロール幅(50%) 背景色 複数の属性を設定

属性

direction="スクロール方向" スクロールの方向を設定
  • left:右から左
  • right:左から右
  • down:上から下
  • up:下から上
behavior="動作" スクロール動作の設定
  • scroll:スクロール
  • slide:端までスクロールが来ると停止
  • alternate:端から端までを往復
loop="繰返し" スクロールする回数(初期値は無限)
scrollamount="速さ" スクロールする量をpxで指定。値が大きいほど速くなる。値が小さいと速度は遅いが動きが滑らかになる(初期値はscrollamount="6")
scrolldelay="遅延" スクロールが再描画するまでの時間。ミリ秒単位で指定。値が大きいと遅く、小さいと速くなる(初期値はscrolldelay="85")
truespeed="時間" scrolldelayで設定した時間を守る。設定しない場合は60ミリ秒単位となる
bgcolor="背景色" スクロール部分の背景色
width="" スクロールの範囲(幅)を%またはpxで設定
height="高さ" スクロールの範囲(高さ)を%またはpxで設定
hspace="左右の余白" 左右の余白をpxで設定
vspace="上下の余白" 上下の余白をpxで指定

対応ブラウザなどのデータ

形式 <marquee>~</marquee> 分類 ブロックレベル要素
開始タグ 必須 終了タグ 必須
データバインド datafld / dataformatas / datasrc
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

HTML5では採用されていません。<MARQUEE>と同様のスクロールにしたい場合はcssの「marquee」などを利用しましょう。