hosting by xrea.com
血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > CSS3 marquee
作成：2008-06-15
MSIEがHTML 3.2を独自拡張して実現したmarquee。W3CのHTML仕様書にはmarquee要素は存在しないが、Firefox、Opera、Safariのいずれもmarquee要素はサポートしている。なお、marquee要素についてはweb上のHTML解説サイト等で説明がなされているので、ここでは取り上げない。
以前はCSS3としてCSS basic box modelにて仕様が提案されていたものにあわせて実装状況を調査したが、CSS Marquee Level 3として独立した仕様が公開されたのにあわせて、このメモを一部書き直した。
CSS3としてのmarqueeは、OperaとSafariが先行実装している。なお、Operaはモバイル機器の団体であるWAP Forum（現OMA）の独自仕様に基づいた実装となっている。
| CSS3 | Opera | 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 |
期待されるレンダリング（marqueeタグ使用）
CSS3先行実装を使用したレンダリング（Opera、Safari）
... <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には、縦方向（上、下）の他に、ahead、backwards、forwards、reverseと言った値も用意されている。これらは、文章を書く方向に対して順方向か逆方向かを指定できる。（昔の[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として、fast、normal、slowが定義されている。
-*-marquee-speed:fast;
-*-marquee-speed:normal;
-*-marquee-speed:slow;
Safariではdistance/timeで値を指定できるとあるが、見た感じnormalと変わらない。これは2px/sと指定したもの。Safariのリファレンスにあるものの未実装か？
さらにSafariではもう一つの速さの制御として、-webkit-marquee-incrementで単位時間あたりの動く量を指定できる。large、medium、smallが定義されている。
-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
scrollandslidekeywords both cause the content to start outside the box and move into the box, but if thescrollkeyword 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の言葉通り動かない。