CSS3 marquee

追記:2014年10月にCSS Marquee Module Level 3はW3C Working Group Noteとして発行され、公式に廃止されています。以下の記述は歴史的経緯の参考情報としてそのまま残しておきます。

作成:

CSS3仕様としての遍歴は、以前はCSS basic box modelで、現在はCSS Marquee Level 3として仕様が公開されているものの、現在、少なくともWindowsで開発が継続されているブラウザで、marqueeプロパティが動作するブラウザは存在しない。従ってこのページは、歴史的な意味しかない

MSIEがHTML 3.2を独自拡張して実現したmarquee。W3C HTML5仕様にはmarquee要素は適合しない機能として記述されており、web制作者は使用してはならないと記載されている。ただし、実装は11.3.2 The marquee elementとして項目が割かれており、Firefox、Opera、Safariのいずれもmarquee要素はサポートしている。なお、marquee要素についてはweb上のHTML解説サイト等で説明がなされているので、ここでは取り上げない。

なお、HTML5仕様では、CSS transitions and animations are a more appropriate mechanism.とあり、これらのCSS仕様が代替になることを示唆している。当サイトのCSS3 Animations;アニメーション - CSS3ウェブブラウザ実装メモもあわせて参照されたい。


CSS3としてのmarqueeは、Opera (Presto)とSafariが先行実装してい。なお、Operaはモバイル機器の団体であるWAP Forum(現OMA)の独自仕様に基づいた実装となっている。

プロパティと値の比較

CSS3 Opera (Presto) Safari
(overflow-styleプロパティに対して)
marquee-line,marquee-block,(auto)
(displayプロパティに対して)
-wap-marquee
(overflow-xもしくはoverflow-yプロパティに対して)
-webkit-marquee
marquee-style -wap-marquee-style -webkit-marquee-style
marquee-play-count -wap-marquee-loop -webkit-marquee-repetition
marquee-direction -wap-marquee-dir -webkit-marquee-direction
marquee-speed -wap-marquee-speed -webkit-marquee-speed
-webkit-marquee-increment

rendering

期待されるレンダリング(marqueeタグ使用)

テスト

CSS3先行実装を使用したレンダリング(Opera、Safari)

テスト

coding

...
<style type="text/css">
/* 共通背景色 */
.marquee_bk {
 width: 160px;
 height: 120px;
 background-color: #ccc;
}
/* Opera */
.marquee_op {
 display: -wap-marquee;
 -wap-marquee-loop: infinite; /* 初期値が1。Safariとあわせるため無限ループさせる */
}
/* Safari */
.marquee_sa {
 overflow-x: -webkit-marquee;
}
</style>
...
<div class="marquee_bk marquee_op marquee_sa">テスト</div>

先行実装の詳解

動く方向

marqueeの動く方向としては、横方向(右から左、左から右)がOperaとSafariで定義されている。

右から左へ移動:-wap-marquee-dir:rtl; / -webkit-marquee-direction:left;

テスト

右から左へ移動:-wap-marquee-dir:rtl; / -webkit-marquee-direction:left;

テスト

Safariには、縦方向(上、下)の他に、aheadbackwardsforwardsreverseと言った値も用意されている。これらは、文章を書く方向に対して順方向か逆方向かを指定できる。(昔の[CSS3TEXT]でいうなら、"writing-mode"に依存)

上:-webkit-marquee-direction:up;

テスト

下:-webkit-marquee-direction:down;

テスト

-webkit-marquee-direction:ahead;

テスト

-webkit-marquee-direction:backwards;

テスト

-webkit-marquee-direction:forwards;

テスト

-webkit-marquee-direction:reverse;

テスト

繰り返し

Operaは-wap-marquee-loop、Safariは-webkit-marquee-repetitionでともに繰り返し回数を指定できる。infiniteで無限回となる。

繰り返し回数を5に指定

テスト

速さ

Opera、Safariともに-*-marquee-speedとして、fastnormalslowが定義されている。

-*-marquee-speed:fast;

テスト

-*-marquee-speed:normal;

テスト

-*-marquee-speed:slow;

テスト

Safariではdistance/timeで値を指定できるとあるが、見た感じnormalと変わらない。これは2px/sと指定したもの。Safariのリファレンスにあるものの未実装か?

テスト

さらにSafariではもう一つの速さの制御として、-webkit-marquee-incrementで単位時間あたりの動く量を指定できる。largemediumsmallが定義されている。

-webkit-marquee-increment:large;

テスト

-webkit-marquee-increment:medium;

テスト

-webkit-marquee-increment:small;

テスト

数値指定も可能。こちらはきちんと動作している。

-webkit-marquee-increment:2mm;

テスト

-webkit-marquee-increment:1em;

テスト

動き方

-*-marquee-styleで動き方を制御できる。alternate, scroll, slideの3つがOpera、Safariともに規定されている。Safariにはnoneも用意されている。

-*-marquee-style:alternate;

テスト

-*-marquee-style:scroll;

テスト

-*-marquee-style:slide;

テスト

これら3つの違いはSafariのリファレンスにはこのように記述されている。

The scroll and slide keywords both cause the content to start outside the box and move into the box, but if the scroll keyword is specified, the content will stop moving once the last content is visible. The alternate keyword causes the content to shift back and forth within the box in the specified direction.

CSS3ボックスモデルモジュール(邦訳) W3C 草案 24 October 2002ではこのように訳されている。(注:最新の草案と世代が一致した訳ではない)

slide
内容は内容ボックスの完全に外側から始まり、 表示領域の中を終端が完全に消えるまで移動し続ける。
scroll
内容は内容ボックスの完全に外側から始まり、 表示領域の中を最後の部分が内容辺の内側に来るまで移動し続ける。
alternate
内容は見えている状態(ボックスの辺と内容の辺が同じ位置)から始まり、 内容辺が反対側のボックスの辺に到達するまで移動し続ける。 これは内容の大きさ(ボックスに対して大きいか、小さいか)に依存し、 どちらの辺から始まるかは'marquee-direction'に依存する。

Safariに実装された-webkit-marquee-style:none;noneの言葉通り動かない。

テスト

検証に使用したブラウザ

Opera
バージョン 9.50 Build 10063(リリース版)
Safari
AppleWebKit/525.18 Version/3.1.1 Safari/525.17(リリース版)

仕様書とリファレンス

CSS Marquee Module Level 3 ( CR)
http://www.w3.org/TR/2008/CR-css3-marquee-20081205/
WAP CSS Specification pp.41-
http://www.openmobilealliance.org/tech/affiliates/wap/wap-239-wcss-20011026-a.pdf#page=41
Safari CSS Reference: Supported CSS Properties
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_marquee
marquee Object(IEのmarquee要素)
http://msdn.microsoft.com/en-us/library/ms535851(VS.85).aspx
HTML 5.1 11.3.2 The marquee element( WD
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/obsolete.html#the-marquee-element-0
<MARQUEE>-HTMLタグリファレンス(marquee要素の解説)
http://www.htmq.com/html/marquee.shtml