こんにちは、佐伯です。
今回は、ガラケーサイトでよく用いられる、『marqueeタグ』をスマートフォンに対応させる方法を紹介します。
1.marqueeとは？
marqueeタグはInternet Explorerが独自に追加したタグで、文字を左右・上下にスクロールさせます。Internet Explorer 2.0 の時に独自に採用された機能で、Internet Explorer4.0以降では画像もスクロールさせられるようになりました。
現在では Internet Explorer だけでなく、Safari を除く Netscape, Firefox, Operaなどから携帯電話端末まで多くのユーザーエージェント（以下UA）が対応しており、その属性に至るまでほぼ全ての機能が対応しています。
しかし、HTMLの正式な仕様には定義されていない要素であるため、現在はサポートしているUAも今後の対応がどのようになるかわかりません。
2.html5におけるmarqueeタグの扱い
html5ではmarqueeタグは廃止の予定となっています。
現状では、動作するUAと動作しないUAが混在しているような状況ですが、先程も述べた通り、現在サポートされていても、アップデートによって動かなくなる可能性があります。
※将来的にはcss3のプロパティで「marquee-style」「marquee-speed」などが追加され、簡単に指定ができるようになるとW3Cは発表していますが、今のところ、『webkit系のブラウザのみ独自のキーワードを用いて使用可』、という状況にとどまっているようです。(10/14の時点)
3.スマホでmarqueeと同じような動作を実現するには？
以上のことから、html5でのコーディングが主流であるスマートフォンにおいて、marqueeタグの使用は避けた方が良いでしょう。
しかしながら、「やっぱり文字や画像を右から左に流したい！」という、クライアントも少なくないはずです。
従来、marqueeタグが動作しないUAのために様々なJavaScript、jQueryライブラリが開発されてきました。もちろん、それらを使用すればスマートフォンでmarqueeの動作を実現できます。
しかし、JavaScript、jQueryを用いたライブラリをスマートフォンで使うと、やや処理が重く動きがカクカクしてしまうことがあります。
そこで、私がおすすめするのはcss3を使った方法です。
スマホと言えばhtml5とcss3！せっかくなのでcss3を有効的に使いましょう。
4.実際の使用例
さて、前置きが長くなりましたが、私がよく使っている方法をお見せします。
下記は実際に「marquee」「JavaScript」「css3」で作成した場合の表示です。
(※JavaScriptに関しては今回コチラのページで紹介されているJavaScriptライブラリを使用させていただきました。)
marqueeタグ
JavaScript（※JavaScriptをOffにしていると動きません）
css3（※css3未対応の環境では動きません）
4.ソースの解説
html
<div id="marquee">
<div>css3を使用しています。</div>
</div>
css
#marquee{
overflow:hidden;
}
#marquee div{
width:100%;
text-align:center;
display:inline-block;
white-space:nowrap;
-moz-animation-duration: 20s;
-moz-animation-name: marquee;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-duration: 20s;
-webkit-animation-name: marquee;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-ms-animation-duration: 20s;
-ms-animation-name: marquee;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-duration: 20s;
-o-animation-name: marquee;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
@-webkit-keyframes marquee {
from {margin-left: 100%; width: 100%; }
to { margin-left: -100%; width: 100%; }
}
@-moz-keyframes marquee {
from {margin-left: 100%; width: 100%; }
to { margin-left: -100%; width: 100%; }
}
@-ms-keyframes marquee {
from {margin-left: 100%; width: 100%; }
to { margin-left: -100%; width: 100%; }
}
@-o-keyframes marquee {
from {margin-left: 100%; width: 100%; }
to { margin-left: -100%; width: 100%; }
}
”#marquee div”のところでどんな動きをするかを設定し、”＠-○○-keyframes”のところでどこからどこまで動くのかを設定しています。animationプロパティについてはこちらのページ等が参考になると思います。
ずらっと書いてあって「何だこれは！？」と思われるかもしれませんが、各UAごとに接頭辞をつけているため、このような表示になっています。css3のバージョンがアップされれば接頭辞は必要なくなりソースも1/4で済むようになるはずです。
（※marquee、JavaScriptを使用した場合のソースは省略させて頂きます。）
