【CSS】marquee要素を使わずにテキストをスクロール表示する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、HTML5で非推奨になったmarquee要素の代わりに、CSSのみでテキストをスクロール表示することができるmaruqueeプロパティの使い方をご紹介しています。

CSSだけでテキストをスクロール表示したいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

HTML5で非推奨になったmarquee要素とは

marqueeタグで囲まれたテキストをスクロール表示する機能を持ったHTML要素です。marqueeタグで囲むだけでテキストがスクロール表示を実現することができます。

HTML

<marquee>Into the Program</marquee>

上記を記述するだけで下記のようにテキストのスクロールを実装することできます。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

属性には下記を指定することができます。

behavior	テキストのスクロール方法を指定キーワード値：`scroll`、`slide`、`alternate`
bgcolor	背景色をカラーコードで指定
direction	スクロール方向を指定キーワード値：`left`、`right`、`up`、`down`
height	スクロール範囲の高さを指定
hspace	水平方向の余白を指定
loop	スクロール階数を指定（-1で無限ループ）
scrollamount	スクロールの移動量を指定
scrolldelay	スクロールにかかる時間を指定
truespeed	scrolldelayで60以下の時間を指定する場合に必要な属性
vspace	水平方向の余白を指定
width	スクロール範囲の幅を指定

marquee要素はテキストをスクロールさせたい場合にとても便利な要素ですが、HTML5で非推奨に指定された要素です。現状ほとんどのブラウザで動作していますが、今後動作しなくなる可能性は十分にあります。そのため、今後テキストのスクロールする必要がある場合は、animationを使用するか、将来実装される予定のCSSのmarqueeプロパティを使用することになります。

参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/marquee

marquee要素を使わずにCSSでテキストをスクロール表示する方法

CSSでテキストをスクロール表示する方法として、下記があげられます。

animationプロパティを使用する
marqueeプロパティを使用する

一応上記の2パターンあるわけですが…

marquee関連のプロパティは2022年はほとんどのブラウザで動作していないようです。そのため現状ではanimationプロパティを使用するのが最適な方法となっています。

animationプロパティ

animationプロパティを使ってmarqueeのようにテキストをスクロール表示するアニメーションを作成します。他にも実装方法はあると思いますので、あくまで一例としてご認識いただければと思います。

HTML

<div class="marquee">
    <div class="marquee__inner">
        <p>Into the Program</p>
    </div>
</div>

CSS（SCSS）

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

.marquee {
    width: 100%;
    height: 20px;
    overflow: hidden;
    position: relative;
    
    &__inner {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: right;
        overflow: hidden;
        animation: marquee 5s linear infinite;
    }
}

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

marqueeプロパティ

marquee要素の代替として使用することができるCSSプロパティです。下記の4つのプロパティでテキストのスクロールを実装することができます。

marquee-style	スクロール方法を指定キーワード値：`scroll`、`slide`、`alternate`
marquee-loop	スクロール回数を指定
marquee-direction	スクロール方向を指定キーワード値：`left`、`right`、`up`、`down`
marquee-speed	スクロールスピードを指定

現状動作しないプロパティとなっていますが、実装されればCSSで簡単にmarquee要素と同等のスクロールアニメーションを実装することができます。今後の更新に期待ですね！

最後に

marquee要素は、インターネットが流行し始めた頃によく使われいた要素です。多くのサイトでファーストビューに横スクロールするテキストが表示されていた記憶があります。現在ではほとんど使うケースはないですが、たまに要望としていただくことがあるので今回記事にまとめてみました。現状はanimationプロパティしか選択肢がないですが、今後marquee関連のCSSプロパティが実装されることに期待して待ちたいと思います。

以上、CSSでmarquee要素を使わずにテキストをスクロール表示する方法のご紹介でした！