3キャリア共通のマーキーの書き方

 前回、3キャリアのXHTMLでのマーキーの記述方法の違いについて書きました。そのとき、「auではタグもCSSも使える」「docomoはCSSのみ」「SoftBankはタグのみ」とまとめました。ところが、SoftBank機でもCSSの表記が解釈できるようなのです。

SoftBankで使えるのはmarqueeタグだけではなかった

前回、「SoftBankはmarqueeタグを使い、CSSによる書き方は存在しない」と書きましたが、これは仕様の上での話のようです。確かに、SoftBankが提供している技術情報を見てもCSSでの書き方については書かれていません。しかし実は実装されているようなのです。弊社の新製品「ラウンドアバウト」のサンプルページを作成していたとき、docomoとauを対象機種として書いたCSSでのマーキーがSoftBank機で動いていたのを見てビックリしました。「あれ？もしかしてCSSの-wap-marqueeも使えるの？タグだけだって、ブログに書いちゃったのに。」

無限回の繰り返し指定には「infinite」が便利

3キャリア共通の書き方をまとめる前に、よく使うと思われる繰り返し回数の指定で、ちょっと便利な値について書いておきます。マーキーを使う際に、無限回繰り返しの指定は、デフォルト値に頼るとauで1回しか流れないという問題があることを前回の記事で書きました。実装依存による問題を避けるには明示的に値を指定する必要があります。無限回の繰り返しを数値で指定するには、marqueeタグの loop属性では「0」になります。SoftBankでは、CSSによる記述の場合は属性のときとは違い、無限回は「-1」です。また、docomoでは無限回は「0」であり（実際は、最大16回まで）、「-1」を指定すると停止した状態で表示されるのでマーキーの意味がなくなってしまいます。このように、数値で指定しようとするとキャリアによって微妙に差があり、ワンソースにまとめられないうえに、違いを覚えるのが面倒だったりします。 そんなときに便利なのが、前回の記事にも登場した「infinite」です。「infinite」を指定すれば、3キャリア全てを無限回の繰り返しにすることが可能です。-wap-marquee-loop: infinite

ワンソースで3キャリアに対応するには

最後に、3キャリア共通の書き方を載せます。「背景色が青で、文字色が白の無限回繰り返すマーキー」を例とします。まず、必要なプロパティは以下になります。（繰り返しになりますが、実装依存を避けるには全て明示的に値を指定するほうがよいですね） <style>.sample {display: -wap-marquee;-wap-marquee-loop: infinite;background-color: Blue;color: White;}</style>・・・<div class="sample">サンプルマーキー</div> <!-- ※一部コードを省略しています --> このままでは、docomo機に対応できないので、本当にワンソースにするにはstyle属性での記述になります。 <div style="display: -wap-marquee;-wap-marquee-loop: infinite;background-color: Blue;color: White;">サンプルです</div>ちなみに、ラウンドアバウトを使うと、外部CSSを使ってdocomo機で表示させることが実現できますよ。