CSS でテキストを流れるように動かす方法(marquee)

CSS でテキストを流れるように動かしたい

表示されているテキストを右から左に流して、あふれたテキストが全部読めるようにスクロールする、みたいな動きをCSSで実装してみます。イメージとしては、駅のホームにある電光掲示板のあの感じです。

Javascriptを使えばいくらでもやりようがあるのでしょうが、今回はCSSのアニメーションを使って実装します。CSSのアニメーションは、IE11以降、モダンなブラウザでほぼ確実に動きます。

marqueeタグ

• <MARQUEE>－HTMLタグリファレンス

かつては、marqueeタグ なるIE独自のタグがあったようで、文字や画像を上下左右に自動でスクロール動作ができたみたいです。marqueeタグはHTML5で廃止予定なので利用しないようにしましょう。

CSS3のアニメーションでの実装

文字が表示するエリアを用意し、そこにアニメーションで表示する文字が流れてくるようにします。ベンダープレフィックスは省略してますが、サンプルは以下の通りです。

<div class="area">
    <div class="marquee">
        こんにちは。今日はいい天気ですね。
    </div>
</div>

/* 表示領域 */
.area {
    width: 300px;
    border: 1px solid #ddd;
    overflow: hidden;
}
/* 表示領域に合わせてサイズと余白を設定 */
.marquee {
    width: 300px;
    padding-left: 300px;
    white-space: nowrap;

    animation-name: marquee;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes marquee {
    from    { transform: translate(0%); } 
    100%,to { transform: translate(-100%); }
}

↓のような感じになります。

解説

アニメーション部分のCSSは、こういうものというほかないかと思います。animation-duration: 5s; をいじると流れるスピードが変化します。@keyframes で流れる動きを制御しています。0から100%まで動いて、100%分戻る、みたいな感じでしょうか。

文字列の末尾でいい感じに切れてアニメーションを継続させるために、width を親要素に合わせています。

padding を幅に合わせるのは、最初の文字が見えない状態からアニメーションを開始させるためです。padding: 0; にすると先頭文字が左端にある状態からアニメーションをスタートできます。

以上。