HTML5とCSS3の時代におけるMARQUEE

長い間HTMLを書いているあなたの人は、その要素を覚えているかもしれません。これはブラウザ固有の要素で、画面全体にスクロールするテキストのバナーを作成しました。この要素はHTML仕様に追加されておらず、サポートはブラウザによって大きく異なります。人々はしばしば、この要素の使用について正と負の両方について非常に強い意見を持っていました。しかし、あなたがそれを愛しているか嫌っていたとしても、それはボックスの境界をはみ出したコンテンツを目に見えるようにする目的を果たしました。

それが視覚的な効果と考えられているので、それがHTMLを定義するものではなく、構造を定義するという理由で、ブラウザによって完全に実装された理由の一部は、代わりに、視覚効果やプレゼンテーション効果をCSSで管理する必要があります。 CSS3では、マーキーモジュールを追加して、ブラウザがどのようにマーキーエフェクトを要素に追加するかを制御します。

新しいCSS3のプロパティ

CSS3では、次の5つの新しいプロパティを追加して、コンテンツをマーキーに表示する方法を制御できます。 オーバーフロースタイル, マーキースタイル, マーキープレイカウント, マーキー方向 そして マーキースピード.

オーバーフロースタイルザ オーバーフロースタイル プロパティ（CSSオーバーフローの記事でも触れました）は、コンテンツボックスのオーバーフローするコンテンツの優先スタイルを定義します。値をに設定した場合 マーキーライン または マーキーブロック あなたのコンテンツは左右にスライドして出てきます（マーキーライン）またはアップ/ダウン（マーキーブロック).

マーキースタイルこのプロパティは、コンテンツをどのように表示（および出力）するかを定義します。

オプションは次のとおりです。 スクロール, 滑り台 そして 代わりの。スクロールは、画面から完全に離れたコンテンツから開始し、すべてが完全に画面から完全に外れるまで、可視領域を移動します。スライドは、コンテンツが画面から完全に離れてから開始し、コンテンツが画面上に完全に移動し、画面にスライドするコンテンツがなくなるまで移動します。

最後に、交互に前後にスライドするコンテンツを左右にバウンスさせます。

マーキープレイカウントの使用の欠点の1つ マルケ 要素はマーキーが決して止まらないということです。しかし、styleプロパティ マーキープレイカウント マーキーを設定して、特定の回数だけコンテンツをオン/オフすることができます。

マーキー方向コンテンツを画面上でスクロールする方向を選択することもできます。その価値 前進 そして 逆 テキストの方向性に基づいています。 オーバーフロースタイル は マーキーライン 上または下に オーバーフロースタイル は マーキーブロック.

マーキー方向の詳細

オーバーフロースタイル	言語の方向性	前進	逆
マーキーライン	ltr	左	右
	rtl	右	左
マーキーブロック		アップ	ダウン

マーキースピードこのプロパティは、コンテンツが画面上でスクロールする速度を決定します。値は次のとおりです。 スロー, 正常、および 速い。実際の速度はコンテンツとそれを表示するブラウザに依存しますが、値は スロー 遅い 正常 それはより遅い 速い.

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

CSSマーキー要素を機能させるには、ベンダープレフィックスを使用する必要があります。彼らは以下の通りです：

CSS3	ベンダープレフィックス
overflow-x：マーキーライン。	overflow-x：-webkit-marquee;
マーキースタイル	-webkit-marquee-style
マーキープレイカウント	-webkit-marquee-repetition
マーキー方向：前進|後退;	-webkit-marquee-direction：前方|後方へ;
マーキースピード	-webkit-marquee-speed
同等物なし	-webkit-marquee-increment

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

マーキーを動作させるには、ベンダープレフィックスの値を最初に配置してから、CSS3の仕様値に従ってください。たとえば、200x50のボックス内でテキストを左から右に5回スクロールするマーキー用のCSSを次に示します。

{ 幅：200px;高さ：50px;ホワイトスペース：nowrap; オーバーフロー：隠された; overflow-x：-webkit-marquee; -webkit-marquee-direction：フォワード; -webkit-marquee-style：scroll; -webkit-marquee-speed：正常です。 -webkit-marquee-increment：小さい; -webkit-marquee-repetition：5; overflow-x：マーキーライン。 マーキー方向：前方; マーキースタイル：スクロール; マーキー速度：正常; マーキープレイ回数：5;}