MENU
WEB制作の備忘録 | ぶろぐみ
お問い合わせ
　
  1. ホーム
  2. WEB制作
  3. 【CSS】コーポレートサイトでよく見かけるスクロールテキストの実装

【CSS】コーポレートサイトでよく見かけるスクロールテキストの実装

PR
WEB制作
CSS
【CSS】コーポレートサイトでよく見かける横に流れる文字の実装

追記：2026.07.30
応用を追加しました。コードを少し見直しました。

おしゃれなコーポレートサイトでよく見かける、横に流れる文字（スクロールテキスト）の実装方法をご紹介します。

HTMLもCSSも超簡単なので是非お試しください。

目次

HTML

HTMLは、リストで流したい文字を並べるだけです。

<ul class="scroll-list">
  <li>Hello World!</li>
  <li>Hello World!</li>
  <li>Hello World!</li>
</ul>

WordPressならリストブロックで作成してもOK。

  • Hello World!
  • Hello World!
  • Hello World!

CSS

  • Hello World!
  • Hello World!
  • Hello World!
/* スクロールリスト */
.scroll-list {
  display: flex;
  padding-inline: 0;
  margin-inline: 0;
  gap: 0;
  list-style: none;
  background-color: skyblue;
  overflow: hidden;
}

/* スクロールアイテム */
.scroll-list li {
  color: #fff;
  font-size: 3em;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 1em 0 0;
  margin: 0;
  animation: marquee-left 16s linear infinite;
}

/* PCの時のフォントサイズ */
@media (min-width: 600px) {
  .scroll-list li {
    font-size: 8vw;
  }
}

/* アニメーション */
@keyframes marquee-left {
  100% {
    transform: translateX(-100%);
  }
}

ポイントは以下の通り。

  • 親要素（ul要素）の左右余白はリセットする
  • 各アイテム（li要素）に余白を指定する
  • 各アイテム（li要素）をアニメションさせる

親要素（ul要素）に余白があると、余白の分だけ移動距離がずれてしまい、テキストが最後まで流れる前にループしてしまいます。

ul要素はあくまで横並びにするだけにとどめ、余白が必要であれば子要素に指定します。

幅を全画面に広げる

  • Hello World!
  • Hello World!
  • Hello World!

幅を画面いっぱいに表示する場合は、margin-inlineプロパティの値をcalc(50% - 50vw)へ変更します。
※overflowプロパティは不要なので削除してOK。

/* スクロールリスト（全幅表示） */
.scroll-list {
  margin-inline: calc(50% - 50vw);
  /* overflow: hidden; */
}

PCの時、文字が途切れる心配のある場合は、リストアイテムの数を増やすか、font-sizeの単位をvw（画面幅に合わせた大きさ）にすることで対処することができます。

応用：ランダムなテキストをスクロールさせる

  • HTML
  • CSS
  • JavaScript
  • HTML
  • CSS
  • JavaScript
<div class="scroll-list-wrap">
  <ul class="scroll-list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <ul class="scroll-list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</div>

ランダムなテキストを並べる場合は、最低２つのリストを作成し、divで囲みます。

このリストを交互に繰り返しアニメーションさせたいので、animationプロパティはli要素ではなくul要素につけます。

あとの要領は同じで、親要素には余白をつけず横並びにとどめるのみ、子要素（各アイテム）に余白を設けることでスムーズにスクロールが行われます。

/* 横並び共通 */
.scroll-list-wrap,
.scroll-list {
  display: flex;
  padding-inline: 0;
  margin-inline: 0;
  gap: 0;
}

/* スクロールリストの親要素（全幅表示） */
.scroll-list-wrap {
  background-color: skyblue;
  margin-inline: calc(50% - 50vw);
}

/* スクロールリスト */
.scroll-list {
  list-style: none;
  animation: marquee-left 16s linear infinite;
}

/* スクロールアイテム */
.scroll-list li {
  color: #fff;
  font-size: 3em;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 1em 0 0;
  margin: 0;
}

/* PCの時のフォントサイズ */
@media (min-width: 600px) {
  .scroll-list li {
    font-size: 8vw;
  }
}

/* アニメーション */
@keyframes marquee-left {
  100% {
    transform: translateX(-100%);
  }
}

まとめ

文字を大きめにすると、モダンな雰囲気が出てオシャレに見えますね…！

以上、横に流れる文字の実装方法でした。

あわせて読みたい
懐かしのmarqueeタグをCSSで完全再現！文字の自動スクロール 私のホームページへようこそ！ あなたは1000人目のお客様です☆彡キリ番ならBBSにコメント残してくださいね！踏み逃げ厳禁！ ​──と、2000年代初頭インターネット黎明期に…

カスタマイズに困ったらお気軽にご相談を！

  • 「ちょっとしたCSSの調整だけお願いしたい」
  • 「不具合を直してほしい」

料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔

今すぐ相談する
WEB制作
CSS
役に立ったら他の方にシェア

お気軽にコメントどうぞ

コメント一覧 （1件）

コメントする

目次