Softonic

スクロールテキストジェネレータ

ステップ 1 / 2
次へ

スクロールする見出しは、お知らせバー、株価ティッカー、イベントバナーが画面の狭い帯に多くの情報を表示するための手法です。このジェネレータは、従来のHTMLの<marquee>効果を純粋なCSSの@keyframesとtransform: translateX()アニメーションで再現するため、この手法は非推奨のタグを使わずにすべての現代的なブラウザで動作し続けます。メッセージを選び、1ループあたりの秒数で速度を調整し、色とフォントサイズを設定して、下に示すCSSで作り直す前にティッカーをライブでプレビューしましょう。

スクロール式バナーの作成方法

  1. 1

    メッセージを入力してください

    見出しを入力してください。短い行（4～10語）は動くストリップ上での表示が最適です。

  2. 2

    速度を選択してください

    秒数が少ないほどスクロール速度が速くなります。ニューススタイルのティッカーでは、1回の完全なループに30～60秒が適しています。

  3. 3

    色とサイズを設定します

    テキストの前景、ストリップの背景、およびヘッダーの高さに合ったフォントサイズを選択してください。

  4. 4

    ライブをプレビュー

    デモはリアルタイムでアニメーション化されているため、出荷前に読みやすさを確認できます。

  5. 5

    CSSで作り直す

    下に示す`@keyframes`と`transform: translateX()`のパターンを自分のスタイルシートにコピーして、あなたのサイトでティッカーを再現しましょう。

なぜ<marquee>ではなくCSSアニメーションを使用するのか

<marquee>タグはHTML5では使用が廃止されており、WHATWGからも「廃止された（obsolete）」ものとして指定されています。ブラウザでは現在もこのタグを表示していますが、アクセシビリティツールや検証ツールからは問題が指摘されており、イージングやループ処理の精密な制御もできなくなります。overflow: hidden内に含まれるtransform: translateX()アニメーションは、現代のツールを使ってもまったく同じ視覚的挙動を示します。

速度の調整

通過に要する時間は、処理時間と総幅の両方に依存します。1200pxのビューポートに対しては、以下の近似ルールが適用できます：

持続時間 感覚 典型的な使用方法
10～20秒 速い、注目を集める フラッシュセール、緊急アラート
30～45秒 ニュースティッカー ライブスコア、見出しバー
60～90秒 アンビエント 場所の看板、会議室
120秒以上 ほとんど動かない 装飾用・高級ブランドのバナー

アクセシビリティチェックリスト

  • ストリップをrole="marquee"またはaria-live="off"で包み込み、スクリーンリーダーがメッセージを毎ループ繰り返し読み上げないようにします。
  • @media (prefers-reduced-motion: reduce) { animation: none; }を使用して動きを抑制し、テキストを静的に表示します。
  • 文字と背景のコントラスト比は少なくとも4.5:1に保つこと。移動中の文字は静止した文字よりも読みにくくなります。
  • 重要な情報（法的注意事項、価格、エラーメッセージ）をスクロールする帯の中だけに配置しないでください。

よくある質問

いいえ。プレビューはoverflow: hiddenを指定した<div>と、内部のspanをtranslateXで動かすCSSの@keyframesアニメーションで構成されており、現代的なHTML5として検証されます。

コンテナのホバー選択肢にanimation-play-state: pausedを追加します。一部のユーザーはこれを定数ループよりも使いやすいと感じています。

はい。@keyframesの最終値をtranslateX(-100%)からtranslateX(100%)に変更し、-100%から反転方向で開始します。RTL言語に適しています。

いいえ。CSSの変換処理はGPU上で実行され、テキストはDOM内の通常のHTMLであるため、クローラーは正常に読み取ることができ、アニメーションがメインスレッドの動作を妨げることはありません。

プレビュー中はすべてブラウザ内に保持されます。何のデータもアップロードされたり記録されたりしません。

関連ツール

以下記号（≤）

≤ 記号と関連する数学の比較記号をコピーできます。スプレッドシート、論文、ウェブページ向けに Unicode、HTML エンティティ、LaTeX 記法を掲載しています。

コピーできる矢印記号

直線、二重線、斜め、折り返し、循環、三角形風のよく使うUnicode矢印をワンクリックでコピー。文書、チャット、デザインに使えます。

ディスレクシア対応テキスト変換ツール

貼り付けたテキストを短い段落と約72文字の行に整え直し、読みやすくします。結果をコピーして、あらゆる文書やメール、エディタに貼り付けられます。

ドメイン名ジェネレーター

1つのキーワードからドメイン名の候補を生成します。接頭辞、接尾辞、文字の重ね、数字の末尾を、一般的な6つのTLDで組み合わせます。

キャラクター名ジェネレーター

小説、ゲーム、RPGなどのキャラクター名を生成します。ファンタジー、SF、現代から選び、5〜30個の名前を設定すると、すぐに使える名前が手に入ります。

都市名ジェネレーター

世界観づくり、地図、ゲーム、物語、モックデータ向けに、架空の都市、町、村、首都の名前を生成し、各結果に短いメモを添えます。

このツールは他の言語でも利用できます