HTMLタグの「marquee」の替わりに
テキストが横に流れる動きをCSSで実装する方法

サイト制作などを仕事で受けているとクライアントから割と動きのあるサイトというのが好まれやすい傾向にあります。なんとなく動きがあった方が格好良いというイメージがあるからかもしれません。

そんな”動き”と言えるかはわかりませんが、サイトによっては一行メッセージや一言お知らせなどのテキスト枠を設けて、そこの中のテキストを自動的に右から左へ流す電光掲示板のような作りをしているサイトを見かける事もあるかと思います。

スマホ以前のガラケー時代では、<marquee>という言わずとしれたタグがあったのですが、今では非推奨のため使えないので、今回はそんな<marquee>タグの代わりとして使えるCSSだけでテキストが横に流れる設定を見ていきたいと思います。

<marquee>タグはもう使えない（非推奨）

先ほども記載しましたが、HTMLタグの中に<marquee>というタグがあります。
このタグを使えば、そのまま書いたテキストが右から左に流れるという非常に良い仕様だったのですが、今では残念ながら非推奨とされています。

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

<marquee>: マーキー要素 | MDN

実際今のブラウザではまだ使えるもののCSSで使うのがおすすめ

非推奨と言われながらも、実際には今多く使われているブラウザではまだ<marquee>タグに対応しているブラウザは多く、タグを使ったとしても今はまだ仕様通り閲覧ができます。

下記が実際に<marquee>を使った例です。
最新版のChromeでは正常に動作してくれますが、Firefoxでは意図した動きをしてくれませんし、カクカクした動きになりループ処理もしてくれなくなっています。

多く使われているChromeで動くからといって、marqueeタグを使っていても、いつFirefoxのように動かなくなるかはわからないため、やはりCSSで同じ動きを設定できるようにしておく方がおすすめです。

テキストが横に流れる実際のコード

それではいつもと同じように実際にテキストが横に流れるコードについて見ていきましょう。実装には、animationプロパティを使って行うことになります。

HTMLのコード

<div class="marquee">
  <p class="marquee-text">流れるテキスト。流れるテキスト。</p>
</div>

HTMLはこれだけです。
ガラケー時代で使っていた<marquee>にまずは合わせる形で、その後にカスタマイズしたパターンなどを紹介したいと思います。

CSSのコード

.marquee {
  padding: 1em 0;
  overflow: hidden;
  border: 1px #ccc solid;
  border-radius: 5px;
  background-color: #eee;
}   

.marquee-text {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0); }
  100% { transform: translate(-100%); }
}

となり、CSSのアニメーション機能を使う形になります。

簡単に解説しておくと、animationプロパティを使って設定をします。
まずは@keyframesにて、キーとなる名前を指定します。（今回はそのままmarqueeを指定）そして、transformプロパティの translateを使い、要素をスクロールさせています。

実際に上記のコードを書いてみると下記のようになります。

アニメーション以外は通常のhtmlとcssの設定になりますので、太字にしたり色を変えたりとよく行われる装飾などは同じように行う事は可能です。

divのボックスを用意せず、そのままpタグだけで設定することも可能ではありますが、そうなると全体表示などになったりで、サイズの設定などがおかしくなってしまうので、大枠となるボックスとして1つ用意して設定する方が綺麗に整うかと思います。

animationのところの10sというのが秒数で、右から左に何秒で流れるかを指定する事になり、上記のサンプルだと10sで10秒かけて右から左にメッセージは流れるという事になります。

秒数の注意点としては、あくまでも書かれたテキスト全体が右から左に流れるまでの時間となるため、短い文字の10秒と、長文の10秒では流れるスピードは大きく変わりますので注意しましょう。下記に少し長めの文章でのサンプルを用意したので、上のデモと見比べてみるとわかるかと思います。

実際に使われるのはどういうケースか

実際にこれを覚えたとして、使うシーン・ケースはあるのか？とこういった少し特殊なものだと思う方もいるかもしれません。

昔のガラケー時代は、画面がとにかく小さすぎてテキストが入りきらないという事もあり、この横から流れるメッセージでテキストを表示したりするのが多かったです。

今の時代はそんな事はないのですが、こういったのがよく使われるシーンとしては、何度か上でも書いてきたように、お知らせやメッセージなどのアナウンスに使われる事が多いです。

CSSの設定第では、全体表示で画面の最上段や最下段に固定表示させて見せるといった事をしているサイトもあります。

特に通販系などの場合は自分たちが対処のしようがない状況でのお知らせなどでよく使われますし、自分自身クライアントの通販サイトなどでは、大雨や災害時などの配送の遅れや海外事情での入荷の遅れなどのお知らせに使っていました。

タグをうまく組み合わせれば、リンク形式にしてお知らせとしても使えますので、お知らせページに詳細は書いておきつつ、その案内として目立つように横スクロールのテキストで案内をするといった使い方が多いのでは無いかなと思います。

下記に緊急のお知らせ的な使い方としての最上段に固定で表示するデモページを作ってみました。こういう使い方で以外と使われていたりします。

デモページ

まとめ

テキストが左から右に流れていく動きについてまとめてみました。
昔では<marquee>タグが使われていましたが、今ではまだギリギリ使う事ができるものの非推奨ということもあって、CSSで設定して使われるのが一般的になりました。

そこまで難しい設定でもないですし、大枠のボックスの装飾以外ではほとんどがコピペで済み、流れる秒数の設定さえ整えればそのまま使える形になりますので、1つ自分用のコードスニペットなどに用意しておくと流用しやすくてオススメです。

コーポレート系サイトではあまり使う機会はありませんが、通販サイトやサービスサイト、ランディングページなどでは目を引いたり、緊急のお知らせとして知ってもらうために使ったりする機会も多いので、知っていると割と役に立つことも多いのでは無いかなと思います！