今更ながらCSS3でmarqueeが再現できることを知った

携帯サイトをスマートフォン向けに移植するときに、携帯サイトでは定番のmarqueeもそのままデザインに組み込むことが多々あります。
HTML5ではmarqueeタグが廃止予定というのは知ってたので、marqueeを再現するjsライブラリを使用してたんですが、ちょっとCSSの記述が複雑になりがちで面倒だなぁと思ってました。
なので、簡単な方法はないかなぁと思って調べたら、CSS3でmarqueeが再現できることを知ったのでご紹介。

もうデモを作るまでも解説をつけるまでもなく、jsdo.itにあったのでペタペタ。

最小限に書くなら、

.marquee {
    overflow: -webkit-marquee;
    white-space: nowrap;
}

だけでOK。
Android 2.3以降のデフォルトブラウザ・iOS5以降 Safariの動作は確認済み。(Androidは多少、機種・使用するブラウザに左右されると思われますが)

こんなことできたなぁ程度で頭の片隅にでも覚えておいていただければ。

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ