マーキー要素

marqueeタグは、テキストを自動的に上下左右にスクロールさせる非標準のHTML要素です。このタグは、 MicrosoftのInternet Explorerの初期バージョンで初めて導入され、Netscapeのblink 要素と比較され、HTML 標準に対する独自の非標準拡張機能であり、使いやすさに問題がありました。W3C は、HTML文書での使用を推奨していません。

マーキーは気を散らす可能性があります。^[1]人間の目は動きに引き付けられ、^[2]マーキーのテキストは常に動いています。

blink 要素と同様に、marquee タグが付けられた画像やテキストは、レンダリングされたページで常に完全に表示されるとは限らないため、そのようなページの印刷は非効率的な (不可能ではないにしても) 作業になります。通常、メッセージがスクロールしたり点滅したりしている場所に表示される可能性のあるすべてのテキストをキャプチャするには、複数回の試行が必要ですbehavior="alternate"。marquee のバージョンでは、テキストが前後に揺れますが、スクロール幅が正しく設定されていれば、テキストの一部が隠れることはありません。

マーキー テキストは移動するため、スクロールの速度と長さによっては、マーキー テキスト内のリンクは静的テキスト内のリンクよりもクリックしにくくなります。スクロールされるたびに、ユーザーには 1 回しかチャンスがありません。また、テキストのスクロールが速すぎると、特に視覚障害のある人にとっては読みにくくなる場合があります。これは、ユーザーをイライラさせる原因になります。これに対処するために、クライアント側スクリプトを使用すると、マウスがマーキー上にあるときに停止するようにマーキーをプログラムできます。

点滅する要素とは異なり、マーキー要素には、マーキーの外観を制御および調整するために使用できる 属性がいくつかあります。

align

img要素と同じ構文を使用します。

behavior

ユーザーは、マーキーの動作を次の 3 つのタイプのいずれかに設定できます。

• スクロール(デフォルト) - テキストを右から左にスクロールし、マーキーの左側に到達すると右側から再開します。ループが終了するとテキストは消えます。
• スライド– 「動作」属性がない場合に使用すると、スクロールするコンテンツはマーキーの全長をスライドしますが、端に達した瞬間に停止し、コンテンツが表示されます。ただし、「動作」属性と一緒に使用すると、「スライド」属性は無視されます。

ループは、マーキーの両端に到達するたびにカウントされます。ループ 1 は、「スライド」属性とは異なります。項目が「スライド」属性でスクロールされている場合、項目はマーキーの長さの終わりで永久に停止し、項目全体を表示します。ただし、項目が「ループ」属性なしでスクロールされている場合、スクロールの回数は「ループ」が等しい数に応じて繰り返されます。「ループ = 1」の場合、項目は 1 回だけスクロールしてマーキーの長さを完全に終了しますが、スクロールされている項目が停止するのは「スライド」と同じです。デフォルトでは、「ループ = 無限」であるため、ノンストップ スクロールが必要な場合は属性「ループ」をコーディングする必要はありません。注: 属性「動作」がコーディングされている場合、「ループ」は無視されます。また、「Behavior=Alternate」かつ「Loop=2」の場合、アイテムはマーキーの先頭から末尾まで移動し、再び先頭に戻ります。この往復は 2 回のループとしてカウントされます。

• 交互- テキストを右から左にスクロールし、左から右に戻ります。

bgcolor

マーキーの背景色を設定します。

direction

マーキー ボックスの方向を設定します。値は左、右、上、下のいずれかで、移動方向を示します。direction=leftつまり、テキストは画面上で右から左に移動します。

width

これによって、マーキーの幅が設定されます。

loop

これは、マーキーがテキストを「ループ」する回数を設定します。各移動は 1 回のループとしてカウントされます。

scrollamount

これは、テキストが「フレーム」間で移動するピクセル数です。したがって、scrollamount=1 は最も遅いスクロール速度になります。

scrolldelay

これは、ビデオの各フレームが x ミリ秒間一時停止されるビデオのリプレイを視聴するのとよく似ており、「フレーム」間の時間をミリ秒単位で設定します。「Scrolldelay=1000」は、各フレームが 1000 ミリ秒、つまり 1 秒間続くスローモーションを意味します。

マーキー要素には任意の HTML を含めることができるため、テキストに加えて、1 つ以上の画像、ムービー クリップ、またはアニメーションGIF を移動できます。

marquee タグはほとんどのブラウザで非推奨になっていますが、次のようにCascading Style Sheetsを使用して同じ動作を実装することは可能です。

@キーフレームマーキー{  
    0 % { 
        変換: translateX ( 100 % ); 
    }
    100 % { 
        変換: translateX ( -100 % ); 
    }
}

.マーキーコンテナ{ 
    空白:折り返しなし; 
    オーバーフロー:非表示; 
    位置:相対的; 
    アニメーション:マーキー10秒線形無限;    
}

.マーキーコンテンツ{ 
    表示:インラインブロック; 
}

アニメーション はmarquee、 によって、右から左への単純な移動として定義されます@keyframes。アニメーションを反転することで (たとえば、-100% から 100% へ) アニメーションを逆にすることができます。 を変更して10s、出力を変更することもできます。

このスタイルは HTML で呼び出すことができます。

< div  class = "marquee-container" >< div  class = "marquee-content" >ガチョウがリース中だ！</ div ></ div >

marquee要素は、MicrosoftのInternet Explorer用に最初に発明され、このブラウザでサポートされています。Firefox 、 Chrome 、 Safariの各ウェブブラウザは、レガシーページとの互換性のためにこの要素をサポートしています。この要素はHTMLに準拠していません。Marquee Module Level 3で指定されたのと同じ効果を実現するためにCSSプロパティが提案されましたが、2014年に実装されずに放棄されました。^{[3]同様の効果は、} JavaScript、^[4]またはCSS3アニメーション^[5]を使用することでも実現できます。