このページでは、HTMLを使用して「動く文字」を作成する方法について詳しく解説します。ジャンプしたい項目をクリックしてください。

• marqueeタグを使った文字の動き
• CSSのkeyframesを使ったアニメーション
• JavaScriptを使ったアニメーション
• 動く文字の実用的な使用例

marqueeタグを使った文字の動き

HTMLでは、<marquee>タグを使用して文字を動かすことができます。ただし、<marquee>タグは非推奨となっており、最新のブラウザではサポートされない場合があります。それでも、基本的な動作を理解するには良い方法です。

左右に動く文字

<marquee>この文字は左から右に動きます！</marquee>

例：

この文字は左から右に動きます！

上下に動く文字

<marquee direction="up">この文字は上下に動きます！</marquee>

例：

この文字は上下に動きます！

動きの速度を変更

<marquee scrollamount="10">この文字は速く動きます！</marquee>

例：

この文字は速く動きます！

CSSのkeyframesを使ったアニメーション

<marquee>タグの代わりに、CSSの@keyframesを使用して文字を動かすことが推奨されます。

左右に動く文字

<div class="moving-text">この文字はCSSで動きます！</div>
<style>
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}
.moving-text {
    display: inline-block;
    animation: slide 5s linear infinite;
}
</style>

例：

上下に動く文字

<div class="moving-vertical">この文字は上下に動きます！</div>
<style>
@keyframes updown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-50px); }
}
.moving-vertical {
    display: inline-block;
    animation: updown 3s ease-in-out infinite;
}
</style>

例：

JavaScriptを使ったアニメーション

JavaScriptを使用すると、より動的で複雑なアニメーションを作成できます。

左右に動く文字

<div id="js-moving-text">この文字はJavaScriptで動きます！</div>
<script>
let text = document.getElementById("js-moving-text");
let position = 0;
function moveText() {
    position += 1;
    text.style.transform = "translateX(" + position + "px)";
    if (position > window.innerWidth) {
        position = -text.offsetWidth;
    }
    requestAnimationFrame(moveText);
}
moveText();
</script>

例：

動く文字の実用的な使用例

動く文字を使う際は、過剰なアニメーションがユーザーにとって煩わしくならないよう注意が必要です。以下は、実際に動く文字を使う例です。

ニュースティッカー

<div class="news-ticker">最新ニュースがこちらを流れます！</div>
<style>
@keyframes ticker {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.news-ticker {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    animation: ticker 10s linear infinite;
}
</style>

例：

これで動く文字の基本的な手法と実用例について学ぶことができました。