CSSで途切れず流れるテキストを実装する方法

はじめに

横に流れるテキストは、ニュースティッカーや告知バナー、デザインのアクセントなど様々な場面で使われます。

かつてはHTMLの<marquee>タグで実現していましたが、現在は非推奨です。この記事では、CSSのkeyframesアニメーションを使って、途切れることなくスムーズにループするテキストを実装する方法を紹介します。

完成デモ

以下が完成したアニメーションです。テキストが途切れることなく、滑らかにループし続けます。

プレビュー

こちらの文字列が横に流れていきます。こちらの文字列が横に流れていきます。

HTML

<div style="width:100%;overflow:hidden;"><div style="display:flex;width:max-content;animation:marquee-demo 8s linear infinite;"><span style="flex-shrink:0;white-space:nowrap;font-size:1.5rem;font-weight:600;padding-right:3rem;">こちらの文字列が横に流れていきます。</span><span style="flex-shrink:0;white-space:nowrap;font-size:1.5rem;font-weight:600;padding-right:3rem;">こちらの文字列が横に流れていきます。</span></div></div>

CSS

@keyframes marquee-demo { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

仕組みの解説

このテクニックのポイントは、同じテキストを2つ並べてループさせることです。

1. **同じテキストを2つ用意する**
全く同じ内容のテキストを横に2つ並べます。

2. **Flexboxで横並びに配置**
wrapperをdisplay: flexにして、テキストを横一列に配置します。

3. **-50%まで移動させる**
2つのテキストが並んでいるので、-50%移動すると最初の状態と同じ見た目になります。これにより途切れなくループします。

HTMLコード

<div class="marquee">
  <div class="marquee__wrapper">
    <span class="marquee__text">こちらの文字列が横に流れていきます。</span>
    <span class="marquee__text">こちらの文字列が横に流れていきます。</span>
  </div>
</div>

CSSコード

.marquee {
  overflow: hidden;
}

.marquee__wrapper {
  display: flex;
  animation: marquee-scroll 10s linear infinite;
}

.marquee__text {
  flex-shrink: 0;
  white-space: nowrap;
  padding-right: 2rem; /* テキスト間の余白 */
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

各プロパティの役割

overflow: hidden

コンテナからはみ出したテキストを非表示にします。これにより、流れるテキストが画面外に出ても見えなくなります。

display: flex

子要素（span）を横並びに配置するためにFlexboxを使用します。

flex-shrink: 0

Flexアイテムが縮まないようにします。これがないとテキストが圧縮されてしまいます。

white-space: nowrap

テキストが改行されないように1行で表示させます。

translateX(-50%)

2つの同じテキストを並べているので、50%移動した時点で最初と同じ見た目になり、ループが継続します。

linear

animation-timing-functionをlinearにすることで、一定速度でスムーズに流れます。

カスタマイズ

このアニメーションは簡単にカスタマイズできます。

**速度を変更する場合**
animationの秒数を変更します。値を小さくすると速く、大きくすると遅くなります。

**逆方向に流す場合**
translateXの値を正の値（50%）にし、初期位置を-50%に設定します。

**ホバーで停止させる場合**
.marquee:hover .marquee__wrapper { animation-play-state: paused; } を追加します。

逆方向に流れるバリエーション

translateXの値を逆にすることで、右から左ではなく左から右に流すこともできます。

プレビュー

右から左ではなく、左から右に流れます。右から左ではなく、左から右に流れます。

HTML

<div style="width:100%;overflow:hidden;"><div style="display:flex;width:max-content;animation:marquee-demo-reverse 8s linear infinite;"><span style="flex-shrink:0;white-space:nowrap;font-size:1.5rem;font-weight:600;padding-right:3rem;">右から左ではなく、左から右に流れます。</span><span style="flex-shrink:0;white-space:nowrap;font-size:1.5rem;font-weight:600;padding-right:3rem;">右から左ではなく、左から右に流れます。</span></div></div>

CSS

@keyframes marquee-demo-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

アクセシビリティへの配慮

動くコンテンツは、一部のユーザーにとって不快感や集中の妨げになる場合があります。

prefers-reduced-motionメディアクエリを使用することで、ユーザーがシステム設定で「視差効果を減らす」を有効にしている場合にアニメーションを停止できます。

アクセシビリティ対応のCSS

@media (prefers-reduced-motion: reduce) {
  .marquee__wrapper {
    animation: none;
  }
}

まとめ

CSSのkeyframesアニメーションを使うことで、JavaScriptなしで途切れないスクロールテキストを実装できます。

ポイントは「同じテキストを2つ並べて-50%移動させる」というシンプルな仕組みです。速度や方向のカスタマイズも簡単で、アクセシビリティへの配慮も忘れずに行いましょう。

ニュースティッカーや装飾的なテキスト表示など、様々な場面で活用してみてください。