仕様と実装が違う！ケータイのマーキー記述方法（XHTML＋CSS）

先日、とある携帯サイト開発プロジェクトにおいて、「au端末でマーキーが1回で終わってしまう！？」という問題に遭遇しました。仕様どおりに書いてもマーキーが繰り返さないのです。どうやら、ブラウザの実装が、仕様どおりではないようなのです！
でも大丈夫。auでマーキーを繰り返しループさせる方法はちゃんとありました。
今回は、そのauの書き方を中心に、それとはまた違った書き方をするDoCoMoとSoftBankの記述方法についても合わせてまとめました。

目次

au

auでマーキーを指定するには、XHTMLの場合、WAP CSSという拡張されたCSSを使って書きます。
span.news {display: -wap-marquee;} これでnewsクラスを指定したspanタグは無限に流れるマーキーになります。auではセレクタは自由に指定できます (*1)。ところが、仕様上ではこれで無限に繰り返すはずなのですが、実際はマーキーは1回だけ流れて止まってしまうんです！
au端末のブラウザであるOpenwave社の仕様はこうなっています。

Default Value : infinite
Openwave

デフォルトだと無限回繰り返すことになっています。つまり、仕様と実装がズレているんですよね。
結局、無限回にしたければ明示的に指定する必要があります。
span.news {display: -wap-marquee; -wap-marquee-loop: infinite;} (*2) この「-wap-marquee-loop」は繰り返しの回数を指定するものです。上記のように、「infinite」と書くと無限回繰り返すようになります。また、「0」と書いた場合も無限回繰り返しました。

ちなみに、回数を限定したい場合は、コロンのあとに整数値を与えると、その値分繰り返します。
/* 10回繰り返したいとき */
span.news {display: -wap-marquee; -wap-marquee-loop: 10;}

marqueeタグも使用可能

Openwaveの仕様にはmarqueeタグは載っていないのですが、au公式技術情報サイト「EZfactory」ではmarqueeタグが紹介されています(*3)。 <marquee>ここに書いた内容が流れます</marquee> 動かしてみたところ、marqueeタグのデフォルトの繰り返し回数も1回でした。繰り返し回数を指定したい場合はloop属性を使用します。最大の繰り返し回数は無限回で、その場合はloop属性値に「-1」を指定します。 <!-- 繰り返し回数を無限にしたいとき -->
<marquee loop="-1">ここに書いた内容が流れます</marquee>

DoCoMo

使用するCSSプロパティはauと同じなのですが、DoCoMoの場合、style属性以外でスタイルを指定することができない（但し、HTMLにおけるbodyタグのリンク関連の属性については、XHTMLではstyleタグを使用）ため、タグに直接記述することになります。この属性を適用できるHTML要素はdivとspanのみです。 <div style="display:-wap-marquee">ここに書いた内容が流れます</div>
<span style="display:-wap-marquee">ここに書いた内容が流れます</span> 繰り返し回数ですが、DoCoMoには無限回というのはありません。最大は16回になっています。

SoftBank

SoftBankの場合は上記2キャリアと違い、marqueeタグを使ってマーキーを表現します(*4)。 <marquee>ここに書いた内容が流れます</marquee> 繰り返し回数はデフォルトは「0」になっていて、これは無限回を意味します。回数を指定するには下記のように書きます。 <!-- 10回繰り返したいとき -->
<marquee loop="10">ここに書いた内容が流れます</marquee> loop属性で指定した整数値回繰り返します。明示的に無限回を指定したければこの属性値を「0」にします。

このように、各キャリアで同じ動きを実現するには、いくつかの書き方を出し分けなければなりません。こうしてキャリア間の違いを知るほどに、ラウンドアバウトがあれば、一つだけ書いておけば変換してくれるのに、と便利さを痛感します。

関連記事：3キャリア共通のマーキーの書き方

  • *1：これに関しては今回は未検証。Openwave社の仕様では全要素OKになっています。また新発見があれば追記します。
  • *2：Openwave社の仕様では、コロンの記述はなく、半角スペースのみです。WAP CSSではコロンがあるので、両方で試したところ、どちらでも動作することは確認しています。
  • *3：「EZfactory>XHTML Basicについて>主要タグの説明>ページ関連/テキスト関連」
    http://www.au.kddi.com/ezfactory/tec/spec/wap_tag01.html参照。
  • *4：SoftBankではWAP CSSは採用されていないようで、このほかにも「-wap-」を含んだ表記は存在しません。

Page Top