ホームページやブログを見ていると、テキストやロゴが右から左へ流れていくアニメーションを見かけることがあります。
実はこれ、難しいJavaScriptを使わなくても、HTMLとCSSだけで簡単に実装できるんです。
「お知らせを目立たせたい」「ロゴを横一列に並べて流したい」そんなときに役立つのが右端から無限ループで流れる横スクロール。
例えばこんな場面で使えます。
- お知らせバー：キャンペーン情報や最新ニュースを流して目立たせる
- ロゴのスライダー：取引先や実績を横に並べて信頼感をアップ
- レビューやコメント表示：お客様の声を次々と表示してにぎやかな印象に
- イベント告知：日付や場所を流し続けてユーザーの視線を集める
本記事では、初心者の方でもわかりやすいように、サンプルコードを交えながら手順を丁寧に解説します。
すぐにコピペして使える例もあるので、あなたのサイトにちょっとした動きを加えたいときにぜひ参考にしてください。
目次
無限ループで流れる仕組み
以前は <marquee> タグを使う方法がありましたが、今は非推奨です。
その代わりに、CSSのアニメーション（@keyframes）とtransform を使うことで、滑らかに流れる横スクロールを作ることができます。
ポイントはこの3つ
- テキストや画像を横一列に並べる
- それを
transform: translateX()で右から左に動かす animation: infinite linearを設定して無限ループにする
基本のサンプルコード（テキストを流す）
<div class="scroll-wrap">
<div class="scroll-text">
これは右端から流れる無限ループのテキストです！
</div>
</div>
.scroll-wrap {
overflow: hidden; /* 外にはみ出した部分を隠す */
white-space: nowrap; /* 改行しない */
width: 100%; /* 横幅いっぱい */
background: #f0f0f0;
}
.scroll-text {
display: inline-block;
padding-left: 100%; /* スタート位置を右端にずらす */
animation: loop 10s linear infinite;
}
@keyframes loop {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}👉 このコードをコピペするだけで、テキストが右端から流れていき、左へ消えてまた繰り返す動きができます。
ロゴ画像を流すパターン
<div class="scroll-wrap">
<div class="scroll-imgs">
<img src="logo1.png" alt="ロゴ1">
<img src="logo2.png" alt="ロゴ2">
<img src="logo3.png" alt="ロゴ3">
<img src="logo4.png" alt="ロゴ4">
</div>
</div>
.scroll-imgs {
display: inline-block;
padding-left: 100%;
animation: loop 20s linear infinite;
}
.scroll-imgs img {
height: 50px;
margin: 0 20px;
}
👉 ロゴやアイコンを並べると、取引先企業一覧やブランドスライダーとして活用できます。
created by Rinker
¥2,794
(2025/10/23 11:37:40時点 楽天市場調べ-詳細)
応用カスタマイズ
- 速度を変える
animation: loop 5s linear infinite;と書くと速く、30sとすればゆっくり流れます。 - マウスホバーで一時停止
.scroll-text:hover { animation-play-state: paused; } - スマホ対応（レスポンシブ）
画像の大きさを%やmax-widthにすると、画面幅に応じて調整可能です。 - 複数段で流す
同じ仕組みを上下2列に配置して、速度を少し変えると「段違いスクロール」でにぎやかな演出も可能です。
活用シーン
- キャンペーンやセール情報のお知らせバー
- ブランドやスポンサーのロゴスライダー
- レビュー・お客様の声を流すコメント帯
- イベントや日程の告知テキスト
実際にLPやブログのファーストビューに入れると、動きが出て目を引きます。
注意点
- 動きが速すぎると読みにくい → 速度は10〜20秒程度が無難
- 画像や文字がギザギザになることがある → 高解像度画像やフォントを使う
- アクセシビリティ配慮 → 読み上げソフトが混乱しないよう、必要なら
aria-hidden="true"を設定
まとめ
右端から無限ループで流れる横スクロールは、HTMLとCSSだけで実装可能です。
JavaScript不要で軽量なので、ブログや企業サイト、LPにちょっとした動きを加えたいときに便利です。
コピペでそのまま動かせるので、ぜひ試してみてください。
created by Rinker
¥5,060
(2025/10/24 05:46:07時点 楽天市場調べ-詳細)
