【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テキストのスクロール方法を指定
キーワード値:scrollslidealternate
bgcolor背景色をカラーコードで指定
directionスクロール方向を指定
キーワード値:leftrightupdown
heightスクロール範囲の高さを指定
hspace水平方向の余白を指定
loopスクロール階数を指定(-1で無限ループ)
scrollamountスクロールの移動量を指定
scrolldelayスクロールにかかる時間を指定
truespeedscrolldelayで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スクロール方法を指定
キーワード値:scrollslidealternate
marquee-loopスクロール回数を指定
marquee-directionスクロール方向を指定
キーワード値:leftrightupdown
marquee-speedスクロールスピードを指定

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

最後に

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

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

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら