懐かしのmarqueeタグをCSSで完全再現！文字の自動スクロール

あなたは1000人目のお客様です☆彡
キリ番ならBBSにコメント残してくださいね！踏み逃げ厳禁！

​──と、2000年代初頭インターネット黎明期に作られた個人のホームページは、決まってこのような形で作られていました。

特に目を引くのが左右に流れる文字。
この文字はmarqueeタグというもので作られていたのですが、現在は廃止されており、いくつかのブラウザーで動いたとしてもいずれ終了される予定です。

今回はそんなmarqueeタグ難民を救うべく、CSSで完全再現したいと思います。

※上記はCSSで再現したものです。

WordPressテーマ『SWELL』

17,600円（税込）

当ブログで使用中のSWELL。優れたデザインとプロ仕様の機能で、ブログが一段とパワーアップ。投資価値No.1のテーマです。

公式サイトへ購入はこちら

marqueeタグの動き

実際にmarqueeタグを使って動きを見てみます。
※ブラウザの対応が終了している場合は動作しません。

<div style="max-width: 350px; margin-inline: auto;">
  <marquee>あなたは100人目のお客様です</marquee>
</div>

<div style="max-width: 350px; margin-inline: auto;">
  <marquee behavior='alternate'>ようこそ！私のホームページへ！</marquee>
</div>

marqueeタグをCSSで再現

See the Pen css-marquee by hisa (@hisaaashi) on CodePen.

上が実際の挙動で、下は仕組みが分かりやすいように色をつけたネタばらしバージョンです。

実装のポイントは以下の通り。

はみ出した要素を隠す

親要素にoverflow:clipを指定し、はみ出した要素を隠してます。
値はhiddenでも構いません。

ループさせる

animationプロパティにinfiniteを指定して、ループしています。
これがないとアニメーションはストップしてしまいます。

わざと少しカクつかせる

animationプロパティにsteps(100, end)を指定し、動きの速さに応じてステップ数を調整しカクつかせてます。

linearだと動きが滑らかになりすぎるので、あえてフレームレートを落としホンモノの動きを再現しています。

MDN Web Docs

animation-timing-function – CSS: カスケーディングスタイルシート | MDN animation-timing-function は CSS のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。

左へ流れる文字の解説

基本的なHTMLはこちら。

<div class="text-box">
  <p class="marquee-1">←左へ流れる文字</p>
</div>

CSSは以下のようになっています。

/* 左へ流れる文字 */
.marquee-1 {
  padding-left: 100%;
  width: fit-content;
  white-space: nowrap;
  animation: marquee-left 8s steps(100, end) infinite;
}

@keyframes marquee-left {
  100% {
    transform: translateX(-100%);
  }
}

/* 基本設定 */
.text-box {
  margin-inline: auto;
  max-width: 300px;
  overflow: clip;
}

左側に幅100%のpaddingを指定し、テキストを画面外に押し出すような形でスタートします。

transformプロパティで、左側にテキスト要素全体が隠れるように-100%を指定すれば完了です。

往復する文字の解説

基本的なHTMLはこちら。

<div class="text-box">
  <p class="marquee-2">←往復する文字→</p>
</div>

CSSは以下のようになっています。

/* 往復する文字 */
.marquee-2 {
  white-space: nowrap;
  display: grid;
  animation: marquee-alt 4s steps(30, end) infinite;

  &::before {
    content: '';
  }
}

@keyframes marquee-alt {
  0%, 100% {
    grid-template-columns: 1fr auto;
  }

  50% {
    grid-template-columns: 0fr auto;
  }
}

/* 基本設定 */
.text-box {
  margin-inline: auto;
  max-width: 300px;
  overflow: clip;
}

テキストの前に擬似要素を配置し、gridで1frから0frを繰り返して伸び縮みさせるという仕組みです。

実はgridのfr単位ってアニメーションできるんですよね。
（ただしlinearなどにしても、若干文字がブレる感じがあり、滑らかさが劣ります）

あとは不要な指定を取り除いて、シンプルなコードにした感じです。

余談

このアニメーションができるようになるまで数日を要しましたが、完成してよかったです。

marqueeはレスポンシブなど考えられていなかった時代のHTMLタグなので、font-sizeを可変させないのがセオリーです。

色も彩度MAXでビビッドにすると、よりユーザーに喜ばれるかもしれません。

まとめ：marquee今までありがとう

ほぼ完全再現できるようになったため、安心してmarqueeとはお別れできそうです。

marquee今までありがとう。

あわせて読みたい

【CSS】コーポレートサイトでよく見かけるスクロールテキストの実装 おしゃれなコーポレートサイトでよく見かける、横に流れる文字（スクロールテキスト）の実装方法をご紹介します。 HTMLもCSSも超簡単なので是非お試しください。 【HTML…

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

＼ ここから飛べます！ ／