marquee の現代的な代替: CSS スクロール文字 + ジェネレーター

なぜ `<marquee>` は廃止されたのか？

`<marquee>` は現代標準に沿った要素ではなく、可読性やアクセシビリティ制御が弱い実装です。CSS アニメーションなら保守性と制御性が大きく向上します。

モダンな CSS 代替

基本は `@keyframes` + `animation` と `overflow: hidden` コンテナです。速度・方向・タイポグラフィを細かく制御でき、reduced-motion への対応も容易です。

純粋な HTML/CSS スクロール文字コード

旧 marquee の置き換えとしてそのまま利用できます。

<div class="marquee-wrap">
  <p class="marquee-text">Your scrolling text goes here</p>
</div>

<style>
  .marquee-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: #111;
    color: #fff;
    padding: 8px 0;
  }

  .marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear infinite;
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>

CSS 手書きではなくジェネレーターを使うべき場面

正確なプレビュー、透過書き出し、長文クレジット、遠近スクロール、再利用可能な埋め込みコードが必要ならジェネレーターが最適です。