1. /
  2. /
  3. CSS3によるマーキー（marquee）

CSS3によるマーキー（marquee）

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スタイルをあてた状態（ボックスの位置設定を別途入れています）

移動するテキスト