HTMLでテキストをスクロール表示する方法

CSSのanimationプロパティを使用する方法: CSSのanimationプロパティを使用することで、より柔軟なテキストのスクロール表示が可能です。以下の例をご覧ください。

<style>
@keyframes scroll {
 0% { transform: translateX(0); }
 100% { transform: translateX(-100%); }
}
.scrolling-text {
 white-space: nowrap;
 overflow: hidden;
 animation: scroll 10s linear infinite;
}
</style>
<div class="scrolling-text">スクロール表示するテキスト</div>

上記の例では、テキストが左にスクロール表示されます。必要に応じて、animationプロパティの値を調整してください。

JavaScriptを使用する方法: JavaScriptを使用することで、より高度なテキストのスクロール表示が可能です。以下の例をご覧ください。

<style>
.scrolling-text {
 white-space: nowrap;
 overflow: hidden;
 width: 100%;
}
</style>
<div class="scrolling-text" id="scrollingText">スクロール表示するテキスト</div>
<script>
window.onload = function() {
 var scrollingText = document.getElementById("scrollingText");
 var textWidth = scrollingText.offsetWidth;
 var containerWidth = scrollingText.parentNode.offsetWidth;
 var scrollDistance = textWidth - containerWidth;
 function scrollText() {
   if (scrollDistance > 0) {
     scrollingText.style.transform = "translateX(-" + scrollDistance + "px)";
     scrollingText.style.transition = "transform 10s linear";
   }
 }
 setInterval(function() {
   scrollingText.style.transform = "translateX(0)";
   scrollingText.style.transition = "none";
   setTimeout(scrollText, 100);
 }, 10000);
}
</script>

上記の例では、テキストが左にスクロール表示されます。テキストの幅とコンテナの幅に応じて、スクロールする距離を計算しています。