MARQUEE を使用せずに HTML5 および CSS3 でスクロール可能なコンテンツを作成する

スタニスワフ・パイテル/ゲッティイメージズ

長い間 HTML を書いてきた人は、この要素を覚えているかもしれません。これは、画面全体にテキストをスクロールするバナーを作成するブラウザー固有の要素でした。この要素は、 HTML その仕様とサポートは、ブラウザーによって大きく異なります。人々はしばしば、この要素の使用について非常に強い意見を持っていました — 肯定的であれ否定的であれ.しかし、好きか嫌いかは別として、ボックスの境界からはみ出したコンテンツを可視化するという目的には役立ちました。

強い個人的な意見は別として、ブラウザーで完全に実装されなかった理由の 1 つは、これが視覚効果と見なされ、構造を定義する HTML によって定義されるべきではないということです。代わりに、視覚効果またはプレゼンテーション効果を CSS で管理する必要があります。また、CSS3 は、ブラウザがどのように追加するかを制御するマーキー モジュールを追加します マーキー効果 要素に。

新しい CSS3 プロパティ

CSS3 で 5 つ追加 新しいプロパティ コンテンツがマーキーにどのように表示されるかを制御するのに役立ちます: オーバーフロー スタイル、マーキー スタイル、マーキー プレイ カウント、マーキー方向、マーキー速度。

オーバーフロー スタイル
オーバーフロー スタイル プロパティ (CSS オーバーフローの記事でも説明しました) は、コンテンツ ボックスからオーバーフローするコンテンツの優先スタイルを定義します。値を marquee-line または marquee-block に設定すると、コンテンツは左右 (marquee-line) または上下 (marquee-block) にスライド インおよびスライド アウトします。

マーキースタイル
このプロパティは、コンテンツがビューに移動する方法 (およびビューから移動する方法) を定義します。オプションは次のとおりです。 スクロール 、スライド、交互。スクロールは、コンテンツが完全に画面からはみ出た状態から始まり、すべてが再び完全に画面からはみ出すまで、可視領域を横切って移動します。スライドはコンテンツが完全に画面外に出た状態から始まり、コンテンツが完全に画面に移動し、画面上にスライドするコンテンツがなくなるまで移動します。最後に、交互にコンテンツを左右にバウンスさせ、前後にスライドさせます。

マーキープレイカウント
MARQUEE 要素を使用する場合の欠点の 1 つは、マーキーが停止しないことです。ただし、スタイル プロパティ marquee-play-count を使用すると、マーキーを設定して、特定の回数だけコンテンツを回転させたりオフにしたりできます。

マーキー方向
画面上でコンテンツをスクロールする方向を選択することもできます。値 forward と reverse は、overflow-style が marquee-line の場合はテキストの方向性に基づいており、overflow-style が marquee-block の場合は up または down に基づいています。

マーキー方向の詳細

|_+_|	言語方向	前方	逆行する
|_+_|	リットル	左	右
	rtl	右	左
|_+_|		上	下

マーキースピード
このプロパティは、コンテンツが画面上でスクロールする速さを決定します。値は、低速、通常、および高速です。実際の速度は、コンテンツとそれを表示するブラウザーによって異なりますが、値は通常よりも遅く、高速よりも遅くする必要があります。

マーキー プロパティのブラウザ サポート

使用する必要があるかもしれません ベンダープレフィックス CSS マーキー要素が機能するようにします。それらは次のとおりです。

CSS3	ベンダープレフィックス
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
同等ではない	|_+_|

最後のプロパティを使用すると、マーキー内の画面上でコンテンツがスクロールするときのステップの大きさを定義できます。

マーキーを機能させるには、最初にベンダー プレフィックス付きの値を配置し、その後に CSS3 仕様の値を配置する必要があります。たとえば、200x50 ボックス内でテキストを左から右に 5 回スクロールするマーキーの CSS を次に示します。

|_+_|