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

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

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のマーキーのオプション設定について紹介したい。