懐かしの marquee 要素を CSS3 で再現する

あの頃よく使っていた懐かしの HTML タグを思い出す企画。

第1弾は marquee (マーキー) 要素。

marquee 要素って？

テキストを電光掲示板のようにスクロール表示させる要素。元々は IE が独自に導入した要素で、IE4 あたりから使えていたので、90年代のインターネットを彩る代表的なタグだった。ネットスケープではしばらく使えず、JavaScript で同様の動きを再現するものもしばしば見られた。

vspace・behavior・scrolldelay・bgcolor…。当たり前だが、属性にもモロに「見栄え」に関する内容が表れている。

これってブロック要素だと思うんだけど、p 要素の中に入れてる人もいて、インライン要素だったのかな？DTD 見るのめんどくさいので放置。

• 参考 : MARQUEE－HTMLタグリファレンス
• 参考 : http://html.eweb-design.com/0405_maq.html

CSS3 で再現する

overflow:-webkit-marquee; という指定で一部ブラウザで動作する、というものをいくつか見かけたが、どうも Firefox も Chrome でも見られなかったので無視することに。

素直に Animation を使うのがシンプルか。一応親要素の幅に関わらず動作するように作ったつもり。

• デモ : CSS3 Marquee
• コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

marquee 要素は scrollamount 属性で移動量を示すことでスピードを変化させるのに対し、CSS Animation を使う場合は animation-duration が「何秒で端から端まで移動するか」という指定の仕方になる。

scrolldelay 属性による再描画間隔の指定もないので、CSS Animation の方はとてもヌルヌル動く。ヌルヌル動くのが良い場合もあるが、marquee というとあの独特なカクつきがあってこそだと思うので、それを再現するにはやはり JavaScript だろうか。

• 参考 : 文字をテロップのように流すマーキーをCSSで実装する！ | mororeco