ブログ BLOG
HOME / ブログ / 途切れない！無限ループするテキストアニメーションの実装方法

途切れない！無限ループするテキストアニメーションの実装方法

2026.04.14
  • cssアニメーション

Webサイトのヘッダーやフッターで、文字が左へツーーッと途切れることなく流れ続ける「無限ループアニメーション（マーキー）」。目を引きやすく、トレンド感のあるWebデザインで非常によく使われる手法です。

しかし、いざ自作してみると「ループの瞬間に空白ができてしまう」「テキストが短いとズレる」「文字が勝手に潰れる」といったトラブルに悩まされがちです。

この記事では、そうしたバグや表示崩れを一切起こさない、実務で使える最も堅牢なHTML/CSS構造を詳しく解説します。コピペでそのまま使えるコード付きです！

なぜズレる？失敗しないための「グループ化」の仕組み

文字が途切れずにループしているように見せるための基本原理は、「同じ要素を2つ並べて、横へスライドさせる」ことです。

しかし、テキストを単に2つ並べただけでは、画面幅に対してテキストが短すぎた場合に右側に余白ができてしまい、ループがリセットされる瞬間に「カクッ」とズレてしまいます。

これを完全に防ぐ最強のアプローチが、「画面幅より長いグループを作って、それを2つ並べる」という方法です。

  1. marquee-group という箱を作り、その中にテキストを複数入れて「絶対に画面幅より長くなるまとまり」を作ります。
  2. そのグループを丸ごと2つ（グループ1・グループ2）横に並べます。
  3. 全体の長さの「半分（-50%）」、つまりグループ1つ分だけ左に移動した瞬間にアニメーションを0秒リセットします。

グループ2がグループ1と全く同じ位置に重なった瞬間にリセットされるため、人間の目には一文字も途切れることなく永遠にループしているように見えます。

実装コード（コピペOK）

それでは、絶対にズレない・潰れない最強の実装コードを見ていきましょう。

HTML

<div class="marquee-container">
  <div class="marquee-content">
    
    <div class="marquee-group">
      <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div>
      <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div>
      <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div>
    </div>

    <div class="marquee-group">
      <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div>
      <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div>
      <div class="marquee-item">途切れない！CSS無限ループテキストアニメーション🌟 </div>
    </div>

  </div>
</div>

【ポイント】 PCの大きな画面で見ても右側に余白ができないように、1つの marquee-group の中に marquee-item をいくつかコピーして、十分な長さを確保してください。

CSS

/* 1. 外側のコンテナ（はみ出た部分を隠す） */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

/* 2. 内側の動くコンテナ（アニメーションを設定） */
.marquee-content {
  display: flex;
  width: max-content; /* 中身の幅に合わせる */
  animation: scroll 20s linear infinite; /* 20秒かけて一定の速度で無限ループ */
}

/* 3. テキストのまとまり（絶対に潰れないようにする） */
.marquee-group {
  display: flex;
  flex-shrink: 0; /* ★超重要：Flexboxの仕様で文字が潰れるのを防ぐ */
}

/* 4. 各テキスト要素（余白と文字サイズ） */
.marquee-item {
  padding-right: 40px; /* テキスト同士の隙間 */
  font-size: 24px;
  font-weight: bold;
}

/* 5. 左へ流れるアニメーションの定義 */
@keyframes scroll {
  0% { 
    transform: translateX(0); 
  }
  100% { 
    /* グループが2つなので、全体の半分の距離（-50%）だけ移動させる */
    transform: translateX(-50%); 
  }
}

【ポイント：なぜ -100% じゃないの？】 動かしている枠（.marquee-content）の中には、グループが「2つ」入っています。そのため -100% 動かしてしまうと、2つ目のグループまで画面外に消え去ってしまい空白の時間が生まれます。全体の半分である -50%（グループ1つ分）だけ動かすのが正解です。

アニメーション速度の調整方法

流れるスピードを変更したい場合は、CSSの animation プロパティの秒数（20s の部分）を変更します。

CSS

/* ゆっくり流したい場合（秒数を増やす） */
animation: scroll 40s linear infinite;

/* 早く流したい場合（秒数を減らす） */
animation: scroll 10s linear infinite;

⚠️ 注意点: この秒数は「-50%の距離を何秒かけて移動するか」を示しています。そのため、HTMLで文字数を増やして全体の距離が長くなると、同じ秒数でも「急いで走り切ろうとする」ため、体感スピードが速くなります。テキストの量を変更した際は、必ずこの秒数もセットで微調整を行ってください。

まとめ

CSSの無限ループテキストアニメーションを完璧に実装するカギは以下の3つです。

  1. 画面幅より長い「グループ」を作って2つ並べる。
  2. 移動距離は -100% ではなく -50% にする。
  3. flex-shrink: 0; を指定して、文字が潰れるのを防ぐ。

この構造さえ覚えておけば、テキストがどんな長さになっても、画像やアイコンを混ぜても、決してズレることのない美しいマーキーアニメーションを作ることができます。ぜひご自身のサイトで活用してみてください！

サンプル

以下は、実際に上記のコードをベースに実装したサンプルです。

See the Pen Untitled by Naohiko Kitahara (@naozoom) on CodePen.

Xでシェア Facebook LINE
 
一覧に戻る