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

取り扱い 非推奨の要素
カテゴリ なし
親にできる要素
子にできる要素
対応ブラウザ caniuseで確認

<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アニメーションを採用しましょう。

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

<marquee style="background:#000000; color:#ffff00;">
	属性が効かない場合はスタイルシートを活用して下さい。
</marquee>
表示確認
他のタグと組み合わせて色を変更します! 属性が効かない場合はスタイルシートを活用して下さい。

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

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

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

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

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

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

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

HTML
<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のボックス・モデルで解説しています。

HTML
<div class="marquee_area">
	<div class="marquee_item">marquee_item</div>
</div>
CSS
.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%:終了時点に要素がどこへ移動するか位置を決めます

<marquee>に関連するHTMLタグ

非推奨または廃止になったタグ
<acronym> 略語(頭字語)であることを表す
<applet> JAVAアプレットを埋め込む
<basefont> 文字の基準となるサイズ、色、フォントの指定
<bgsound> 効果音やバックミュージックを鳴らす
<big> 文字をひと周り大きく表示する
<blink> 文字を点滅させる
<center> センタリングする
<command> ページ内のメニューに操作コマンドを設定する
<dir> ディレクトリ・リストを表す
<font> フォントの色や大きさを変える
<frame> フレームに表示するファイルを指定する
<frameset> ウィンドウを分割する
<hgroup> 見出しをグループ化してセクションのヘッダを表す
<keygen> フォーム送信時に暗号鍵を発行する
<listing> タグを解釈してソースをそのまま表示する
<marquee> 文字列をスクロールさせる(流れる文字)
<menuitem> コンテキストメニューの項目を作成する
<multicol> 段組みのレイアウトを作成する
<nobr> 自動改行を無効にする
<noembed> プラグインが利用できない環境での表示内容を指定する
<noframes> フレームが表示できない環境での表示内容を指定する
<plaintext> ソースをテキストとしてそのまま表示する
<rb> ルビをふる文字の区切りを指定する
<spacer> ホワイトスペースを挿入する
<strike> 文字列に打ち消し線を引く
<tt> 文字を等幅フォントで表示する
<xmp> ソースをそのまま表示する