<marquee>タグの解説
<marquee>は、流れる文字を表現したい場所にスクロールエリアを生成します。「marquee」（マーキー）という言葉は、劇場などに掲げられる看板の意味があります。これは電光掲示板などに流れる文字を再現するもので、ウェブサイトの中で目立たせたい箇所に設置されることを想定しています。
現在、<marquee>は非推奨のタグであるため、ソースコードの解説でCSS（スタイルシート）の代替手段を紹介します。
当初、<marquee>はInternet Explorerが独自に追加したタグでした。Netscapeなどの他のブラウザでは対応していないバージョンがあたっため、全てのブラウザで流れる文字を表現させるにはJavaScriptなどを使う必要がありました。当然、利用者側でJavaScriptをオフにされてしまえば機能しません。そのため、ユーザー側でカスタマイズできないガラケー向けのサイトで広まったという経緯があります。
現在の環境ではHTMLとCSSの標準化が進み、animationプロパティを使えば同様の表現が可能となっています。
<marquee>要素に指定できる属性
width- スクロールする範囲の幅をピクセル値（
px）やパーセンテージ（%）で指定します。 height- スクロールする範囲の高さをピクセル値（
px）やパーセンテージ（%）で指定します。 hspace- 水平方向の余白（horizontal space）をピクセル値（
px）で指定します。左右のマージンです。 vspace- 垂直方向の余白（vertical space）をピクセル値（
px）で指定します。上下のマージンです。 direction- スクロールする方向を四種類の中から指定します。初期値は
"left"です。left：右から左へ移動（初期値）right：左から右へ移動up：下から上へ移動down：上から下へ移動
behavior- スクロールの種類を指定します。流れる文字の動作を定義します。初期値は
"scroll"です。scroll：画面を横切る動作を繰り返す（初期値）alternate：画面を往復する動作を繰り返すslide：画面の端まで行ったら停止する
loop- 指定した回数でループが停止します。指定しなかった場合は無制限です。
scrolldelay- 再描画までの時間の間隔を指定します。大きいほどい遅く、小さいほど早くなります。初期値は
"85"です。 scrollamount- 再描画までの時間の間隔を指定します。大きいほどい遅く、小さいほど早くなります。初期値は
"85"です。 scrollamount- 再描画までに進む距離を指定します。値が大きいほど速く、小さいほど遅くなります。初期値は
"6"です。 bgcolor- 背景色を指定します。HTMLで使えるカラーコードを受け入れます。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<marquee>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。流れる文字にしたい箇所を<marquee>で囲います。対応しているブラウザであれば、文字が右から左へ移動し、既定値であれば無限にループします。対応していないブラウザでは無視されます。
<marquee>流れる文字</marquee>
電光掲示板のような装飾にする
電光掲示板のような装飾を行った場合の参考例です。マーキーの範囲に背景色を加えて文字の色を変更すれば、ウェブページの中に目立つ場所を設置できます。
<marquee bgcolor="#000000">
<font color="#ffff00">他のタグと組み合わせて文字色を変更できます！</font>
</marquee>
<marquee style="background:#000000; color:#ffff00;">
装飾はスタイルシートで行って下さい！
</marquee>
スクロールの速度を変える
scrollamount属性を使用すると、スクロールの速度を変更できます。この値が"1"の場合に最も遅く、数値を増やすほど速くなります。
<marquee scrollamount="1">スクロールが遅いマーキー</marquee>
<marquee scrollamount="20">スクロールが速いマーキー</marquee>
<marquee scrollamount="40">スクロールが超速いマーキー</marquee>
スクロールする方向を変える
direction属性を使用すると、スクロールする方向を変更できます。
<marquee direction="left">left：右から左へスクロール</marquee>
<marquee direction="right">right：左から右へスクロール</marquee>
<marquee direction="down">down：上から下へスクロール</marquee>
<marquee direction="up">up：下から上へスクロール</marquee>
流れる文字を往復させる
一部のブラウザでは正常に機能しませんが、流れる文字を行ったり来たりさせることもできます。主にSafari系のブラウザでは、behavior属性に"alternate"が指定されている時、<marquee>要素に横幅や高さが設定されていると無視されるようです。
<marquee behavior="alternate" style="width:280px; 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関連のプロパティを使います。アニメーションの開始と終わりが切り替わるポイントで、要素の幅が合っていないと不自然に見えてしまう点に注意して下さい。
これを期待通りに動かすコツは、テキストをスクロールさせるのではなく、子要素のボックスごと動かしているという感覚でアレンジすることです。この知識に関する内容はボックス・モデルの解説を参照してください。
それでは具体的なサンプルを見ていきましょう。まず始めに、マーキーを表示する範囲になる親要素を配置します。この要素は、流れる文字の背景になります。そして、その子要素に動かす対象を入れる箱を用意します。これが実際にアニメーションで移動させる要素になります。
<div class="marquee-block">
<div class="marquee-item">marquee-item</div>
</div>
この二つの要素にスタイルシートを適用していきます。まずは、アニメーションをつけない状態で必要なプロパティを調整していきます。ここで重要なのは、親要素と子要素の寸法を合わせることです。完全にレイアウトが固定されている場合はwidthプロパティを使用します。ある程度の柔軟性を持たせておく場合はmax-widthプロパティを使用します。
.marquee-block {
max-width: 300px;
background-color: #ddd;
overflow: hidden;
}
.marquee-item {
max-width: 300px;
}
下準備ができたら、アニメーション関連のプロパティを追加します。これらの値を組み合わせることで、<marquee>の属性で指定していた内容を完全に再現できます。
animation-name：キーフレームと関連付ける任意の名前ですanimation-duration：スクロールする速さを決めますanimation-timing-function：スクロールする方向を決めますanimation-iteration-count：アニメーションさせる回数を決めます@keyframes：アニメーションの名前と関連付けて流れを決めます@keyframes { 0%：開始時点に要素がどこにあるか位置を決めます@keyframes { 100%：終了時点に要素がどこへ移動するか位置を決めます
.marquee-block {
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% { translate: 100%; }
100% { translate: -100%; }
}
なぜこのように表示されるのか、理解しやすくするために子要素に背景色を追加してみます。すると、流れる文字を内包している要素がブロックごと移動していることを確認できます。
アニメーションの開始位置はtranslateプロパティで100%に指定されています。これは子要素の最大幅の分だけ右にずらしていることを意味します。
ずれた分だけはみ出た子要素は、親要素のoverflowプロパティで隠されています。それがキーフレームが100%に近づくにつれて左へ移動していくので、文字が流れているように見えます。
そして、アニメーションの終了位置はtranslateプロパティで-100%に指定されています。これは子要素の全体幅の分だけ親要素を飛び出して左にずれることを意味します。
そして、キーフレームが完全に一周すると、終了位置から開始位置へ戻ります。だから繰り返し文字が流れているように見えるのです。
ここまでの内容を理解できたら、アニメーションの速さ・方向・繰り返す回数などを変えてみて、色々なマーキーを作成してみましょう。