• HOME
  • WEBデザイン
  • CSSだけで自動横スクロール実装したから、やり方を解説するよ!!

CSSだけで自動横スクロール実装したから、やり方を解説するよ!!

WEBデザイン

「テキストや画像を、CSSだけで自動横スクロールする機能を実装したい!!」って疑問を、解決していきますよ。

ヘッドラインのような文章が、ニュースサイトや海外メディアなどで横に流れるのを目にしたことはありせんか?たとえば、こんな感じ↓


横スクロールするヘッドラインの例
ブログアップデート情報 →
2020/06/06:ブログトップ画像変更
2020/06/05:ブログデザイン変更

HTML で横に自動で流れるアニメーションを実装するには、JavaScript や jQuery が必要なのかな?なんて思って調べてみました。

すると...2020年7月3日現在なら、CSS だけで自動横スクロール機能を実装することができるみたいなんですよ。

というわけで今回は、CSSだけで自動横スクロール機能を実装するやり方を、解説していきます。

【解説】自動横スクロールを実装するやり方 HTML&CSS例

Blog headline css

自動横スクロールを実装するやり方 HTML&CSS を、解説していきます。

2020年7月3日現在、トップページにヘッドラインを実装したので、やり方をまとめてみました。それでは、いってみよ〜!

HTML

<div class="scroll">
<div class="news">

<div class="news1">ブログアップデート情報 → </div>
<div class="news2">2020/06/07:<a href="リンクのURL">新着記事の変更完了</a></div>
<div class="news3">2020/06/06:ブログトップ画像変更</div>
<div class="news4">2020/06/05:ブログデザイン変更</div>

</div>
</div>
コメント

DIV「scroll」が、全体を包みます。DIV「news」が、ヘッドラインが流れるブロックを作ります。各 DIV「news1〜4」で、個別の流したいニュース部分ですね。

DIV で流しているので、新着ニュースを流すときに管理しやすいですよ。

CSS

.scroll {
  margin: auto;
  width: 100%;
  color: #666666;
  overflow:hidden;
  background-color: #f5f5f5;
}
.news {
  font-size: 14px;
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  line-height: 1em;
  animation: scrollAnime 18s linear infinite;
}
.news div {display: inline-block; margin-right: 10px;}
@keyframes scrollAnime{
    0% {transform: translateX(0)}
  100% {transform: translateX(-100%)}
}
コメント

デザイン部分の CSS は、解説を割愛します。ポイントになるのは、以下の部分ですね↓

white-space: nowrap;文章が折り返して、2行にならないようにできるよ。1行で表示してくれるって意味です。
animation: scrollAnime 18s linear infinite;ヘッドラインの流れる速度を、調節できます。18s を、38s に変えると速度が遅くなるので試してみて!!
@keyframes scrollAnime{
0% {transform: translateX(0)}
100% {transform: translateX(-100%)}
}
スクロールアニメーションを指定しています。X軸を右から左に流すための設定です。

CSS の @keyframes が、今回のやり方の重要ポイントになっています。CSS3 の仕様書をよんでも難しいので...Qiita で、@7968 さんの「【CSS3】@keyframes と animation 関連のまとめ」がわかりやすかったので、参考で掲載しておきますね。

さらに、今回の HTML や CSS について、参考にしたメディアについては、記事後半の見出しでご紹介いたします。あわせて、ごらんください。

【関連】参考にした外部メディア様のご紹介

自動横スクロールを実装するやり方の実装後

自動横スクロールを、CSS だけで実装するやり方が、実際に機能しているところをみてみましょう。

今回わたしのブログで実装した「自動横スクロールを実装するやり方」が成功すると、こんな感じで表示されます↓


こんな感じで、左から右に流れる文章を作るよ!!
DIV の横並び
ができるから、
ニュース情報を管理するのが簡単!!

HTML と CSS を、個別で解説していきます。基本的には、表示させたいところに HTML を入力すれば OK ですよ。

ちゃんと動いてくれているので、個人的に満足しております。なかなかかっこいいので、デザインにも磨きがかかった気がしますね。

参考にした外部メディア様のご紹介

CSSだけで自動横スクロール実装するために、参考にさせていただいたメディア様を、ご紹介いたします。すばらしい情報をシェアしていただき、ありがとうございます。

ひとつめは、CMAN インターネットサービス様です。ジェネレーターのように、サイト上で動作を確認しながら HTML と CSS を出力してくれるサービスがあるとは思いませんでした。

今回の実装は、CMAN インターネットサービス様がなければ実現できなかったので、ありがたやぁ〜って感じです。ぜひ、チェックしてみてください↓

【参考】文字スクロールのCSS作成 - CMAN インターネットサービス

ふたつめは、TechAcademy さんの横並びの方法です。今回は個別のニュースを、DIV で横並びにする必要がありました。縦にならばせないために、参考にさせていただきましたよ。

気になる方は、こちらからどうぞ↓

【参考】HTMLとCSSで横並びレイアウトの表示方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

CSSだけで自動横スクロール実装したから、やり方を解説まとめ

自動横スクロールを、CSSだけで実装する方法のやり方を、解説させていただきました。まとめると、こんな感じ↓

HTML
<div class="scroll">
<div class="news">
<div class="news1">ブログアップデート情報 → </div>
<div class="news2">2020/06/07:<a href="リンクのURL">新着記事の変更完了</a></div>
<div class="news3">2020/06/06:ブログトップ画像変更</div>
<div class="news4">2020/06/05:ブログデザイン変更</div>
</div>
</div>
CSS
.scroll {
  margin: auto;
  width: 100%;
  color: #666666;
  overflow:hidden;
  background-color: #f5f5f5;
}
.news {
  font-size: 14px;
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  line-height: 1em;
  animation: scrollAnime 18s linear infinite;
}
.news div {display: inline-block; margin-right: 10px;}
@keyframes scrollAnime{
    0% {transform: translateX(0)}
  100% {transform: translateX(-100%)}
}

実装結果
こんな感じで、左から右に流れる文章を作るよ!!
DIV の横並び
ができるから、
ニュース情報を管理するのが簡単!!

動きのあるウェブサイトを、CSS だけで実現できた方が、サイト運営者もわかりやすく、サイトも軽くなりユーザーにとってもメリットになりますよね。

あまりブログやサイトを縦に長くするスペースがなかったり、海外サイトのニュース表示に憧れている方は、ぜひ今回の方法を試してみてください。

助手くん
助手くん
CSS だけでアニメーションって、意外と簡単なんですね!!
助手ちゃん
助手ちゃん
動きがあると、やっぱり目をひきますね。
応用すれば、画像も表示できるのがいいよね。
サウンドオルビス
サウンドオルビス

この記事が、あなたのブログデザインのカスタマイズの悩みを解消できていたらうれしいです。そんじゃ、今回はこの辺で!?

そのほか。WEBデザインやブログカスタマイズに悩みにがあるかたは、あわせてこちらの記事もどうぞ↓

サウンドオルビス

3,757,055 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事