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

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

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

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

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

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

WordPressのおすすめサーバー

特徴

• 料金が安い
• WordPressが超高速
• ドメイン永久無料
• 安心の実績とサポート体制

＼ 新規も乗り換えも ／

エックスサーバー

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 {
  0% {
    translate: 0 0;
  }

  100% {
    translate: -100% 0;
  }
}

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

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

translateプロパティで、左側にテキスト要素全体が隠れるように-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を繰り返して伸び縮みさせるという仕組みです。

このアニメーションができるようになるまで数日を要しましたw

実はgridのfr単位はtransitionが効くんですよね。（ただし滑らかさは%単位に劣る）

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

余談

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

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

今回のCSSは、モダンなサイトで採用されているような効果的な使い方もあるので、まとめたら追記します。

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

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

marquee今までありがとう──。

カスタマイズを自分でしてみませんか？

「機能を追加したい」「もう少しデザインを調整したい」と思ったらWeb制作のスクール「デイトラ」がおすすめです。

どのコースも10万円前後と他のスクールに比べても格安で、副業や転職に十分なスキルが身に付きます。

気になった方は、是非アクセスしてみてください。

コースの一部

• Web制作コース
• Webデザインコース
• 動画編集コース