MARQUEE ～概要と属性

MARQUEEの概要

MARQUEE（マーキー）とは？

MARQUEEは Internet Explorer が独自拡張したHTMLの要素です。JavaScrip などを使わなくても簡単に文字を動かすことができます。

例えばこんな感じに…

※ MARQUEEは Internet Explorer の独自拡張であり、一部のブラウザでのみ動作します。
…と思っていたら最近では携帯系のブラウザをはじめ Netscape 7.0 などのMozilla系ブラウザ及び Opera 7.2 でもサポートされました。しかし、機能や動作には違いがあるようです。

※ ここでのサンプルは Internet Explorer での表示を基に作成していますので他のブラウザでは表示が乱れるかもしれません。

MARQUEEに頼らずに動く文字を実現したい場合にはこちらをご覧ください。→ 動く文字JavaScript編

MARQUEE要素の書式

MARQUEEに属性を指定すると動きをいろいろと変化させることができます。詳しくは下記をご覧ください。

MARQUEEの属性～実験室

では実際にMARQUEEに属性を指定して動きを見てみましょう。

※ 以下の属性は Internet Explorer でサポートされたものです。ブラウザやバージョンによっては動作しない属性もあるかもしれません。

※ 属性の値が「初期値」の場合にはその属性指定を省略した場合と同じになります。

属性指定なし

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE>マーキーだよん！</MARQUEE>

→参考：JavaScriptでは…

LOOP（繰り返す回数）

繰り返す回数を指定します。

※ 動作を最初から見たい場合はブラウザの更新ボタン（ツールバーにある）を押してください。

LOOP="-1" または LOOP="infinite"（初期値）

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE loop="-1">マーキーだよん！</MARQUEE>

LOOP="2"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE loop="2">マーキーだよん！</MARQUEE>

DIRECTION（スクロールの方向）

スクロールの方向を指定します。

DIRECTION="left"（初期値）

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE direction="left">マーキーだよん！</MARQUEE>

DIRECTION="right"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE direction="right">マーキーだよん！</MARQUEE>

DIRECTION="up"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE direction="up">マーキーだよん！</MARQUEE>

DIRECTION="down"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE direction="down">マーキーだよん！</MARQUEE>

BEHAVIOR（スクロールの方法）

スクロールの方法を指定します。

※ 動作を最初から見たい場合はブラウザの更新ボタン（ツールバーにある）を押してください。

BEHAVIOR="scroll"（初期値）

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE behavior="scroll">マーキーだよん！</MARQUEE>

BEHAVIOR="slide"

端まで進んで停止します。

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE behavior="slide">マーキーだよん！</MARQUEE>

BEHAVIOR="alternate"

行ったり来たりします。

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE behavior="alternate">マーキーだよん！</MARQUEE>

→参考：JavaScriptでは…

SCROLLAMOUNT（一回のスクロール量）

一回のスクロール量をピクセル単位で指定します。

SCROLLAMOUNT="2"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE scrollamount="2">マーキーだよん！</MARQUEE>

SCROLLAMOUNT="6"（初期値）

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE scrollamount="6">マーキーだよん！</MARQUEE>

SCROLLAMOUNT="12"

※ 100, 500 と更に大きくすることも可能ですが、目に悪いですよ ^ ^;;
あまり大きくするとほぼ点滅状態になり、更に大きくすると表示されなくなります。

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE scrollamount="12">マーキーだよん！</MARQUEE>

SCROLLDELAY（スクロールの間隔（速さ））

スクロールの間隔（速さ）をミリ秒単位（1秒 = 1000ミリ秒）で指定します。

SCROLLDELAY="250"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE scrolldelay="250">マーキーだよん！</MARQUEE>

SCROLLDELAY="85"（初期値）

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE scrolldelay="85">マーキーだよん！</MARQUEE>

SCROLLDELAY="60"

※これ以上値を小さくしても速さは変化しません。

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE scrolldelay="60">マーキーだよん！</MARQUEE>

SCROLLDELAY="30" TRUESPEED

TRUESPEEDの指定を加えると更に速くなります。速すぎは目に悪いです… ^ ^;;

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE scrolldelay="30" truespeed>マーキーだよん！</MARQUEE>

BGCOLER（背景色）

背景色を指定します。※ CSSプロパティの background で代用可能です。

BGCOLER="#FFCCFF"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE bgcolor="#FFCCFF">マーキーだよん！</MARQUEE>

WIDTH（横幅）

横幅をパーセントまたはピクセル単位で指定します。※ CSSプロパティの width で代用可能です。

WIDTH="60%"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE width="60%">マーキーだよん！</MARQUEE>

WIDTH="200"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE width="200">マーキーだよん！</MARQUEE>

HEIGHT（縦幅）

HEIGHT（縦幅）をピクセル単位で指定します。※ CSSプロパティの height で代用可能です。

HEIGHT="50"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE height="50">マーキーだよん！</MARQUEE>

HEIGHT="40" DIRECTION="upまたはdown"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE height="40" direction="up">マーキーだよん！</MARQUEE>

HEIGHT="200"（初期値） DIRECTION="down"

※ DIRECTION="upまたはdown"を指定した場合にはHEIGHT="200"が初期値になります。

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE height="200" direction="down">マーキーだよん！</MARQUEE>

HEIGHT="300" DIRECTION="up"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE height="300" direction="down">マーキーだよん！</MARQUEE>

HSPACE（水平方向の余白）

水平方向の余白をピクセル単位で指定します。※ CSSプロパティの margin で代用可能です。

HSPACE="50"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE hspace="50">マーキーだよん！</MARQUEE>

VSPACE（垂直方向の余白）

垂直方向の余白をピクセル単位で指定します。※ CSSプロパティの margin で代用可能です。

VSPACE="30"

◆実行結果: マーキーだよん！
◆ソース内容: <MARQUEE vspace="30">マーキーだよん！</MARQUEE>

MARQUEEの概要と属性