marqueeタグは一部のブラウザしかサポートしていないため、HTML5では廃止が予定されているタグです。
代替としてはjs(javascript)やCSS3があります。
ここではCSS3での記述方法を紹介。
マーキーのサンプル HTML
<div class="marquee"> <p>移動するテキスト</p> </div>
マーキーのサンプル CSS
.marquee { overflow:hidden; margin:0; padding:0.2em 0; background:#333; } .marquee p { width:100%; text-align:center; display:inline-block; white-space:nowrap; color:#fff; font-size:12px; -moz-animation-name:marquee; -moz-animation-duration:20s; -moz-animation-timing-function:linear; -moz-animation-iteration-count:infinite; -webkit-animation-name:marquee; -webkit-animation-duration:20s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; -o-animation-name:marquee; -o-animation-duration:20s; -o-animation-timing-function:linear; -o-animation-iteration-count:infinite; animation-name:marquee; animation-duration:20s; animation-timing-function:linear; animation-iteration-count:infinite; } @-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%;} } @-o-keyframes marquee { from {margin-left:100%; width:100%;} to {margin-left:-100%; width:100%;} } @keyframes marquee { from {margin-left:100%; width:100%;} to {margin-left:-100%; width:100%;} }
↓上記CSSスタイルをあてた状態(ボックスの位置設定を別途入れています)
移動するテキスト