マーキーとは

テキストやロゴが途切れずに横へ流れ続けるアニメーション。同じ内容を 2 回並べて CSS の @keyframes でループさせる。

概要

テキストやロゴの帯が横方向に流れ続け、端まで行くと途切れずに最初へ戻ってループするアニメーションです。古い HTML には <marquee> タグがありましたが非推奨のため、現在は同じ内容を 2 回横に並べたうえで @keyframes の transform: translateX() を使い、ちょうど半分（1 セット分）だけ動かしたところでループさせて途切れを見せない実装が一般的です。

別名

表記ゆれ：マーキー、流れる文字、無限ループスライド、ティッカー

証券ニュースのように情報が流れる用途では「ティッカー」とも呼ばれます。

AI への伝え方

「テキストが途切れず横に流れ続けるようにして」で伝わります。<marquee> タグは非推奨なので使わないよう伝え、「ホバーで一時停止するようにして」と添えるとより丁寧です。

似たパーツとの違い

「カルーセル」はスライドを 1 枚ずつ止めて見せる部品ですが、マーキーは止まらずに流れ続ける点が異なります。

デモ

お知らせ新機能を追加しましたメンテナンス予定キャンペーン実施中

コード

HTML

<div class="marquee-demo">
  <div class="marquee-demo__track">
    <div class="marquee-demo__group">
      <span>お知らせ</span><span>新機能を追加しました</span><span>メンテナンス予定</span><span>キャンペーン実施中</span>
    </div>
    <!-- 同じ内容をもう 1 セット並べて、ループの継ぎ目を途切れさせない -->
    <div class="marquee-demo__group" aria-hidden="true">
      <span>お知らせ</span><span>新機能を追加しました</span><span>メンテナンス予定</span><span>キャンペーン実施中</span>
    </div>
  </div>
</div>

CSS

.marquee-demo {
  overflow: hidden;
  padding: 20px 0;
  background: #f2f2f2;
  border-radius: 8px;
  font-family: sans-serif;
}

.marquee-demo__track {
  display: flex;
  width: max-content;
  /* 2 セット分(50%)動かしたところで一瞬で先頭に戻すと、途切れなくループして見える */
  animation: marquee-demo-scroll 12s linear infinite;
}

.marquee-demo__group {
  display: flex;
  gap: 32px;
  padding-right: 32px;
  white-space: nowrap;
  color: #333333;
  font-size: 15px;
}

.marquee-demo__group span::before {
  content: "●";
  margin-right: 8px;
  color: #0017c1;
  font-size: 8px;
  vertical-align: middle;
}

.marquee-demo:hover .marquee-demo__track {
  /* ホバー中は一時停止して読みやすくする */
  animation-play-state: paused;
}

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

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