個別記事のページです

2015年11月25日(水)
このエントリーをはてなブックマークに追加

スマートフォンでmarqueeを再現する方法

スマホのような限られた狭い範囲で、レイアウトを崩すことなく文章を表示する場合、
スクロールで文字を表示するmarqueeが有効です。

ただしmarqueeタグは非推奨であり、今後使えるとは言い難いです。
また文字がデータベースに由来する場合、システムに影響を与える要素を減らしておきたいです。

そういう時は、cssで再現するのが効率的です。
条件はie,chrome,safari,operaに対応させておく点です。
marqueeが動作しないと文字が横にはみ出してレイアウトがくずれるため、
可能な限りのブラウザで動作することが望ましいです。

cssの記述でポイント
1.全てのブラウザ分の記述(-webkit、-moz、-ms、-o)をする。
2.文字列の長さは%で指定する。
こうして作ったのがこのサイトのmarqueeです。
背景は別に指定しています。

marquee.png
文字に制限の多いスマホサイトで、有効な表現だと思われます。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ