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

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

私のホームページへようこそ!

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

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

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

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

\ゆっくりしていってね!/

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

目次

marqueeタグの動き

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

あなたは100人目のお客様です
<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だと動きが滑らかになりすぎるので、あえてフレームレートを落としホンモノの動きを再現しています。

左へ流れる文字の解説

基本的な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などにしても、若干文字がブレる感じがあり、滑らかさが劣ります)

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

alternateは使わない

animationプロパティにalternateを使っても往復のアニメーションは可能ですが、折り返しが滑らかになりません。これはsteps()を使っているため、折り返し地点でどうしても停止点が生まれてしまうためです。

余談

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

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

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

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

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

marquee今までありがとう。

おすすめWEBスクール

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

役に立ったら他の方にシェア

お気軽にコメントどうぞ

コメントする

目次