最終更新日 2022.04.1
CSS

CSSでテキストを自動スクロールする方法！お知らせは動きを付けて目立たせる

これはかな～り前に流行ってた手法なんですが、今でもよく見かけるので人気があるってコトですね。たしかに僕も依頼でよく実装してます。

HTML5で「marquee」タグは廃止されちゃったんですけど、この「marquee」タグを使うと文字をスクロールする事ができたんです。今では「animation」プロパティを使います。

ヘッドラインなどの見出しや新着情報などのお知らせを自動スクロールする事によって視認性がアップするので良かったら使ってみてください。

CSSでテキストを自動スクロールする方法

それではHTMLの記述とCSSの設定を見ていきましょう。

index.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>テキストを自動スクロールする</title>
                <style>
                * {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box
                }
                 
                html {
                  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
                  font-size: 62.5%;
                  letter-spacing: 0.09em;
                  font-feature-settings: "palt"
                }
                 
                .marquee {
                  width: 100%;
                  height: 40px;
                  line-height: 40px;
                  background: #000;
                  overflow: hidden
                }
                 
                .marquee p {
                  color: #fff;
                  font-size: 1.5rem;
                  padding-left: 100%;
                  white-space: nowrap;
                  padding: marquee 10s linear infinite;
                  display: inline-block
                }
                 
                @keyframes marquee {
                  0% { transform: translateX(0) }
                  100% { transform: translateX(-100%) }
                }
                </style>
                </head>
                <body>
                  <div class="marquee">
                    <p>ここに記述した文字が自動スクロールされます。</p>
                  </div>
                </body>
                </html>

こちらをコピペして貰えればOKです。ちょっとわかりづらいかも知れないのでひとつずつ確認していきますね。

            
                <div class="marquee">
                  <p>ここに記述した文字が自動スクロールされます。</p>
                </div>

HTMLの記述は特に問題はないですね。「div」タグの中に「p」タグを入れているだけです。クラス名は何でも良いのでお好きな名前に変更してください。

            
                @keyframes marquee {
                  0% { transform: translateX(0) }
                  100% { transform: translateX(-100%) }
                }

大事なのはCSSの設定です。まずは「@keyframes」を使ってアニメーションの設定をおこないます。

            
                .marquee {
                  width: 100%;
                  height: 40px;
                  line-height: 40px;
                  background: #000;
                  overflow: hidden
                }
                 
                .marquee p {
                  color: #fff;
                  font-size: 1.5rem;
                  padding-left: 100%;
                  white-space: nowrap;
                  padding: marquee 10s linear infinite;
                  display: inline-block
                }