HTML | marqueeタグは非推奨、代替で使えるCSSを紹介

2022-01-29HTML テキスト,HTML

2021年に記事にするには今更過ぎますが、文字や画像などの要素を縦横にスクロールさせる<marquee>タグは非推奨、廃止となっています。

この記事では、<marquee>タグの代わりにCSSで同じ動作をさせる簡単なサンプルを紹介しています。

<marquee>タグは非推奨

<marquee>タグは既に非推奨、廃止となっていますが、2021年現在はChromeを始めとするブラウザで実行する事が可能です。

一番シンプルな記述だと以下のようになります。

<marquee>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.

2022-01-29HTML テキスト,HTML

Posted by Yousuke.U