なつかしのHTMLタグ「marquee」--CSS 3のマーキーを検証してみる

SafariがサポートしたCSSのマーキー

　Safariではoverflowプロパティの値を「-webkit-marquee」と指定すると、コンテンツがボックス内で右から左にスクロールする。ボックスにスクロールバーなどは表示されない。

Safariでの表示

div	{
	overflow: -webkit-marquee;
	white-space: nowrap; 
	width: 200px;
	border: solid 1px gray;
	}

<div>あいうえお。かきくけこ。さしすせそ。たちつてと。なにぬねの。</div>

※ブラウザで表示を確認する

OperaがサポートしたCSSのマーキー

　Operaでは、overflowプロパティを「hidden」と指定し、displayプロパティを「-wap-marquee」と指定すると、コンテンツがボックス内で右から左にスクロールする。しかし、標準ではコンテンツを1回表示するとスクロールが終了してしまう。

　そこで、次のサンプルでは「-wap-marquee-loop: infinite」と指定してスクロールを無限に繰り返すように設定している。無限の繰り返しに対応しているのはOpera 9.5以上となっているので注意してほしい。

Operaでの表示

div	{
	overflow: hidden;
	display: -wap-marquee;
	-wap-marquee-loop: infinite;
	white-space: nowrap; 
	width: 200px;
	border: solid 1px gray;
	}

<div>あいうえお。かきくけこ。さしすせそ。たちつてと。なにぬねの。</div>

※ブラウザで表示を確認する

　なお、OperaはWCSS（Wireless profile Cascading Style Sheet）という規格に従ってマーキーの機能をサポートしている。WCSSはモバイル機器向けのスタイルシートの規格として、WAPフォーラム（現Open Mobile Alliance）がリリースしたものだ。そのため、プロパティ名や値には「-o-」ではなく「-wap-」をつけて記述する。

　次回は、スクロールの速度や繰り返しの回数などを指定するCSS 3のマーキーのオプション設定について紹介したい。