CSS Marquee

Category : CSS

懐かしいと思う人もいるかもしれませんが、 marquee 要素ってありますよね。非推奨になってしまいましたが、あの動きは CSS3 に受け継がれています。
今回はそれを実装しているブラウザでの使い方を書いてみたいと思います。
CSS3 としての仕様は以下のリンクからどうぞ。

独自実装しているブラウザは webkit と Opera ですが、独自実装のため、W3C の仕様とは異なっていたりします。

今回のデモはこちらです。
webkit 系のブラウザと Opera で見てみてください。

CSS3 marquee DEMO

まず、Opera から……といきたいところですが、これたぶん携帯の指定と同じですよね。
一応説明します。

display:-wap-marquee; でマーキーできます。
マーキーのプロパティは次のようになります。

-wap-marquee-dir
rtl を指定すると右から左へ。ltr だと左から右へ。
-wap-marquee-loop
ループ回数。
数字か infinite を指定する。
-wap-marquee-speed
動く速度。
fast, normal, slow のどれか。
-wap-marquee-style
マーキーのスタイル。
alternate, scroll, slide のどれか。
alternate は向きが交互に変わる。
scroll, slide の違いは多分 W3C のと一緒。

次は webkit の指定。
まず、overflow, overflow-x, overflow-y-webkit-marquee を指定します。
これでデフォルトの動きは実現できますが、Opera のと同様にオプションみたいなものがあります。

-webkit-marquee-direction
方向ですね。
  • auto : デフォルト
  • ahead : 順方向(上下)
  • reverse : 逆方向(上下)
  • forwards : 順方向(左右)
  • backwards : 逆方向(左右)
  • up : 下から上
  • down : 上から下
  • right : 左から右
  • left : 右から左
ahead, reverse, forwards, backwards, は文書の文字方向に依存。
up, down, left, right は見た目そのまま。
-webkit-marquee-increment
一度に移動する距離。
large, normal, small のどれか。
-webkit-marquee-repetition
ループ回数。
数字か infinite を指定する。
-webkit-marquee-speed
動く速度。
fast, normal, slow もしくは、distans/time (ex.10px/s) のように指定する。
ただ、distans/time のほうは指定しても無視されてるっぽい(2011-05-12時点)。
-webkit-marquee-style
マーキーのスタイル。
alternate, scroll, slide, none のどれか。
alternate は向きが交互に変わる。
scroll, slide の違いは W3C のと一緒。
none はそのまま。マーキーが停止する。

Leave a Reply