HTML | marqueeタグは非推奨、代替で使えるCSSを紹介
2021年に記事にするには今更過ぎますが、文字や画像などの要素を縦横にスクロールさせる<marquee>タグは非推奨、廃止となっています。
この記事では、<marquee>タグの代わりにCSSで同じ動作をさせる簡単なサンプルを紹介しています。
<marquee>タグは非推奨
<marquee>タグは既に非推奨、廃止となっていますが、2021年現在はChromeを始めとするブラウザで実行する事が可能です。
一番シンプルな記述だと以下のようになります。
<marquee>marqueeでスクロール</marquee><marquee>タグには方向から遅延、時間、移動幅などな、ど様々な属性オプションが用意されていましたが、今更思い出す事も覚える事も必要ないでしょう。
彼が現役時代の頃、ガラゲーなどでCSSやJavaScriptが自由に使えない時代に活躍していたハズです。
各種属性オプションを駆使して凄いアニメーションを作る猛者達がいましたね。
代替で使えるCSS
marqueeの代替にはCSS、あるいはJavaScriptなどでそのスタイルをアニメーションさせたりします。
デフォルトのmarqueeと同じような動きのスクロールを実装するには、例えば以下のように記述します。
<p class="marquee">marquee</p>animationプロパティを使って、@keyframesのキー名を指定、transformプロパティの translate で要素をスクロールさせます。
.marquee {
animation: marquee-anim 10s linear infinite;
}
@keyframes marquee-anim {
0% { transform: translate(100%, 0); }
100% { transform: translate(-10%, 0); }
}動作サンプルは以下のようになります。
See the Pen CSS | Mouse hover VS Display none ROUND 1 by yochans (@yochans) on CodePen.