CSSを使用した水平スクロールテキストの実装方法

CSSアニメーションを使用する方法: CSSアニメーションを使用して、水平スクロールテキストを実現することができます。以下は、基本的な例です。

HTML:

<div class="scrolling-text-container">
  <div class="scrolling-text">
    This is a horizontally scrolling text.
  </div>
</div>

CSS:

.scrolling-text-container {
  width: 100%;
  overflow: hidden;
}
.scrolling-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

この例では、.scrolling-text-containerがテキストを包むコンテナであり、.scrolling-textが実際のスクロールするテキストです。CSSアニメーションキーフレームでtranslateXを使用してテキストを水平方向にスクロールさせています。

CSS Marqueeを使用する方法: CSS Marqueeを使用すると、簡単に水平スクロールテキストを作成することができます。以下は例です。

HTML:

<div class="marquee">
  <span>This is a horizontally scrolling text.</span>
</div>

CSS:

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.marquee span {
  display: inline-block;
  animation: marquee 10s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

この例では、.marqueeがテキストを包むコンテナであり、spanが実際のスクロールするテキストです。CSSアニメーションキーフレームでtranslateXを使用してテキストを水平方向にスクロールさせています。

これらは水平スクロールテキストを実装するための基本的な方法です。さまざまなスタイリングやカスタマイズのオプションがありますので、必要に応じて調整してください。