HTML、CSS、JSでスクロールテキストを作成する方法

# スクロールテキストを作成する方法

私のように25年以上Webアプリケーションを開発してきた人なら、HTML、CSS、JavaScriptの使い方はもはや当たり前のようになっています。この記事では、これらのツールを使ってスクロールテキストを作成する簡単な方法をいくつかご紹介します。初心者の方でも、サイトに素敵な効果を加えたい方でも、きっと役立つ方法が見つかるはずです。

:point_right:  サイトに掲載したり、GiphyやInstagramにアップロードしたりするためのスクロールテキストが必要なだけなら、PSDDudeの無料スクロールテキストジェネレーターを強くお勧めします。

:::note info
[Scrolling Text Generator](https://www.psd-dude.com/scrolling-text/ "Scrolling Text Generator")
:::

今日は、スクロールテキストに関連する次のトピックについて説明します。

* <marquee> HTML スクロールテキスト
* CSS のみのスクロールテキスト
* JS を使用したスクロールテキスト
* jQuery スクロールテキスト
* HTML5 Canvas スクロールテキスト

## HTML スクロール テキスト
ウェブページにスクロールテキストを素早く簡単に追加したいなら、HTMLタグを1つだけ使う昔ながらの方法があります。この方法は非推奨のため、最近のプロジェクトにはお勧めしませんが、知っておくと便利です。とはいえ、CSSやJavaScriptを使わずにスクロールテキストを追加する最も速い方法です。

HTML `<marquee>` タグ（非推奨）

テキストの周囲に `<marquee>` タグを追加すると、スクロール効果を作成できます。

例: `<marquee> Scrolling Text </marquee>`

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYqvgNr" data-pen-title="HTML Scrolling Text" data-user="inegoita" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/inegoita/pen/vYqvgNr">
  HTML Scrolling Text</a> by Ion Emil Negoita (<a href="https://codepen.io/inegoita">@inegoita</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>


注: このタグは非推奨なので、最新の Web 開発では使用しないでください。

## CSS スクロールテキスト

CSS アニメーションと を使用してスクロール効果を作成します。<code>@keyframes</code> 

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNrJBed" data-pen-title="CSS Moving Text animation With @keyframes" data-user="inegoita" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/inegoita/pen/oNrJBed">
  CSS Moving Text animation With @keyframes</a> by Ion Emil Negoita (<a href="https://codepen.io/inegoita">@inegoita</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

基本的にこのコードは、`translateX`  トランスフォームプロパティをアニメーション化することで、CSS スクロールテキストを作成します。CSS スクロールテキストの速度は、`animation`  プロパティのタイミングによって決まります。アニメーションの継続時間が短いほどテキストのスクロール速度が速くなり、値が大きいほどテキストの動き


また、アニメーションで `translateX` トランスフォームを `translateY` と入れ替えると、水平スクロール テキストではなく垂直スクロール テキストが表示されます。

## HTML + CSS + JavaScript スクロールテキストソリューション

基本的には、スクロールテキストにしたい長いテキストが入ったdiv要素があります。オーバーフロー部分を非表示にし、コンテナのスクロール量を20ミリ秒ごとに10ピクセルずつ増加させます。これらの値を調整して、テキストのスクロール速度を変えてみましょう。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYwbWVO" data-pen-title="HTML + CSS + JavaScript Scrolling Text" data-user="inegoita" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/inegoita/pen/eYwbWVO">
  HTML + CSS + JavaScript Scrolling Text</a> by Ion Emil Negoita (<a href="https://codepen.io/inegoita">@inegoita</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

## jQuery Scrolling Text

```jQuery.animate``` は任意の要素プロパティをアニメーション化できるため、今回は ```scrollLeft```  プロパティをアニメーション化します。これをループとして設定し、10000ms 経過後に ```scrollLeft```  の位置を 0 にリセットします。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="OJedLwv" data-pen-title="jQuery Scrolling Text" data-user="inegoita" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/inegoita/pen/OJedLwv">
  jQuery Scrolling Text</a> by Ion Emil Negoita (<a href="https://codepen.io/inegoita">@inegoita</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

## 参考URL
https://www.coding-dude.com/wp/css/scrolling-text-using-html/

![news-ticker.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4068816/6a610fc5-a31b-475e-99f1-c3ffaaa94929.jpeg)