2017/04/06
知らなかったことですが、いろいろなサイトを見たりしたときにソースコードを見たりcssファイルを見たりすることがあります。最近はめっきり少なくなりましたが。ホームページ(Webサイト)を作り始めの頃は、どうやったらこんなページが作れるんだろうとやたらソースを除いていたものです。
最近は面白いページを見つけてもJavaScriptが多く、Ajaxなどで動的にソースを持ってきたりで見てもわからないことが多いです。
たまたま見たページで文字がスクロールしておりまして、『今時、文字スクロールしちゃいかんよ!』と思ってソースを見たわけです。まさかmarquee要素なんか使ってないよね。てか、このブラウザmarqueeって効かないよね?と思いつつどうせJSでしょうと思っていました。
もちろんmarquee要素の記述はありませんでした。jsは見るのも嫌だなとおもって、CSSをちょっと覗いてみました。
overflow:-webkit-marquee;
なる1文があり驚きました。CSSにマーキーがあるのか!!
そのCSSはそこそこにCSS marqueeを調べました。
marquee-direction
marquee-style
marquee-play-count
なるものがあるようです。
W3Cにも定義があるようです。さて、どうやって使うんだと調べているとW3Cのようなこともありました。英語はからっきしダメなのでその他の情報を見るとどうやらCSSのmarqueeは後出しで削除されたようで CSS Animations. で代用しろとのことです。
http://caniuse.comでもこれらの3つのCSSはヒットしませんでした。
探せばCSS Animationsで疑似的にmarqueeを実現しお披露目しているサイトをたくさん見かけます。
しかしながら、アクセシビリティー的にはJIS8341-32010には
動き,点滅及びスクロール 動きのある,点滅している,又はスクロールしている情報が,自動的に
開始し,5 秒よりも長く継続し,かつ,その他のコンテンツと並行して提示される場合,利用者がそ
れらを一時停止,停止又は非表示にすることのできるメカニズムがある。ただし,その動き,点滅又
はスクロールが必要不可欠な動作の一部である場合は除く。
とあるのでスクロールする文字列の使用はやめておいた方が無難であると思います。
CSSでスクロールする文字列の情報をお探しの方ごめんなさいでした。