<marquee> 流れる文字を表現したい場所にスクロールエリアを生成する

<marquee>タグの説明

<marquee>は、流れる文字を表現したい場所にスクロールエリアを生成します。かつて携帯サイトで多く使われていましたが、現在は非推奨の扱いとなったため、後半にCSS（スタイルシート）での代替案を紹介します。

marquee（マーキー）という言葉は、劇場などに掲げられる看板の意味があります。これは電光掲示板などに流れる文字を再現するもので、ウェブサイトの中で目立たせたい箇所に適しています。

当初、<marquee>はInternet Explorerが独自に追加したタグでした。Netscapeなどの他のブラウザでは対応していないバージョンがあたっため、全てのブラウザで流れる文字を表現させるにはJavaScriptなどを使う必要がありました。当然、利用者側でJavaScriptをオフにされてしまえば機能しません。そのため、動作が保証されているガラケー向けのサイトで広まったという経緯があります。

現在ではスマートフォンが普及し、モバイル端末と言えどもパソコンと同等のスペックでインターネットを利用できるようになりました。ブラウザのバーションも上がり、HTMLの標準仕様も固まってきたので、流れる文字を表現したい場合は、CSSのanimationプロパティを活用しましょう。

<marquee>に指定できる主な属性

width="スクロール範囲の幅"

幅をpxや%で指定します。

height="スクロール範囲の高さ"

高さをpxや%で指定します。

hspace="左右の余白"

左右の余白をpxで指定します。

vspace="上下の余白"

上下の余白をpxで指定します。

behavior="スクロールの種類"

スクロールの種類を指定します。

• scroll：画面を横切る動作を繰り返す（初期値）
• alternate：画面を往復する動作を繰り返す
• slide：画面の端まで行ったら停止する

direction="方向"

スクロールする方向を四種類の中から指定します。初期値はleftです。

• left：右から左へ移動（初期値）
• right：左から右へ移動
• up：下から上へ移動
• down：上から下へ移動

loop="ループ回数"

指定した回数でループが停止します。

scrolldelay="85が初期値"

再描画までの時間の間隔。大きいほどい遅く、小さいほど早い。

scrollamount="85が初期値"

再描画までの時間の間隔。大きいほどい遅く、小さいほど早い。

scrollamount="進む距離"

再描画までに進む距離。値が大きいほど速く、小さいほど遅い。（初期値はscrollamount="6"）

bgcolor="#値"

背景色を指定します。

style="プロパティ:値;"

スタイルを指定します。

id="", class=""

idやclass付けが出来ます。

<marquee>の使い方とサンプル

電光掲示板のように横から流れて来る文字の表現です。この領域に背景色を与えて文字の色を変更すれば、ウェブページの中で目立たせたい場所を明確にできます。

しかし、このタグをサポートしないブラウザでは無視されるため、今後流れる文字を表現したい場合は、後半で解説するCSSアニメーションを採用しましょう。

<marquee bgcolor="#000000">
	<font color="#ffff00">他のタグと組み合わせて色を変更します！</font>
</marquee>

<marquee style="background:#000000; color:#ffff00;">
	属性が効かない場合はスタイルシートを活用して下さい。
</marquee>

スクロールの速度を変更できます。

<marquee scrollamount="1">スクロールが遅いパターン</marquee>
<marquee scrollamount="20">スクロールが速いパターン</marquee>
<marquee scrollamount="40">スクロールが速いパターン</marquee>

スクロールする方向を変更できます。

<marquee direction="down" style="height:100px;">
	上から下へスクロール
</marquee>
<marquee direction="up" style="height:100px;">
	下から上へスクロール
</marquee>

一部のブラウザでは正常に機能しませんが、行ったり来たりを繰り返すこともできます。主にSafari系のブラウザでは、behavior属性に alternate を指定した場合に、<marquee>要素に横幅や高さが設定されていると無視されるようです。

<marquee behavior="alternate" style="width:240px; background:#ccffcc;">
	行ったり来たり
</marquee>

複数の属性を組み合わせて色々なパターンを表現できます。

<marquee direction="down" behavior="alternate" style="width:150px; height:150px; background:#000;">
	<marquee behavior="alternate" style="color:#fff;">
		●
	</marquee>
</marquee>

CSSでmarqueeを再現する

マーキーの表現をCSSで代替する場合は、animation関連のプロパティを使います。アニメーションの開始と終わりが切り替わるポイントで、要素の幅が合っていないと不自然に見えてしまう点に注意して下さい。

これを期待通りに動かすコツは、テキストをスクロールさせるのではなく、子要素のボックスごと動かしているという感覚でアレンジすることです。この辺りの知識はCSSのボックス・モデルで解説しています。

<div class="marquee_area">
	<div class="marquee_item">marquee_item</div>
</div>

.marquee_area {
	max-width: 300px;
	background-color: #ddd;
	overflow: hidden;
}
.marquee_item {
	width: 300px;
	animation-name: marquee;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes marquee {
	0% { transform: translate(100%, 0); }
	100% { transform: translate(-300px, 0); }
}

• animation-name：キーフレームと関連付ける任意の名前です
• animation-duration：スクロールする速さを決めます
• animation-timing-function：スクロールする方向を決めます
• animation-iteration-count：アニメーションさせる回数を決めます
• @keyframes：アニメーションの名前と関連付けて流れを決めます
• @keyframes { 0%：開始時点に要素がどこにあるか位置を決めます
• @keyframes { 100%：終了時点に要素がどこへ移動するか位置を決めます