【CSS】コーポレートサイトでよく見かけるスクロールテキストの実装
おしゃれなコーポレートサイトでよく見かける、横に流れる文字（スクロールテキスト）の実装方法をご紹介します。
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!
/* ulタグ */
.scroll-list {
display: flex;
list-style: none;
padding-inline: 0;
margin-inline: 0;
gap: 0;
background-color: skyblue;
overflow: hidden;
}
/* liタグ */
.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!
全画面幅にする場合は、特に不要なoverflowプロパティを削除し、下３つのプロパティを追加します。
/* ulタグ */
.scroll-list {
display: flex;
list-style: none;
padding-inline: 0;
margin-inline: 0;
gap: 0;
background-color: skyblue;
/* overflow: hidden; */
/* 幅を全画面に広げる */
position: relative;
left: calc(50% - 50vw);
width: 100vw;
}PCの時、文字が途切れる心配のある場合は、リストの数を増やすか、font-sizeの単位をvw（画面幅に合わせた大きさ）にすることで対処することができます。
まとめ
文字を大きめにすると、モダンな雰囲気が出てオシャレに見えますね…！
以上、横に流れる文字の実装方法でした。
あわせて読みたい
懐かしのmarqueeタグをCSSで完全再現！文字の自動スクロール
私のホームページへようこそ！ あなたは1000人目のお客様です☆彡キリ番ならBBSにコメント残してくださいね！踏み逃げ厳禁！ ──と、2000年代初頭インターネット黎明期に…
カスタマイズに困ったらお気軽にご相談を！
- 「ちょっとしたCSSの調整だけお願いしたい」
- 「不具合を直してほしい」
料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔
お気軽にコメントどうぞ
コメント一覧 （1件）
黒田先生