CSSでテキストをスクロールさせる方法

1. CSSのanimationプロパティを使用する方法:

   @keyframes scroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-100%); }
   }
   .scroll-text {
   white-space: nowrap;
   animation: scroll 10s linear infinite;
   }

   上記の例では、scroll-textクラスを持つ要素のテキストが左方向にスクロールします。animationプロパティの値であるscrollは、@keyframesルールで定義されたアニメーションを参照しています。

2. CSSのmarqueeプロパティを使用する方法:

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

   上記の例では、marquee-textクラスを持つ要素のテキストが右から左にスクロールします。marqueeという名前のアニメーションが@keyframesルールで定義され、animationプロパティで参照されています。

3. CSSのtext-indentプロパティを使用する方法:

   .indent-text {
   overflow: hidden;
   white-space: nowrap;
   animation: indent 10s linear infinite;
   }
   @keyframes indent {
   0% { text-indent: 0; }
   100% { text-indent: -100%; }
   }

   上記の例では、indent-textクラスを持つ要素のテキストが左方向にスクロールします。indentという名前のアニメーションが@keyframesルールで定義され、animationプロパティで参照されています。

これらはいくつかの一般的なCSSのテキストスクロールの方法です。必要に応じて、要素のクラスやアニメーションのプロパティをカスタマイズしてください。