お知らせテキストが横に流れていくバナーをCSSで実装する方法

Webサイトを閲覧していると、テキストが右から左に流れていく帯（バナー）を見たことがある方が多いかと思います。

主に新着情報やお知らせ、セールの情報を告知する際に使われていますね。

もともとHTMLにはテキストを自動的にスクロールさせるmarqueeというタグがあったのですが、現在は廃止され非推奨になりました。

この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

マーキー要素 (廃止) – HTML: HyperText Markup Language | MDN

そこで今回の記事では、CSSのみで横に流れるテキストを実装する方法を紹介していこうと思います！

サイト上で新着情報などを効果的に告知したいという方は、ぜひ参考にしてみてください。

テキストが横に流れるバナーのDEMOを確認

まずは今回の実装内容を確認しましょう。

現在開いているページの一番上と、以下にサンプルを用意しました。

バナー（リンクなし）

バナー（リンクあり）

実装内容が確認できたら、次は全体のコードを見ていきます。

【コピペ用】テキストが横に流れるバナーの実装コード

HTMLとCSSを使用しますので、それぞれファイルを作成し、以下のコードをコピペしてください。

<!-- バナー（リンクなし） -->
<div class="news-banner">
    <div class="news-banner__content">
    <p>お知らせテキストをここに入れてください！</p>
  </div>
</div>

<!-- バナー（リンクあり） -->
<a class="news-banner" href="ここにリンクを記入">
  <div class="news-banner__content">
    <p>お知らせテキストをここに入れてください！</p>
  </div>
</a>

/* バナー本体 */
.news-banner {
  display: block;
  height: 30px;
  width: 100%;
  background-color: orange;
  overflow: hidden;
}

/* バナー内コンテンツ */
.news-banner__content {
  display: inline-block;
  color: #fff;
  line-height: 30px;
  padding-left: 100%;
  white-space: nowrap;
  animation: animate-banner 20s linear infinite;
}

/* バナー内の要素をすべて選択 */
.news-banner__content > * {
  display: inline-block;
}

/* 横にスクロールさせるアニメーション */
@keyframes animate-banner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

以上が全体のコードになります。

HTMLはリンクあり・なしの2通りを用意しているので、好きなほうを使用してください。

さらにカスタマイズしたい・コードを理解したいという方のために、次の章でコードの解説をしていきます。

テキストが横に流れるバナーの実装コードの解説

ここからはコードの解説をしていきます。

この順番で説明していきますね。

HTMLでバナーの要素を作成する

<div class="news-banner">
  <div class="news-banner__content">
    <p>お知らせテキストをここに入れてください！</p>
  </div>
</div>

まずはnews-bannerのクラスがついたdivを用意します。

ここにはバナーの高さや背景色を設定でき、すべての要素の大枠となります。

中にはnews-banner__contentクラスのdivを用意し、この中にすべてのテキスト要素を格納します。

あとはこのdiv内にpタグでテキストを入力すると完成です！

pタグは複数設置することが可能！

DEMOでは1つのpタグのみ入っていますが、複数入れることも可能です。

<div class="news-banner">
  <div class="news-banner__content">
    <p>テキスト1が入ります。</p>
    <p style="font-weight: bold">テキスト2が入ります。</p>
    <p style="color: red">テキスト3が入ります。</p>
  </div>
</div>

上のように、複数のテキストにそれぞれ個別のスタイルを適用することもできますね。

バナーにリンクを付けたい場合はaタグを使用する

<a class="news-banner" href="URLを記入">
  <div class="news-banner__content">
    <p>お知らせテキストをここに入れてください！</p>
  </div>
</a>

「バナーをクリックすると別のページに遷移させたい」という場合は、divの代わりにaタグを使用してください。

またこの場合はhref属性にページのURLを記入しておきましょう。

これでバナーをクリックしたユーザーをリンク先のページに誘導することができます。

これでHTMLの解説は終わりです！

CSSでバナーを装飾＆アニメーションをつける

続いてCSSを見ていきましょう。

/* バナー本体 */
.news-banner {
  display: block;
  height: 30px;
  width: 100%;
  background-color: orange;
  overflow: hidden;
}

/* バナー内コンテンツ */
.news-banner__content {
  display: inline-block;
  color: #fff;
  line-height: 30px;
  padding-left: 100%;
  white-space: nowrap;
  animation: animate-banner 20s linear infinite;
}

/* バナー内の要素をすべて選択 */
.news-banner__content > * {
  display: inline-block;
}

/* 横にスクロールさせるアニメーション */
@keyframes animate-banner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

大きく分けると、以下の3つになります。

それぞれを順番に解説していきますね。

CSSパート①バナー本体の装飾

.news-banner {
  display: block;
  height: 30px; /* バナーの高さ */
  width: 100%; /* バナーの横幅 */
  background-color: orange; /* バナー背景色 */
  overflow: hidden; /* はみ出した要素を非表示 */
}

まずはバナー本体の装飾からです。

横幅いっぱいに広げたいので、widthには100%を指定します。

高さは30pxに指定していますが、好みに合わせて変えてください。

バナーの背景色は、background-colorプロパティで指定することができます。できるだけ強調させたいので、サイトのアクセントカラーを指定すると効果的ですね。

最後にoverflow: hiddenを指定しましたが、これははみ出した要素を隠すという意味になります。

これによりテキストがバナーの横幅より長くて入りきらない場合に表示が崩れるのを防ぐことができます。

これでバナー本体は完成です！

CSSパート②バナー内のコンテンツの装飾

/* バナー内コンテンツ */
.news-banner__content {
  display: inline-block;
  color: #fff; /* 文字色 */
  line-height: 30px; /* 行の高さ */
  padding-left: 100%; /* テキスト左側の余白 */
  white-space: nowrap; /* 文字を改行させない */
  animation: animate-banner 20s linear infinite; /* アニメーションを設定 */
}

/* バナー内の要素をすべて選択 */
.news-banner__content > * {
  display: inline-block; /* 要素を横並びにする */
}

続いてはバナーの中身の装飾を見ていきましょう。

colorプロパティには、文字の色を選択してください。DEMOでは背景がオレンジなので、読みやすさを重視して文字色を白にしました。

line-heightには行の高さを指定できますが、これはバナーのheightと同じ値を指定してください。

次にpadding-leftに100%を指定していますが、これは文字を右端からスタートさせるためです。左側に余白を作ることで、文字を画面右側に押し出している状態ですね。

そこからテキストを左にスクロールさせることで、文字が見えるようになるという仕組みです。

white-space: nowrapは、文字が改行するのを防ぐために使用します。

この指定をすることで、テキストがどれだけ長くても改行させず1行に収めることができます。

最後にanimationプロパティでアニメーションの指定をします。

/* アニメーションの名前 / 持続時間 / タイミング / 再生回数 */
animation: animate-banner 20s linear infinite;

animate-bannerというのは、次で作るアニメーションの名前です。

20sはアニメーションが20秒かけて実行されるということになります。スクロールの早さを変えたい場合は、この数値を調整してください。

linearは緩急なく一定速度でアニメーションを実行する、infiniteはアニメーションを無限に繰り返すという指定をしています。

次のセクションで、アニメーションの中身を見ていきましょう。

CSSパート③スクロールアニメーションを作成

@keyframes animate-banner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframesを使用して、animate-bannerという名前のアニメーションを作っていきます。

アニメーション内では、translateXという指定がありますね。これについて詳しく見ていきましょう。

アニメーションは0%から始まり100%で終わるので、まずは0%から確認していきます。

まずアニメーション開始時は、translateXの値が0になっていますね。この時点では動きはなく、その場にとどまるという指定です。

次にアニメーションが終了する100%の地点を見てみると、translateX(-100%)となっています。

translateXに負の数を指定すると、左方向に動くと説明しましたね。

この場合-100%が指定されているため、要素の100%分を左に動かすという意味になります。

ここでもう一度以下のコードを確認してみます。

/* アニメーションの名前 / 持続時間 / タイミング / 再生回数 */
animation: animate-banner 20s linear infinite;

“animate-bannerというアニメーションを、20秒間で一定速度のまま無限に繰り返す”という意味になりますね！

これでテキストが右から左に流れていくアニメーションが完成しました。

【まとめ】テキストが横に流れていくバナーをCSSで実装する方法

今回の記事では、CSSのみでテキストが左に流れるバナーを実装する方法を紹介しました。

新着情報やセール情報を告知する際に、ぜひ使ってみてください！